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 <tomcat.subscript...@gmail.com> 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 Google-Web-Toolkit@googlegroups.com
To unsubscribe from this group, send email to
google-web-toolkit+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/Google-Web-Toolkit?hl=en
-~----------~----~----~----~------~----~------~--~---
