Joel, Is there something "special" that I need to do in my ui.xml in order to get these CSS rules applied to my TabLayoutPanel?
<!DOCTYPE ui:UiBinder SYSTEM " http://google-web-toolkit.googlecode.com/files/xhtml.ent";> <ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder' xmlns:g='urn:import:com.google.gwt.user.client.ui'> ... ui style ... src? type? empty? do I add {style.*} styles to the XML below? <g:TabLayoutPanel ui:field="tabLayoutPanel" barHeight="20"> <g:tab><g:header>First Tab</g:header><g:HTML>first tab content</g:HTML></g:tab> <g:tab><g:header>Second Tab</g:header><g:HTML>second tab content</g:HTML></g:tab> </g:TabLayoutPanel> </ui:UiBinder> You'll notice my sample app which has no default CSS rules applied: http://tablayoutpanel.latest.emcode-dev.appspot.com/ Stuart On Wed, Dec 2, 2009 at 12:49 AM, Joel Webber <[email protected]> wrote: > The following CSS rules should work fine with the TabLayoutPanel as checked > in: > > .gwt-TabLayoutPanel { } > .gwt-TabLayoutPanelTabs { } > .gwt-TabLayoutPanelTab { } > .gwt-TabLayoutPanelTab .gwt-TabLayoutPanelTabInner { } > .gwt-TabLayoutPanelTab-selected { } > .gwt-TabLayoutPanelTab-selected .gwt-TabLayoutPanelTabInner { } > > While we haven't added rules to default.css, et al, these rules should be > sufficient for most standard CSS tricks. There is indeed an issue that's > causing the tabs to stack up on Firefox, for which I will be committing a > patch momentarily (TabLayoutPanel.java:111 should be setting "cssFloat" > rather than just "float"). > > If you run into other problems with the structures that are there, please > let me know. > > Thanks, > joel. > > On Tue, Dec 1, 2009 at 11:12 PM, Stuart Moffatt > <[email protected]>wrote: > >> All, >> >> I found myself needing band-aids (read: bleeding edge) while trying >> out TabLayoutPanel. >> >> 1) The javadocs and code for TabLayoutPanel suggest that the gwt- >> TabLayoutPanel(*) css selectors exist: >> >> >> http://code.google.com/p/google-web-toolkit/source/browse/releases/2.0/user/src/com/google/gwt/user/client/ui/TabLayoutPanel.java >> >> 2) And, poking around the trunk shows this tidy example: >> >> >> http://code.google.com/p/google-web-toolkit/source/browse/releases/2.0/user/javadoc/com/google/gwt/examples/TabLayoutPanelExample.java >> >> 3) When that example is implemented, there is no CSS on the >> TabLayoutPanel: >> >> http://tablayoutpanel.latest.emcode-dev.appspot.com/ >> >> While there is no CSS to dress it up, the layout and events are mostly >> correct on Safari 4.0.3 (Mac). But on FF 3.5.5 (Mac) only one tab >> shows (the third) sitting above the contents of the first tab. Yikes, >> not really cross-browser. >> >> 4) Of course, it seems that the main problem is that the new gwt- >> TabLayoutPanel(*) selectors don't yet exist, in here: >> >> >> http://code.google.com/p/google-web-toolkit/source/browse/trunk/user/src/com/google/gwt/user/theme/standard/public/gwt/standard/standard.css >> >> or any other of the themes/css files. >> >> Is there someone sitting on a patch for gwt-TabLayoutPanel(*) >> selectors, or is the problem deeper? I came across a couple of TODOs >> and hints about css floats maybe not doing the trick under the >> TabLayoutPanel implementation. Any help on this? >> >> In the meantime, is there sample UIBinder xml to use the old TabPanel >> instead? >> >> -- >> http://groups.google.com/group/Google-Web-Toolkit-Contributors >> > > -- > http://groups.google.com/group/Google-Web-Toolkit-Contributors -- http://groups.google.com/group/Google-Web-Toolkit-Contributors
