How to display image button inline with text in a table cell? - css

Question

I have a JSF 1.2 dataTable using ICEfaces 1.8. In one column, I would like to display the text from a backing bean, and then to the right of it, display a small image on the same line without it wrapping to a new line.
The image is actually a ice:commandButton component with the image attribute set. The action of clicking on the image is to display a ice:panelPopup panel.
Here is the relevant code of the column within the dataTable:
<ice:column id="col1">
<ice:outputText escape="false" value="#{document.column1Value}" />
<ice:form>
<ice:commandButton actionListener="#{bean1.open}" image="images/popup.gif">
<f:attribute name="docParam" value="#{document.parameter}" />
</ice:commandButton>
...
</ice:form>
</ice:column>
I have tried all sorts of adding CSS style information to various tags, including white-space:nowrap and float but have been unable to get the desired effect.

Answer 1

The <ice:form> generates a HTML <form>, which is by default a block level element, so it always starts at a new line. You need to set the style of the <form> to display: inline.
<ice:form style="display: inline;">
Alternatively, you can also just move that text into the form.
<ice:form>
<ice:outputText escape="false" value="#{document.column1Value}"/>
<ice:commandButton actionListener="#{bean1.open}" image="images/popup.gif">
<f:attribute name="docParam" value="#{document.parameter}" />
</ice:commandButton>
...
</ice:form>
Either way, you only still need to prevent the cell's content from being whitespace-wrapped when there's little room left in the cell's width. You could achieve that by setting white-space: nowrap on the common parent element of the both elements. In case of the first approach (setting the form to display: inline), that would be the <td> element and in case of the second approach (putting the text inside the same form), that would be the <form> element. E.g.
<ice:form style="white-space: nowrap;">
<ice:outputText escape="false" value="#{document.column1Value}"/>
<ice:commandButton actionListener="#{bean1.open}" image="images/popup.gif">
<f:attribute name="docParam" value="#{document.parameter}" />
</ice:commandButton>
...
</ice:form>
(note, the style attribute is in the above examples exemplary, in real you should be using CSS files instead with style classes)