About the doctype...
Are you saying I need any doctype or I need the specific one you
suggested? I was using this from GWT 1.5.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Does GWT now suggest running in "standard" mode instead of "quirk"
mode? I was having better luck in "quirk" mode for my sample code
above. I tried switching to "standard" mode with the css but I ended
up with vertical & horizontal scroll bars.
John
On Nov 7, 5:34 pm, "Ian Bambury" <[EMAIL PROTECTED]> wrote:
> 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
-~----------~----~----~----~------~----~------~--~---
