Как отобразить кнопку с изображением в тексте в ячейке таблицы? - PullRequest
Новая
       8

Как отобразить кнопку с изображением в тексте в ячейке таблицы?

1 голос
/ 13 февраля 2012

У меня есть таблица данных JSF 1.2 с использованием ICEfaces 1.8. В одном столбце я хотел бы отобразить текст из базового компонента, а затем справа от него отобразить небольшое изображение в той же строке без переноса на новую строку.

Изображение на самом деле является ice:commandButton компонентом с установленным атрибутом изображения. Действие по нажатию на изображение - отображение панели ice:panelPopup.

Вот соответствующий код столбца в таблице данных: 

<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, но не смог получить желаемый эффект.

1 Ответ

2 голосов
/ 13 февраля 2012

<ice:form> генерирует HTML <form>, который по умолчанию является элементом уровня блока , поэтому он всегда начинается с новой строки. Вам нужно установить стиль <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-файлы вместо классов стилей)

...