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).