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).
Related
In the Angular 11 project I need to change ng-circle-progress library CircleProgressComponent element size dynamically.
I have found out, that size of the element can be changed by putting width/height CSS properties on the child DOM element - svg. Problem is that svg doesn't have any id or class values, so even if I could somehow query the element, this would be not that easy and flexible as it should be.
Would be extremely nice to have a parameter in the CircleProgressComponent, that listens to outer variable changes and re-renders the element with a new size.
I had never used this library, so I've read their doc and thier demo page.
If I understand, they have the parameter that you want called radius
<circle-progress
[percent]="85"
[radius]="200" // the size you want
[outerStrokeWidth]="16"
[innerStrokeWidth]="8"
[outerStrokeColor]="'#78C000'"
[innerStrokeColor]="'#C7E596'"
[animation]="true"
[animationDuration]="300"
></circle-progress>
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?
I want to manual set column(head and body) size(width, height).
I tired to set style but not work and find all document not found about this.
DataGrid Component
DataGrid set width size not work
Setting the column width:
<clr-dg-column [style.width.px]=“200”>my column</clr-dg-column>
This will also set width for all column cells.
To control height and width you can either put the datagrid inside a container with a set height/width.
After i tired use set style on template(html)
my column
I have other problem when use follow Server Driven(https://clarity.design/documentation/datagrid/server-driven)
When next pagging each column length adjusted according to data i found overlap column
Data overlap column
and when binding long length data i found header separate column incorrect
header wrong separate column
My solution i think i have to loop for looking longest length and setting style width and writing logic in to typescript.
Have any solution easy way please suggest me.
I have different sub-elements in a GtkBox, the first item always is a GtkLabel which should show the line-number. ( Each element of the GtkBox shows a line of a file )
Now I want to make sure that the width of the GtkLabel always is the maximum used width across all GtkLabel's in the GtkBox.
I already implemented that in C-code, however I wonder if it is as well possible to do so by using css ... probably that would be more elegant.
For gtkBoxes the css-attribute "min‑width" is available ... but I dont want to set a fixed value, I want to set the maximum width of all objects which are in the css-class.
I have no idea how/if that is possible. Is there some way to express that in css ?
No, you cannot define this behaviour in CSS.
You should use a GtkSizeGroup with a GTK_SIZE_GROUP_HORIZONTAL mode, instead; you can also define size groups inside your GtkBuilder XML files, if you want to avoid having this relationship inside the source code.
In particular I have a GWT project with a
TextArea element which I want to conform to a set width and expand as much as needed to the bottom.
ListBox element which I want to conform to a set width and expand vertically to show the entirety of the displayed list item.
Those are two widgets using replaced elements: <textarea> and <select> respectively.
for the TextArea, there's no way to make it really "resize automatically" other than listening to events and computing the new size (there's actually no need to compute the new size, you can just let the browser do it; see http://phaistonian.pblogs.gr/expanding-textareas-the-easy-and-clean-way.html)
for the ListBox, it's impossible to have the items' text wrap. See Word wrap options in a select list for a similar question in pure JS.
Set the width to whatever number and set height to auto.