That's fairly closely related to the approach I'm taking. It is worth
noting, however, that this totally fails on IE6, because it won't handle the
kinds of implicit constraints created by, e.g., { left:0; right:0; }. Just
to make matters more difficult, it also can't handle { right:0; }
properly (often off-by-one pixel). Part of the work I'm doing involves a lot
of script hackery to account for this, without hamstringing the
implementation on other browsers.
On Sat, Jun 27, 2009 at 6:56 AM, Cristiano
<cristiano.costant...@gmail.com>wrote:
>
> I think it is reallay interesting:
> I've been able to realize flexible and fluid layout before passing to
> use GWT, by using CSS and a combination of properties "position:
> absolute;" "top:xxx", "bottom;xxx", "width:xxx" etc.
> and I liked this approach because it does not use tables!
>
> In gwt, I've tried to do the same by using AbsolutePanel but it was
> not posible mainly because AbsolutePanel ony let you to set top and
> left value, (and, if I remember correctly, only as integer value).
>
> I don't know if it could be of any help, but here I want to give you a
> sample (in html) which I wrote while studing how to apply this kind of
> CSS layouts in GWT (for sure it works on IE7, I don't know if it works
> on IE6 but it was not important for me):
> {{{
> <div id="Main" class="panel">
> <div id="Left" class="panel"
> style="position:absolute;top:0;bottom:0;left:0;right:50%;">
> <div id="LeftLeft" class="panel"
> style="position:absolute;top:0;bottom:0;left:0;width:200px;">
> <div id="LeftLeftTop" class="widget"
> style="position:absolute;top:0;height:300px;left:0;right:0;"><h2>Left
> Left Top</h2></div>
> <div id="LeftLeftBottom" class="widget"
> style="position:absolute;top:300px;bottom:0;left:0;right:0;"><h2>Left
> Left Bottom</h2></div>
> </div>
> <div id="LeftRight" class="panel"
> style="position:absolute;top:0;bottom:0;left:200px;right:0;">
> <div id="LeftRightTop" class="widget"
> style="position:absolute;top:0;height:200px;left:0;right:0;"><h2>Left
> Right Top</h2></div>
>
> <div id="LeftRightBottom" class="panel"
> style="position:absolute;top:200px;bottom:0;left:0;right:0;">
> <div id="LeftRightBottomTop" class="panel"
> style="position:absolute;top:0;height:200px;left:0;right:0;">
> <div id="LeftRightBottomTopLeft" class="widget"
> style="position:absolute;top:0;bottom:0;left:0;right:50%;"><h2>Left
> Right Bottom Top Left</h2></div>
> <div id="LeftRightBottomTopRight" class="widget"
> style="position:absolute;top:0;bottom:0;left:50%;right:0;"><h2>Left
> Right Bottom Top Right</h2></div>
> </div>
> <div id="LeftRightBottomSplit" class="panel"
> style="position:absolute;top:200px;height:5px;left:0;right:0; cursor:s-
> resize;"><hr/></div>
> <div id="LeftRightBottomBottom" class="widget"
> style="position:absolute;top:205px;bottom:0;left:0;right:0;"><h2>Left
> Right Bottom Bottom</h2></div>
>
> </div>
> </div>
> </div>
> <div id="Right" class="panel"
> style="position:absolute;top:0;bottom:0;left:50%;right:0;">
> <div id="RightLeft" class="widget"
> style="position:absolute;top:0;bottom:0;width:300px;right:
> 0;"><h2>Right Left</h2></div>
> <div id="RightRight" class="widget"
> style="position:absolute;top:0;bottom:0;left:0;right:300px;"><h2>Right
> Right</h2></div>
> </div>
> </div>
> }}}
>
> I would like to be able to reproduce such a layout in GWT.
>
> NB. Any news on UiBinder?
> >
>
--~--~---------~--~----~------------~-------~--~----~
http://groups.google.com/group/Google-Web-Toolkit-Contributors
-~----------~----~----~----~------~----~------~--~---
