LayoutPanels are really handy for defining the basic structure of web-apps. 
However when coping with different screen resolutions one might run into 
some issues. 

Let's say I want to split up the main screen horizontally in two sections. 

_______________

|                                 |
|      North panel      |
|------------------------ |
|                                 |
|     South panel      |
--------------------------

I can use a LayoutPanels with two layers to do that. 

My first approach would be to split them in half using percentage sizes 

<g:LayoutPanel>
  <g:layer left="0" top="0" height="50%" right="0">
 <g:layer left="0" bottom="0" height="50%" right="0"> 
</g:LayoutPanel>

This will create two evenly sized panels (north and south). 

Now I can put additional elements in both panels (form elements, DataGrid, 
Charts, etc) However here lies also the problem when dealing with different 
screen resolutions. If I have enough vertical space (> 1024 px) everything 
might fit fine. However when somebody with a lower screen resolutions open 
that screen some elements in either of the panel will be clipped. 

Of course if I know how much space the elements in each panel need, I can 
define explicit sizes. i..e 

<g:LayoutPanel>
  <g:layer left="0" top="0" height="500px" right="0">
 <g:layer left="0" top="500px" bottom="0" height="500px" right="0"> 
</g:LayoutPanel>

Together with a ScrollPanel this might solve the problem for devices with 
lower resolution. However if I view the screen on a device with a much 
higher vertical screen resolution, I will not use all the available screen 
space. That's because I explicitly specified the height to 1000px (500px + 
500px). Of course I could specify an explicit size for one panel and use 
relative sizes for the other. However then again I run into the problem 
that devices with lower screen resolutions might clip the contents of a 
panel. 

The optimal thing would be somehow to combine LayoutPanels with 
relative/percentage sizes with min-width, min-height and ScrollPanel (not 
sure if this is possible). 

Basically my question boils down on how people solve the problem of 
different screen resolutions when using LayoutPanels?

-- 
You received this message because you are subscribed to the Google Groups 
"Google Web Toolkit" group.
To view this discussion on the web visit 
https://groups.google.com/d/msg/google-web-toolkit/-/HolR_BaGWSoJ.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to 
[email protected].
For more options, visit this group at 
http://groups.google.com/group/google-web-toolkit?hl=en.

Reply via email to