Question

我有一个使用ICEfaces 1.8的JSF 1.2 dataTable。在一列中，我想显示来自辅助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>元素，如果是第二种方法（将文本放在同一表单中），那将是{ {1}}元素。 E.g。

<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>属性是示例性的，实际上您应该使用CSS文件而不是样式类）

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

1 个答案: