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)