Like inline-block, there's also inline-table. I'm not sure how good browser support is for these (I'm looking at you, IE6). If inline-table works, you don't need the wrapper SimplePanel. If inline-table doesn't work but inline-block does, then use the wrapper SimplePanel.
The other option is to float: left all of the DecoratorPanels. Naturally, floats have their own browser issues depending on the context. -Brian On Fri, Mar 11, 2011 at 9:48 AM, John LaBanca <[email protected]> wrote: > DecoratorPanel uses a <table> element to wrap the widget in a 9-box, and > table elements are not naturally inlined. You have two options: > Option 1: Apply the inline-block style to the DecoratorPanel to make it > display inline. > decoratorPanel.addStyleName(CommonResources.getInlineBlockStyle()); // > Handles cross browser issues. > Note that I'm not 100% sure this works on table elements. If it doesn't > work, try wrapping the table element in a SimplePanel. > SimplePanel divWrapper = new SimplePanel(); > divWrapper.setWidget(decoratorPanel); > divWrapper.addStyleName(CommonResources.getInlineBlockStyle()); // Handles > cross browser issues. > > Option 2: Use the border-radius CSS3 style attribute instead of a > DecoratorPanel. This is lighter weight than a DecoratorPanel, but it isn't > supported in IE8 or earlier (IE9 should have support). So, you'll have > square corners in some IE. > .myWidget { > border-radius: 4px; // Rounded corners for chrome/safari. > --moz-border-radius: 4px; // Used by firefox. > } > Thanks, > John LaBanca > [email protected] > > > On Thu, Mar 10, 2011 at 7:00 PM, Luigi Iannone <[email protected]> > wrote: >> >> Hi, >> >> I have a FlowPanel to which I add a bunch of widgets >> If I fill it with several buttons and a textbox and I resize it, in >> particular, when I change its width in the browser, it behaves as I expect, >> i.e: it tries to fit as many as possible into one line >> then it continues on the one below. >> If, instead, I fill it with instances of DecoratorPanel it will place each >> of them on a new line, and no matter how much wider I make it, they will >> stay each on its original line. >> The CSS for my Flow layout is >> >> .tokenFieldList { >> border: 1pt solid black; >> margin: 3pt; >> width: 100%; >> } >> >> Can somebody explain to me why the behaviours are different and what can I >> do in order to have the one I have with buttons when, instead I use >> DecoratorPanel instances? >> >> Many Thanks, >> >> Luigi >> >> -- >> 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. >> > > -- > 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. > -- 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.
