sizing ListBoxes inside container

[otismo]

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

[El Mentecato Mayor]

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.

[Ian Bambury]

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 <rogelio...@gmail.com>