Hey Gregor thanks for the effort u took in replying to my question. I tried ur code and it works fine. But the problem is still unsolved. I need to perform all layout and positioning using CSS so that the enduser can make changes whenever he wants to in the CSS without touching the code. The above code will work well in css only if u specify it in pixels explicitly which is not really favorable.
Your code does exactly solve my problem but i need to solve it using css. Thanks and regards Aragorn. On Dec 15, 5:30 pm, gregor <[email protected]> wrote: > Hi Aragorn, > > This is what I mean. Notice that I am setting the height of the HTML > contents boxes to 100% (except the bottom one) so that they grow > vertically to occupy the space of their parents which in this case are > the VP cells they occupy (NB HTML automatically expands width wise, > some widgets don't so you have to give them a width=100%). Then I set > the VP cells to create the effect. > > Is this not what you are talking about? > > regards > gregor > > public class SandBox implements EntryPoint { > > private VerticalPanel vPan = new VerticalPanel(); > private HTML top = new HTML("Top"); > private HTML middle = new HTML("middle"); > private HTML bottom = new HTML("bottom"); > > public void onModuleLoad() { > > top.setStyleName("back-blue"); > middle.setStyleName("back-red"); > bottom.setStyleName("back-green"); > top.setHeight("100%"); > middle.setHeight("100%"); > > vPan.add(top); > vPan.add(middle); > vPan.add(bottom); > vPan.setCellHeight(top,"50px"); > vPan.setCellHeight(bottom,"1%"); > > vPan.setBorderWidth(2); > vPan.setSize("100%","100%"); > RootPanel.get().add(vPan); > }} > > .back-blue { > background-color: lightblue; > > } > > .back-red { > background-color: red; > > } > > .back-green { > background-color: green; > > } > > On Dec 15, 4:52 am, aragorn <[email protected]> wrote: > > > I have tried it. The middle panel actually doesnt occupy the entire > > height since it is empty. The bottom panel also doesnt really stay at > > the bottommost part of the window as it follows the middle panel. > > I want the top panel to occupt certain fixed pixel height. The middle > > and bottom panel should occupy the remaing space which i would soecify > > in percentage in css. How do i go about it? > > > On Dec 15, 2:15 am, gregor <[email protected]> wrote: > > > > I think you need to work with VP.setCellHeight(widget,height). The > > > basic technique is to set the the top and bottom widgets to say 1% > > > height and the middle one 100% which will minimize the height of top > > > and bottom depending on contents and middle will fill out the rest. Or > > > you can give a hard pixel height value to top and bottom and 100% to > > > middle. > > > > On Dec 14, 10:23 am, aragorn <[email protected]> wrote: > > > > > I am creating a vertical panel which contains 3 panels in it. now i > > > > want the topmost panel to always remain at the topmost region touching > > > > the top of the window. Similarly the bottommost panel should remain at > > > > the bottom touching the lowest part of the window. the middle panel > > > > should occupy the entiore remainn=ng space between these two. I tried > > > > using vertical alignment in CSS as well in GWT code somewhat like > > > > vertical-align: top; // for top window > > > > vertical-align: bottom; //for bottom window > > > > > It doesnt work as expected. AM i doing it wrong? is there a way to do > > > > it using CSS ??? --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
