It's nothing to do with GWT except that the VP is a table and the working
example is using divs.
Try something like this:
FlowPanel ui = new FlowPanel();
RootPanel.get().add(ui);
RootPanel.getBodyElement().getStyle().setProperty("margin", "0");
ui.setHeight("100%");
ui.setWidth("100%");
ListBox box1 = new ListBox();
box1.setHeight("20%");
box1.setWidth("100%");
box1.addItem("item1");
box1.setVisibleItemCount(100);
box1.getElement().getStyle().setProperty("display", "block");
ui.add(box1);
ListBox box2 = new ListBox();
box2.setHeight("20%");
box2.setWidth("100%");
box2.addItem("item2");
box2.setVisibleItemCount(100);
box2.getElement().getStyle().setProperty("display", "block");
ui.add(box2);
ListBox box3 = new ListBox();
box3.setHeight("60%");
box3.setWidth("100%");
box3.addItem("item3");
box3.setVisibleItemCount(100);
box3.getElement().getStyle().setProperty("display", "block");
ui.add(box3);
Ian
http://examples.roughian.com
2009/8/10 El Mentecato Mayor <[email protected]>
>
> AFAIK, there's no way to do that, it's a limitation or bug that GWT
> has. If you do this (set a visible item count larger to what you know
> it will fit in the page), it will work on IE, but not on Firefox:
>
> VerticalPanel ui = new VerticalPanel();
> ui.setBorderWidth(1);
> ui.setHeight("100%");
> ui.setWidth("100%");
> ListBox box1 = new ListBox();
> box1.setSize("100%", "100%");
> box1.addItem("item1");
> box1.addItem("item 1.1");
> box1.setVisibleItemCount(100);
> ui.add(box1);
> ui.setCellHeight(box1, "20%");
> ListBox box2 = new ListBox();
> box2.addItem("item 2");
> box2.setSize("100%", "100%");
> box2.setVisibleItemCount(100);
> ui.add(box2);
> ui.setCellHeight(box2, "20%");
> ListBox box3 = new ListBox();
> box3.setSize("100%", "100%");
> box3.setVisibleItemCount(300);
> box3.addItem("item 3");
> ui.add(box3);
> ui.setCellHeight(box3, "60%");
>
> Maybe a way to accomplish this is to get the size of the window, and
> then divide it in whatever percentages, and then set the size in
> pixels for each listBox. You'll also need to have a
> windowResizeListener to resize the listboxes when the window size
> changes.
>
>
> On Jun 14, 11:26 pm, otismo <[email protected]> wrote:
> > I want to create a layout with 3 listboxes that are 20%, 20%, and 60%
> > of the page height.
> >
> > I tried:
> > ui = new VerticalPanel();
> > ui.setStyleName("test");
> > ui.setBorderWidth(3);
> > ui.setHeight("100%");
> > ui.setWidth("100%");
> > ListBox box1 = new ListBox();
> > box1.addItem("item1");
> > box1.setHeight("20%");
> > ui.add(box1);
> > ui.setCellHeight(box1, "20%");
> > ListBox box2 = new ListBox();
> > ui.add(box2);
> > ui.setCellHeight(box2, "20%");
> > ListBox box3 = new ListBox();
> > ui.add(box3);
> > ui.setCellHeight(box3, "60%");
> >
> > The above code renders a table with the proper sizing, but the list
> > boxes don't expand to fill their surrounding cells.
> >
> > I've also tried styling the list boxes with:
> > .gwt-ListBox {
> > width: 100%;
> > height: 100%;
> >
> > }
> >
> > The width setting works but not the height. Is there any way to get
> > the height setting to work? I know I can set the visible count on the
> > list box, but I want the list box to resize dynamically.
> >
> > What I want can be done with css as follows:
> > <div>
> > <select size="4" style="height: 20%; width:100%;" >
> > <option value="item1">item 1</option>
> > </select>
> > </div>
> > <div>
> > <select size="4" style="height: 20%; width:100%;" >
> > <option value="item2">item 2</option>
> > </select>
> > </div>
> > <div>
> > <select size="4" id="test2" style="height:60%;width:100%;" >
> > <option value="item3">item 3</option>
> > </select>
> > </div>
> >
> > What am I doing wrong? Thanks for any tips!
> >
> > Peter
> >
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Google Web Toolkit" group.
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
-~----------~----~----~----~------~----~------~--~---
