Как выровнять элементы в <h: panelGrid> вправо

Как бы выровнять все в моем нижнем правом правее?

<div id="container">    
     <h:form id="authenticate">
        <h:panelGrid columns="5" cellpadding="6">
             <h:inputText id="email" value="" />
             <p:watermark for="email" value="Email"/>
             <h:inputSecret id="password" value="" />
             <p:watermark for="password" value="Password"/>
             <p:commandButton id="login" value="Login" align="right"/>
        </h:panelGrid>
     </h:form>
</div>

Ответы

Ответ 1

<h:panelGrid> отображает таблицу HTML. В основном вы хотите применить text-align: right; к каждому элементу <td>, который он отображает. В текущем коде проще всего применить следующее:

#authenticate table td {
    text-align: right;
}

Конечно, вы можете быть более конкретными, например. давая <h:panelGrid> свой собственный styleClass и определяя правило в CSS (которое будет применяться непосредственно к визуализированному элементу HTML <table>).

<h:panelGrid styleClass="className">

с

.className td {
    text-align: right;
}

Вы также можете дать каждому элементу <td> свой собственный класс атрибуту columnClasses, который принимает заархивированную строку имен классов CSS, которые должны применяться повторно к элементам <td>. Если вы хотите применить один и тот же класс к каждому элементу <td>, просто укажите его один раз:

<h:panelGrid columnClasses="className">

с

.className {
    text-align: right;
}

В качестве дополнительной подсказки: щелкните правой кнопкой мыши веб-страницу в веб-браузере и выберите "Просмотр источника", затем вы поймете, что именно JSF полностью генерирует.

Ответ 2

фактически в том же виде я использовал <p:panel> и получил хороший результат. выглядит следующим образом:

<p:panel  styleClass="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all">
    <p:commandButton value="Add New Tab"
            actionListener="#{xxx.createNewTab}" process="@this"
            update="tabView" style="float:right !important;margin:0px 0px 3px 0px;" />
            </p:panel>

Ответ 3

Немного поздно, но может помочь кому-то, так как это было то, что мне нужно...

Если выравнивание не ограничено этой конкретной таблицей, а форматом по умолчанию для всех ячеек таблицы, просто добавьте это в свой файл CSS:

td {
    text-align: right;
}

Затем все элементы <td>, включая те, которые сгенерированы JSF, будут отформатированы таким образом.