I want to implement a horizontal navbar using a TabLayoutPanel
, using custom styling to fit my needs.
But I don't know how to override the default
styling. Here's the UiBinder
template:
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<ui:style>
.gwt-TabLayoutPanel .gwt-TabLayoutPanelHeader {
background-color: red;
padding: 0;
margin: 0;
}
</ui:style>
<g:TabLayoutPanel barHeight="3.75" barUnit="EM">
<g:tab>
<g:header>Latest</g:header>
<g:Label>Latest Activities</g:Label>
</g:tab>
<g:tab>
<g:header>Patients</g:header>
<g:Label>Patients</g:Label>
</g:tab>
</g:TabLayoutPanel>
</ui:UiBinder>
This doesn't work. But how can I reference the default styles?
attach a separate css i think - inline styles are for use with {style.xyz} in the same template. Actually there's a second solution. If you insist on having it in the ui.xml - use external scope: http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#External_and_legacy_scopes