Hi John, Here's a working example of two labels in an HP which will stick at 30-70 wide and 100% high.
You *must* have the doctype, and you must put the "html, body" css in as css not in code. Most of the rest can go in as css, but I've done it here for clarity. The code is arranged so that you can comment it out from any point onwards to see the effect that the comments suggest. Also, as I say later, if you put margins, borders or padding in, then there are ways to do this without screwing up the the layout, but if you just put them in on these widgets, you may well do just that - let me know if you need help on that. Ian http://examples.roughian.com/ public void onModuleLoad() { /* * You must do this in css somewhere * * html, body { height : 100%; width : 100%; } * * The rest of this you _can_ do in css, too */ // GP-use style object Style s; // Get the style for the root panle s = RootPanel.get().getElement().getStyle(); // Colour it for recognition purposes s.setProperty("backgroundColor", "yellow"); // Remove the margin - you MUST do this because the 100% is the inside // of the box (not including padding) and if you leave the margins in, // they will cause scrollbars when they push the sizes wider than 100% s.setProperty("margin", "0"); // The HP HorizontalPanel h = new HorizontalPanel(); // Add it RootPanel.get().add(h); // Get its style object s = h.getElement().getStyle(); // You need a width, it's a table - divs are automatically 100% wide s.setProperty("width", "100%"); // Set the height to 100%. This will now work because of the html, body // css we did at the top - there is a real height to work with, so this // actually is 100% of something. s.setProperty("height", "100%"); // Stain the HP red. You can prove this works if you comment out the // rest of this method. The red of this HP will cover the yellow of the // body and there will be no active scrollbars s.setProperty("backgroundColor", "red"); // Create a label Label one = new Label("One"); // Add it to the HP h.add(one); // Colour it s = one.getElement().getStyle(); s.setProperty("backgroundColor", "blue"); // Create a label Label two = new Label("Two"); // Add it to the HP h.add(two); // Colour it s = two.getElement().getStyle(); s.setProperty("backgroundColor", "cyan"); /* * At this point there will be two labels at the top of the screen * covering roughly half the width each. This will vary if you change * the relative amounts of text. */ // Set the height of the cell that the first label is in to 100% h.setCellHeight(one, "100%"); // Set the height of the first label to 100% one.setHeight("100%"); // Set the height of the cell that the second label is in to 100% h.setCellHeight(two, "100%"); // Set the height of the second label to 100% two.setHeight("100%"); /* * You will now have a blue label and a cyan label roughly 50-50 on * width and covering the full height */ // Set the width of the first cell to 30% - the second will have to be // 70%. You don't need to set it. h.setCellWidth(one, "30%"); /* * You can now resize the screen and change the amount of text and they * will stay 30-70, but if you have widgets of a set-size which is bigger than * that percentage works out at, results may be unpredictable. * * If you need borders or margins or padding, let me know, because it is * easy to screw this up if you aren't sure what you are doing */ } --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
