Trying to get UIBinder to give me a span not a div

Question

Hello there,

I am building a widget with UiBinder and I need to have it enclosed in a span but UiBinder only gives me divs. E.g. HTMLPanel => div, HorizonPanel, FlowPanel, VerticalPanel all divs...

Does any one know a solution?

Thanks!

Daniel

Answer 1

Just wrap your content in a plain span;

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'>
  <span>
    <!-- Your content here -->
  </span>
</ui:UiBinder>

The UiBinder guide contains more information on this topic.

Answer 2

With regards to the answer above by Robert (sorry I can't figure out how to comment that directly)

This won't work out of the box, as widgets can't be placed inside plain HTML (the compiler will give you "error: found widget in html context"). But there's a simple workaround:

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
             xmlns:g='urn:import:com.google.gwt.user.client.ui'>
  <g:HTMLPanel>
    <span>
      <!-- Your content with widgets goes here -->
    </span>
  </g:HTMLPanel>
</ui:UiBinder>

One other useful thing to mention is InlineHTML and InlineLabel widgets capable of holding arbitary html or plain text respectively in a <span>

Answer 3

You can keep using a <div> but just add display: inline to its CSS, which will make it display as though it were a <span>.

Edit: fixed place at the end where I said 'div' but meant 'span'.

Answer 4

Try this:

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
         xmlns:g='urn:import:com.google.gwt.user.client.ui'>
    <g:HTMLPanel tag="span">
        <!-- your stuff -->
    </g:HTMLPanel>
</ui:UiBinder>