Get UiBinder widget to display inline instead of block

Question

I'm trying to get my UiBinder-defined widget to display inline, but I can't. My current code is:

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder' xmlns:g='urn:import:com.google.gwt.user.client.ui'>
  <ui:style>
    .section {
      border: 1px solid #000000;
      width: 330px;
      padding: 5px;
      display: run-in;
    }
  </ui:style>

  <g:HTMLPanel>
    <div class="{style.section}">
      <div ui:field="titleSpan" class="{style.title}" />
      <div class="{style.contents}">
        <g:VerticalPanel ui:field="messagesPanel" />
      </div>
    </div>
  </g:HTMLPanel>
</ui:UiBinder>

This works fine in terms of how the widget looks internally, but I want to throw a bunch of these widgets into a FlowPanel and have them flow when the window is resized. The HTMLPanel is a div, but I can't get the display attribute to assign. I can't force the style name, since the following throws an error:

<g:HTMLPanel styleNames="{style.section}">

And I can assign an additional style, but it doesn't apply the display setting.

<g:HTMLPanel addStyleNames="{style.section}">

This displays the border and sets the size, as expected, but it doesn't flow. Firebug shows the styles on the div are border, width, and padding, but no display.

Is there a way to make a widget in UiBinder so that it'll display inline instead of block? And if so, can I make it compatible with having a VerticalPanel inside (can I do it without making the entire widget pure HTML without any GWT widgets)?

PS: I saw question 2257924 but it hasn't had any answers lately, and he seems to be focused on getting a tag, not specifically getting inline layout. I don't care directly about , if I can just get the top-level tag for my widget to flow inline, I'm happy.

Answer 1

It seems your problem is caused by using display: run-in instead of the more "standard" display: inline. IE and Firefox don't support run-in and it seems that Firebug prunes the style upon adding.

Try changing the style to display: inline (or inline-block if you want some properties of a block, like width, but beware of the quirks of IE + inline-block).

Answer 2

It should be <g:HTMLPanel styleName="{style.section}">, not <g:HTMLPanel styleNames="{style.section}"> - styleNames is a typo (which appears in the UiBinder docs, so I'm sure that's where you got it from). styleName is the correct thing to use.

Also, Igor Klimer is correct that you should use display: inline or display: inline-block rather than display: run-in.

In general, you can tell the available attribute names by looking for setXXX methods on the UIObject class, and the attribute name is just the XXX. So, UIObject has a setStyleName method, which you access using the attribute called styleName.