如何在表格单元格中显示与文本内联的图像按钮？

Question

我有一个使用 ICEfaces 1.8 的 JSF 1.2 数据表。在一个列中，我想显示来自支持 bean 的文本，然后在它的右侧，在同一行上显示一个小图像，而不会换行。

图像实际上是一个ice:commandButton 组件，设置了图像属性。点击图片的动作是显示ice:panelPopup面板。

下面是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>

我尝试了各种添加CSS样式信息到各种标签，包括white-space:nowrap和float，但都无法得到想要的效果。

Answer 1

<ice:form> 生成 HTML <form>，默认情况下是 block level element，因此它总是从新行开始。您需要将<form>的样式设置为display: inline。

<ice:form style="display: inline;">

或者，您也可以只将该文本移动到表单中。

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

无论哪种方式，您仍然只需要在单元格的宽度没有剩余空间时防止单元格的内容被空格包裹。您可以通过在两个元素的公共父元素上设置white-space: nowrap 来实现这一点。如果是第一种方法（将表单设置为display: inline），那将是<td> 元素，如果是第二种方法（将文本放在同一个表单中），那将是<form> 元素。例如

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

（注意，style 属性在上述示例中是示例性的，实际上您应该使用 CSS 文件而不是样式类）