LayoutPanels and responsive design (min-width, max-width)

[Ümit Seren]

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?