I'm trying to figure out how to use Material UI elements.
When I try to use the table, random margins/width attributes (that I cannot find the source of are being forced to narrow the cell width inside rows.
When I inspect the css, I can see that Material UI attributes are appended with random numbers that I then need to use to write css overrides in my own styles file.
What creates the random numbers?
Does anyone know which property is imposing a narrow width of the cell inside the row and how to switch it off?
Related
I'm following the example for changing dataTable font colors from this answer: How to change shiny app dataTableOutput font color and auxiliary table element color?
However, I have multiple tables on the same page, and that code affects every table on the page, even if it isn't specified until the final table (which makes sense given that it's css and applies to all the matching elements).
How can I specifically target an individual table? I see that the tables have ID's when I use Selector Gadget, starting from 1 through n in order of appearance (this order won't change, so it can be hardcoded), but I have been unable to find how to specify the css for a specific, individual table.
I'm using databale from PrineNG in my angular+typescript project.
I have datatable with some editable cells.
I want to change cell background color in some cases.
I know I can use 'bodyStyleClass'. But I need to take some css class based on whole row (I need to compare two values).
It means background color should be dynamically changed by my method.
How I can do this?
{{expression}}
Let us assume the output it will give is
"ABC-DEF,HIJ-KLM"
Now I wanted to have values after and before "-" to have different colors.
Since it is coming from an expression I don't know how to proceed. I tried building pipes for formatting but it did not work.I am not allowed to split JSON
and populate and style the divs separately.
You can't set css on expression because it is not an html element. If you want to split at '-' and set different color to each part you need to put the parts in two elements (like span or div) and set css on the elements.
I have modified the styles to change the color of the grid rows as well as text. This works fine when the grid is used by itself, but when using expandable rows, the expanded rows do not inherit the properties defined on the main grid. Instead, it is trying to use the original styles that come out of the box. Does anyone know how to make the expanded rows use the same css as the main grid?
in a GWT project I have a CSS with
.my_datagrid tr {
height: 26px;
}
and in my client code i do
grid.getElement().setClassName("my_datagrid");
that modify the minimum hight (i know isn't final) of datagrid rows, i would need for some reason to set this property (the TR height value) code way or at least read it...but the tr part make it over my understanding,
i tried with
grid.getElement().getPropertyString("tr height")
or
with
dataGrid.getElement().getStyle().getProperty("tr height")
but doesn't work..I understand that i'm working on the data grid element and not on the row but i need to know (or set) the minimal height BEFORE any row is added.
So..anyone knows how to read from css that value or remove it from css and set directly code way on my data grid?
If you need to tweak the CSS itself, then you have to use the CSSOM to manipulate the stylesheet (independently of where it's applied through matching).
GWT doesn't provide a CSSOM API, so you'll have to use JSNI. Also, beware of cross-browser support.
With a DataGrid widget, you'd better use a custom CellTableBuilder where you can inject inline style="" attributes on each generated row and/or cell.
To set a row height on all rows, you do:
myDataGrid.addStyleName("my_datagrid");
There is no way to set a height of all rows to a specific number other than by using a CSS class, but you can set height of a single row:
myDataGrid.getRowElement(index).getStyle().setHeight(26, Unit.PX);
If you need a height of a row, you can do:
int h = myDataGrid.getRowElement(index).getOffsetHeight();
Note that the actual height of a row may be different from the "style" setting, because text can wrap to have more than one line (unless you prevent it).