Re: sizing ListBoxes inside container
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 > > 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 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: > > > > > > item 1 > > > > > > > > > > item 2 > > > > > > > > > > item 3 > > > > > > > > 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 -~--~~~~--~~--~--~---
Re: sizing ListBoxes inside container
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 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: > > > item 1 > > > > > item 2 > > > > > item 3 > > > > 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 -~--~~~~--~~--~--~---
sizing ListBoxes inside container
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: item 1 item 2 item 3 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 -~--~~~~--~~--~--~---