I'm trying to use an AbsolutePanel inside a ScrollPanel. I'd like the ScrollPanel to occupy as much of the page height that it can to expose as much of the AbsolutePanel as possible.
I tried this. But the ScrollPanel and contents do not appear
<g:center height="100%">
<g:DecoratorPanel>
<g:ScrollPanel width='800px'>
<g:AbsolutePanel width='770px' height='1000px' ui:field='absolutePanel'/>
</g:ScrollPanel>
</g:DecoratorPanel>
</g:center>
If I put in a ScrollPanel absolute height ( height='800px'), it appears on the page, and of works - however, I'm not really sure what the height the user has on the browser, so I'd prefer not to hardcode 800px
<g:center height="100%">
<g:DecoratorPanel>
<g:ScrollPanel width='800px' height='800px'>
<g:AbsolutePanel width='770px' height='1000px' ui:field='absolutePanel'/>
</g:ScrollPanel>
</g:DecoratorPanel>
</g:center>
Is there anyway to have a 100% of parent height, ScrollPanel, with a absolute panel inside it?
So,You want to set the height(100%) of the scroll panel .
I'm not really sure what the height the user has on the browser.
The answer to the above question is
Window.getClientHeight();
Gets the height of the browser window's client area excluding the scroll bar.
The above method return an int then you can call panel.setHeight(returned+"px").
Its simply not logical. Absolute - means fixed. Why would you make absolute change its height/width. If you expect the panel size to change use FlowPanel or any other content panel.
Also if you are thinking along responsive design you should reference gwt documents for LayoutPanels to be used with RootLayoutPanel.
Read Design thoughts behind the GWT layout panels concepts which differs from earlier approach of .
Also, understand the resize concepts
Check and Observe GWT Showcase. Change browser size and the application Resizes even with grid data.
You can download the source code from GWT and extract the samples/showcase project. Note - the code is excessively complicated because of other features GWT is trying to demonstrate.
Related
We have many screens where different types of GWT panels are used.
One common problem across many screens is that, content size is derived at runtime. So, if I define a height for a panel(Vertical/Horizontal/DockPanel) and when any new components are getting added within panel or content is more, panel height remains the same. So we are not able to see the contents. UI look and feel becomes worst.
How do we handle the height problems? Do we have to manually code to adjust every panel/widget height when something gets changed in screen. Is it not a very bad way of coding?
Also, now we have datagrids at some places, if no of records are very less, we see a huge space left out below datagrid, not sure how do we handle these cases?
Updated below with few examples as per the comment:
Do you mean to say that whenever we know that content grows vertically, we can always choose FlowPanel. Because, some of the screens we have used Vertical panel/Horizontal Panel and inside that when user clicks something a new fields getting added and shown. So Vertical Panel/Horizontal Panel height automatically not getting adjusted. One more example is that we have main Vertical Panel within a Dock Layout Panel content area and inside that there are some widgets whose content may vary. So now if I use a FlowPanel to the content which varies in size, what about outer panels? Will get it adjusted? Again to say the kind of panels we have used - Dock Layout Panel is used with fixed header, footer, left menu and Content area. A scroll panel is used within Content area. All our different widgets go inside this which is mix and match of horizontal/vertical/datagrids..etc.
In GWT (and HTML) you can either set the height of a panel or let it expand naturally. In general, once you set the height of something, you lose the ability to let it expand naturally.
Some Panels in GWT implicitly set their own height (or require that you set their height) and so are never good choices for dynamically sized content. LayoutPanels and ScrollPanels, for example, can never adjust dynamically, and expect you to provide size information programmatically. FlowPanels and HTMLPanels, on the other hand, are great for dynamic heights and would rather you not set their height explicitly.
If you want a scrolling panel, of course you have to define how high it should be - how else could it know when to scroll and when to just get bigger? But, you can put a FlowPanel (which expands automatically) inside a ScrollPanel (which you have set at 800px or whatever). Then, as you add content to the FlowPanel, it will expand inside the ScrollPanel. Users can then scroll to see different parts of the FlowPanel.
Trouble-shooting tips:
Make sure you aren't setting the height on panels that you want to expand naturally
Make sure you ARE setting the height on panels that should always be the same size
Try using FlowPanels instead of Horizontal/VerticalPanels
*LayoutPanels and AbsolutePanels always need explicit sizes and can never grow dynamically as you add more content. Anything you want to grow with content should probably be a FlowPanel or HTMLPanel.
I'm trying to build a GWT GUI, but I'm not sure if it's possible. Basically, I need to be able to stack three layouts/panels, one on top of another like this:
Bottom Layout: Panel that fills the whole screen (will actually contain SVG stuff).
Middle Layout: DockLayoutPanel with tools docked around the edges, also full screen.
Top Layout: Transparent panel, again filling the whole screen.
Is it possible to stack panels like this? I assume I could use AbsolutePanel to do it somehow, but I was hoping for a nicer solution.
Thanks,
Jon
Because you want a DockLayoutPanel inside, try with a LayoutPanel (or the RootLayoutPanel) and simply add your widgets in order as, by default, a child of a LayoutPanel fills its parent.
I need a scrollPanel with a verticalpanel and a tablayout panel inside it. Problem is, unless I specify the exact height of the tablayoutPanel, the tab content does not show. Any known fixes/ workarounds?
Not the answer you are looking for, but might spark an idea for another way to do this - what does it mean to scroll a tab panel? As soon as the user starts scrolling down, the tabs will no longer be visible to change tabs, user will always need to scroll all the way to the top to consider any other tab.
That said, any of the *LayoutPanel classes GWT has introduced that implement ProvidesResize, RequiresResize, etc need sizing to properly draw themselves and their content. This is why you are having the issue. These classes are designed to size their children, not to just consume as much space as those children require.
Closest I can suggest to a workaround (except for putting a ScrollPanel inside the TabLayoutPanel instead) would be to know the height of the current tab's contents, add to that the height of just the tabs themselves, and assign that as the height of the tabpanel. Not a very nice solution, but it might get you by.
I have a DockLayoutPanel in my ui.xml class. When I wrap it in a ScrollPanel the whole thing disappears.
Any ideas?
DockLayoutPanel seems to need to be included inside a SimplePanel to be used in some Components, but a ScrollPanel should be a type of SimplePanel. Have you explicitly set the size of the DockLayoutPanel? Or tried embedding it in a SimplePanel?
Is a fixed pixel size set on the DockLayoutPanel? if not it will just try to wrap to 0x0px since this is the size calculated for it.
alternatively you can set the size of the DockLayoutPanel to 100x100% so it has the size of the scroll panel. However this will make the scroll panel pretty useless (size the content has it's size so scrollbars are never visible).
if you are trying to let the DockLayoutPanel have a larger size depended on the content of the DockLayoutPanel, this also won't work since each area of the DockLayoutPanel has a fixed size or takes the remaining size.
hope this helps, if not provide us a more detail description what you are trying to do?
Regards,
Stefan
Could anyone help me make normal layout in GWT.
I need a main panel which:
fills all the browser space (100% height);
if being collapsed too much shows scroll bars (autoscroll).
When I use old layout (RootPanel, VerticalPanel) I have scroll, but can't get 100% height.
When I use new layout (RootLayoutPanel, DockLayoutPanel) I get 100% height, but I don't get any scroll. And also I have some troubles in IE.
Is there any sample showing how to achieve both goals?
Thanks in advance!
I've got this as a RootLayoutPanel with a DockLayoutPanel inside. In the center is a ScrollPanel that takes up the rest of the space and provides the scrolling if needed. My .ui.xml (UIBinder stuff) looks kind of like this:
<g:DockLayoutPanel unit="PX" ui:field="Dock">
<!-- the g: north, west, east, south guys go here -->
<g:center>
<g:ScrollPanel addStyleNames='{style.document_area}'>
</g:ScrollPanel>
</g:center>
</g:DockLayoutPanel>
This is what I would try :
Your first panel (except the root)
is a ScrollPanel
Your second panel would be your
LayoutPanel (or DockLayoutPanel if
you prefer).