How can I control the width of the columns in MatBlazor MatTable
I have fiddled a bit around, and by disabling the css class mdc-table in the browser 'inspector'... it seems to be possible to get 'normal' table behavior.
right now all column except the last column is quite narrow, (actual widths: 119, 153, 460)
the last columns is just two icons, so it should be about 100px width, and the middle column is a quite long text string, so I would like that to be much wider.
There isn't much drama about the code, but here it is anyway...
<MatDialog #bind-IsOpen="#ShowBeginCreateNewSLA">
<MatDialogTitle>Service level agremeents</MatDialogTitle>
<MatDialogContent>
<MatTable ShowPaging="false" Items="SLAOptions">
<MatTableHeader>
<th>Id</th>
<th>Description</th>
<th>Action</th>
</MatTableHeader>
<MatTableRow>
<td>#context.Id</td>
<td>#context.Description</td>
<td><MatIconButton Icon="delete" /></td>
</MatTableRow>
</MatTable>
</MatDialogContent>
<MatDialogActions>
<MatButton>Close</MatButton>
</MatDialogActions>
</MatDialog>
Any idea what I can do?
I found that the way to set it, also mentioned in the documentation, is simply to insert a div with a fixed with in the table header, such as
<th><div style="width: 200px">Options</div></th>
Related
Does anyone maybe have an example of a LitRenderer with multiple lines of potentially wrapped text in a vaadin grid please?
All the examples in the documentation just have a bold line and a small single line of text underneath. I have tried to create a bold line and then a multi line text paragraph underneath it, but I cant get the grid to render this properly.
The text should ideally change width responsively with flex grow, wrap accordlingly and potentially truncate if no space is available.
Edit:
I think I got this working as follows:
grid.addColumn(TemplateRenderer.<SubProductTypeOption>of("""
<vaadin-vertical-layout style="line-height: var(--lumo-line-height-m); height: 175px; cursor: pointer;">
<span> [[item.name]] </span>
<span style="font-size: var(--lumo-font-size-s); color: var(--lumo-secondary-text-color); white-space:normal;">[[item.description]]</span>
</vaadin-vertical-layout>
""")
.withProperty("name", SubProductTypeOption::getName)
.withProperty("description", SubProductTypeOption::getDescription)
).setFlexGrow(1);
Seems to work so far...
I'm trying to create a row editor.
When using the default example code for the grid link, when I'm styling my element im not able to do width: 100% the td the element is appended onto has the correct colspan in my case 6 but the width of the element is no where near the width of the 6 columns. The width feels more like one column.
Can you set display: flex for the row details for it to take full space? You can find an example here: https://cdn.vaadin.com/vaadin-core-elements/master/vaadin-grid/demo/other.html
I recently inherited a project that makes extensive use of Kendo charts, with a request to add some information to column labels. The labels currently contain an integer and a percentage, and the revision would add an additional percentage value. Since the labels are getting a little long, they need to be split across multiple lines.
So a column label that currently reads:
3, 0.00%
would now read
3
0.00%
9.99%
The code is arranged MVC style, so the code determining each label looks similar to the following:
.Labels(labels => labels.Visible(true).Position(ChartBarLabelsPosition.OutsideEnd)
.Template("#= value #, #= kendo.format('{0:P}', dataItem.GetPercent)#"))
.Tooltip(t => t.Template("#=series.name#: #= value #, #= kendo.format('{0:P}', dataItem.GetPercent)#").Visible(true));
It seems like this should be a simple thing, but I can't find the syntax for properly working line breaks into the labels. Kendo does seem to attempt to interpret <br /> entries, but these disrupt the flow of the chart and cause all following label values to be displayed below the entire chart rather than in place just above the column. Some forum posts I have searched assert that this is not currently possible in Kendo, but also mention that it 'will be possible in 2014' (most of these are older posts though, and since I don't know much about kendo, I could be misunderstanding which labels they are referring to).
Can anyone provide me with the proper syntax for inserting a line break into this type of label (from code) or a possible workaround if the functionality is not currently supported?
Thank you!
UPDATE
I have found the <tspan> workaround, which does help a little but still looks pretty bad since my charts are resized dynamically with the page (so, for a stacked bar chart, the widths and starting positions of each column are not static). The <tspan> tag respects the y coordinate of each label but not its x coordinate, so that has to be set individually for each column; if left unset, the labels for all columns will appear at the leftmost side of the chart where the y axis values are. Since the charts are dynamic, there is no "correct" static value to put there and I have been unable to find a way to fetch a column's starting position from within the template code. Is there any way to correct this such that the <tspan> workaround becomes a viable option?
(Workaround found here)
From 2014-Q2 versions, Telerik / KendoUI finaly implemented the \n
See the documentation:
The text can be split into multiple lines by using line feed characters ("\n").
http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-categoryAxis.title.text
This is driving me crazy. I need spacing between the rows of my mtable elements. For now, I am content to get it in the html; once I have that working, I'll try to move it to CSS.
Here are some things I am trying. In each case, I've set the amount of space crazy large so that if it works it will be unmistakable. But so far I can't see any space.
The implementation of mathML is incomplete. But until now, I've been able to find work-arounds for almost everything.
<math>
<mtable rowspacing="10ex">
<mtr padding="40px">
<mtd padding="40px">
<!-- remainder of the table here -->
another attempt, equally useless:
<math>
<mtable framespacing="40px 40px">
<mtr margin="40px">
<mtd margin="40px">
<!-- remainder of the table here -->
This did it:
<mtd style="padding:10px 0 10px 0">
I'd like to know how to dynamically change my CSS styling based on the number of elements in my database.
Users can choose a certain number of columns, and the number of columns they choose determines the width of the columns (obviously the more columns chosen, the smaller the width of each column would be so that they are evenly spaced horizontally across the page.
How do you do something like this?
Sounds like a good use of ahem TABLEs!
The issue is you can't do this by changing the CSS, you need to change the HTML
<table width="100%">
<tr>
<td>..</td> (repeat for the number of columns)
</tr>
</table>
By default all table cells (TD) will be of equal width.
You need to dynamically assign styles in your .html.erb. You can use, tables, divs, lists - whatever you want. Just assign different classes depending on the number of columns (class="small", class="wide") and define those in your CSS file OR (possibly less pretty) you can use inline-styles.
For example, in this code I assign the width of an element (to do a five-star rating):
<ul class="stars floatstars">
<li class="yellowstars" style="width: <%= #article.avg_rating * 25 %>px !important;"></li>
<li class="text"><%= #article.avg_rating %> average from <%= pluralize(#article.count_ratings, "vote") %></li>
</ul>
Edit: if you set the class as a variable in the controller this would be an example for the view:
<li class=<%= #myclass %>>...</li>