CSSLayout/TouchLayout vs full-sized vertical layout.

I have a very simple page that currently works fine on touch devices. It splits the screen in two rectangles, one red, one white, and makes them clickable. This was done in the classical “VerticalLayout/HorizontalLayout/setSizeFull/setExpandRatios” technique.

I am trying to move this page to TouchKit. The problem is that TouchLayout involves a CSSLayout, and adding my working component to such a layout breaks everything (I need all sizes to be relative, and inside the TouchLayout everything behaves as if sizes where maximally shrunk.)

I have tried to create a different style sheet, with some success for the horizontal direction, using explicit relative sizing, but even overriding every single container size in the hierarchy to “height: 100% !important” has brought me no joy.

Is there any way to stick a full-sized vertical container inside a TouchLayout ? I don’t care about pretty, I need to use the full space.

Two more things on my previous post

a) I understand that what I discussed would not look like the screen shot (there would be the navigation bar and a border). For step 1, I just want the official TouchKit TouchLayout to be as big as possible

b) For step 2, I would like to ditch the decorations, and use all of the screen. Replacing the mainWindow content with a panel just crashes currently with an UmbrellaException (reported in debugger). There is probably some GWT magic going on, but I can’t help any more. To reproduce, in the “ItemTouched” handler, create a Panel with a label inside and set it as the main window content. Boom.