I am trying build a UI with a VerticalPanel inside a ScrollPanel inside another VerticalPanel. I need the ScrollPanel to stretch to its parents height and width, so I set the height and width to 100%. The problem is, if the child VerticalPanel exceeds the size of the parent's, the ScrollPanel stretches to fit the child, beyond the limits of its parent.
Are there any CSS properties to limit the size of the ScrollPanel? I can't use maxHeight/maxWidth because I don't know the dimensions of the parent and would like to continue using "100%" as the width/height values.
Thanks!
unfortunately, you can't set ScrollPanel sizes to percentage. If you want to set your scrollPanel height to client's view height, you have to manage its height on your code to Window.getClientHeight().
You can not specify scrollpanel height in percentage. This should be absolute not relative. You have to modify your code and replace percentage to px or em but not percentage.
For more detail refer Scroll Panel Height
Related
From what I understand the DataGrid auto resizes the columns.
What I would like is DataGrid to respect the column widths I set, and to show the horizontal scrollers accordingly. Is there a way to achieve this?
DataGrid gives you complete control over the width of its columns.
For example, if you set the width of all columns in pixels except for one column which has a width equal to 100%, then all columns will have exactly the width you specified, except for the percentage column which will shrink or expand based on the width of a DataGrid itself. If you want all columns to have fixed width, then you should set the width of the entire DataGrid explicitly in pixels.
There is also an important .setMinimumTableWidth method. You can use it to tell the DataGrid that it can resize with the width of its parent container, but never be smaller than a certain number of pixels. In this case, if a parent container is too small to accommodate all columns at their desired width, the horizontal scrollbar will appear.
I have a CellList which will have fix number cells in one page, i would like the cells extend to fill the whole CellList.
Suppose the CellList height is 100px, the cell number is 10, then one cell/row will be 10px, if the CellList height is 500px, each cell/row's height will be 50px.
The problem is, how to control the row height after table rendered, i tried to addLoadingStateChangeHandler on cell list and when onLoad i use GQuery to resize the cell height, but seems no effect.
Yes i can get each row's height beforehand, but how to apply to the CellList's CSS?
Any ideas on this?
Problem solved, when creating a new cell, specify its height(because we know the height beforehand), when resizing the CellList, just redraw it by specifying a new height.
i have a small screen and i want the horizontal scrollbar on datagrid to appear automatically.
i've used:
dataGrid.setMinimumTableWidth(1500, Unit.PX);
this sets the width both the scrollbar still not appear
any tip?
I had a similar problem. When using DatGrid make sure you place it within a ResizeLayoutPanel. Set the height of the panel to xxx PX and the width to a yyy %. Then for the DataGrid just set width to 100%. Column widths units can be EM, PCT, or PX. In fact do not set all column widths to total 100%, otherwise you'll get funky display issues. Hope this helps.
So I tested out this code, both scrollbars show.
<g:ResizeLayoutPanel height="480px" width="760px">
<c:DataGrid width="100%" addStyleNames='{style.cellTable}' ui:field="testResultTable"/>
</g:ResizeLayoutPanel>
I want to draw a gradient to a canvas and add it to an AbsolutePanel, thus i need width and height of absolutePanel to define gradient vector. But event if I add AbsolutePanel to RootLayoutPanel (via the north-widget of a DockPanel, which width set to 100%) and call a method setGradient() after, i still get 0 for width and height. How can i get the dimensions of the panel?
Use getOffsetWidth() and getOffsetHeight() methods. The doc is here:
Gets the object's offset width in pixels. This is the total width of the object,
including decorations such as border, margin, and padding.
The methods are defined in UiObject, so common for all widgets.
I have a horizontalpanel with 3 verticalpanels inside.
In the verticalpanels there are custom widgets
I need all verticalpanels has the same height (even if they have different number of widgets inside) and a button in the empty space.
So, I put all panels height = 100% and the buttons height = 100%.
The problem is that the verticalpanel cells height are bigger than my widgets, so it left a space between all verticalpanels widgets.
Here is an example
How can I adjust the verticalpanels cells height to my widgets height. My widgets are not images like in the example, so i can't know the widgets height.
I have a lot of time in this problem, anyidea will help
Thx!!!!
Haven't tried it, but this should work or at least give you something to start:
VerticalPanel.setCellHeight(yourWidget, Integer.toString(yourWidget.getElement().getOffsetHeight())+"px");
What it does:
setCellHeight() sets the height of the cell the widget is in you pass to the function.
The second parameter in the function is the height of that cell. This gets a little tricky because you don't know the height.
With the getElement() you get the Element of that widget in the DOM of the browser, on that element you can call getOffsetHeight().
getOffsetHeight() returns an integer so you need to cast it into a String and concatenate "px" to it so the browser knows it's pixel and not em or something like that.