Inline CSS Not Working for added Widget

0
votes

I can't seem to figure out why my added Widgets will not display inline. I would like my Validation Widget to display inline after the label. But no matter what I do it wont. Why?

<ui:UiBinder
 xmlns:ui="urn:ui:com.google.gwt.uibinder"
  xmlns:validation='urn:import:com.versature.vsm.client.ui.validation'>

<ui:style>
.validationField {
    display:inline-block;
}
</ui:style>

<g:HTMLPanel ui:field="mainPanel">
     <div class="{style.validationField}">
         <g:Label text="ACCOUNT NUM:"/> 
         <validation:ValidationField ui:field="accountNumberValidation"/>
     </div>
</g:HTMLPanel>
2
cssgwt

2 Answers

1
votes

Replace <g:Label> with <g:InlineLabel>.

Label uses a <div>, which is by default displayed as a block, whereas InlineLabel uses a <span>.

0
votes

I would like my Validation Widget to display inline after the label. But no matter what I do it wont. Why?

You are currently making the container that holds them both inline. To make the individual elements inline, you could either (be sure to only apply one of the following solutions; applying both will not work):

(1) Set the children of your validationField CSS class to display inline, by changing your style to:

<ui:style>
.validationField * {
    display:inline-block;
}
</ui:style>

(2) Apply the validationField CSS class to your ValidationField GWT widget only, by changing your UiBinder XML to:

<g:HTMLPanel ui:field="mainPanel">
     <g:Label text="ACCOUNT NUM:"/> 
     <validation:ValidationField ui:field="accountNumberValidation" stylePrimaryName="{style.validationField}"/>
</g:HTMLPanel>