Eventhough GWT 1.5 RC2 is out - the orignal issue with DecoratorPanel remains. ie: rendering is awkward!
http://code.google.com/p/google-web-toolkit/issues/detail?id=2802 On Aug 20, 3:08 am, anjolight <[EMAIL PROTECTED]> wrote: > Hi Gregor, thanks for the reply. It worked! > > Just for your info, I copied all of your .gwt-DecoratorPanelcss into > my css file and took the three images from John LaBlanca's zip file. > Then I did below. > > myDecoratorPanel.setWidth("100%") ; > <all of the parent panels of myDecoratorPanel>.setWidth("100%"); > > thanks so much! > Yoshi > > On Aug 17, 7:24 am, gregor <[EMAIL PROTECTED]> wrote: > > > Hi Yoshi, > > > I've read posts along those lines too so I just tried decorator panel > > myself and it looks to me like you can set the decorator panel's size. > > I nicked John LaBlanca's exampleDecoratorPanelCSS and images from > > here: > > >http://groups.google.com/group/Google-Web-Toolkit-Contributors/browse... > > > Does this work for you? > > > regards > > gregor > > > CODE: > > > public class SandBox implements EntryPoint { > > > private VerticalPanel form = new VerticalPanel(); > > private HTML topContent = new HTML("This is the content for the > > topContent decorated widget"); > > private HTML bottomContent = new HTML("This is the content for the > > bottomContent decorated widget"); > > private SimplePanel topPanel = new SimplePanel(); > > privateDecoratorPaneltopDec = newDecoratorPanel(); > > privateDecoratorPanelbottomDec = newDecoratorPanel(); > > > public void onModuleLoad() { > > > // topContent part: SimplePanel +DecoratorPanel+ HTML > > content > > topContent.addStyleName("content"); > > topPanel.addStyleName("content"); > > topDec.add(topContent); > > topDec.setSize("100%","100%"); > > topPanel.add(topDec); > > > // bottomContent part:DecoratorPanel+ HTML content > > bottomContent.addStyleName("content"); > > bottomDec.add(bottomContent); > > bottomDec.setSize("100%","100%"); > > > // put them in a vertical Panel > > form.addStyleName("main-form"); > > form.setSize("100%","100%"); > > form.add(topPanel); > > form.add(bottomDec); > > > RootPanel.get().add(form); > > > } > > > CSS: > > > html, body { > > background-color: white; > > color: black; > > font-family: Arial, sans-serif; > > font-size: small; > > height: 100%; > > margin: 0px; > > padding: 0px; > > overflow: hidden; > > empty-cells: hide > > > } > > > h1 { > > margin: 0px; > > padding: 0px; > > > } > > > .content { > > background-color: lightblue; > > width: 100%; > > height: 100% > > > } > > > .main-form { > > background-color: red; > > > } > > > /** > > * Applied to the decorator panel. > > */ > > .gwt-DecoratorPanel.topCenter, > > .gwt-DecoratorPanel.bottomCenter { > > background: url(hborder.png) repeat-x;} > > > .gwt-DecoratorPanel.middleLeft, > > .gwt-DecoratorPanel.middleRight { > > background: url(vborder.png) repeat-y;} > > > .gwt-DecoratorPanel.topLeft, > > .gwt-DecoratorPanel.topRight, > > .gwt-DecoratorPanel.bottomLeft, > > .gwt-DecoratorPanel.bottomRight { > > width: 5px; > > height: 5px; > > zoom: 1;} > > > html>body .gwt-DecoratorPanel.topLeft { > > background: url(corner.png) no-repeat 0px 0px;} > > > html>body .gwt-DecoratorPanel.topRight { > > background: url(corner.png) no-repeat -5px 0px;} > > > html>body .gwt-DecoratorPanel.bottomLeft { > > background: url(corner.png) no-repeat 0px -5px;} > > > html>body .gwt-DecoratorPanel.bottomRight { > > background: url(corner.png) no-repeat -5px -5px;} > > > * html .gwt-DecoratorPanel.topLeftInner { > > width: 5px; > > height: 5px; > > overflow: hidden; > > filter: > > progid:DXImageTransform.Microsoft.AlphaImageLoader(src='corner.png',sizingMethod='crop');} > > > * html .gwt-DecoratorPanel.topRightInner { > > width: 10px; > > height: 5px; > > margin-left: -5px; > > overflow: hidden; > > filter: > > progid:DXImageTransform.Microsoft.AlphaImageLoader(src='corner.png',sizingMethod='crop');} > > > * html .gwt-DecoratorPanel.bottomLeftInner { > > width: 5px; > > height: 10px; > > margin-left: 0px; > > margin-top: -5px; > > overflow: hidden; > > filter: > > progid:DXImageTransform.Microsoft.AlphaImageLoader(src='corner.png',sizingMethod='crop');} > > > * html .gwt-DecoratorPanel.bottomRightInner { > > width: 10px; > > height: 10px; > > margin-left: -5px; > > margin-top: -5px; > > overflow: hidden; > > filter: > > progid:DXImageTransform.Microsoft.AlphaImageLoader(src='corner.png',sizingMethod='crop'); > > > } > > > On Aug 17, 9:26 am, anjolight <[EMAIL PROTECTED]> wrote: > > > > Hi, > > > > I foundDecoratorPanelto be a very simple, pleasant widget. But I am > > > having a problem while trying to expand its width to 100%. Reading > > > other forum topics, I learned that I should not set the width of > > >DecoratorPanelitself.DecoratorPaneldisplays fine if I set the > > > content width in pixels as below. > > > > myWidget.setWidth("400px"); > > > myDecoratorPanel.setWidget(myWidget); // this is fine. > > > > But if I do myWidget.setWidth("100%") instead, myDecoratorPanel > > > doesn't expand it 100% of myDecoratorPanel's parent's width. > > > > Is there any way to achieve this? > > > Yoshi > > --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
