对齐 h:panelGrid 内没有 CSS 的元素

Question

我有一个 rich:dataTable，里面有 h:panelGrid。在面板网格内，我有 2 个元素：文本和复选框。我需要的是将文本对齐到左侧，将复选框对齐到右侧。

这是我的代码：

<rich:dataTable styleClass="richTableStyle" var="gi" 
        value="#{processNotifySelector.getAllApplicants()}" width="100%" id="SMSTable">

        <rich:column style="text-align:center">

            <f:facet name="header">
                <h:panelGrid columns="3">
                    <h:outputText value="Уведомлять заявителя по SMS" />
                    <a4j:commandButton value="Выбрать все"
                        disabled = "#{processNotifySelector.multipleApplicants}"
                        action="#{processNotifySelector.setBatchEnabled(true)}"
                        render="SMSTable" />
                    <a4j:commandButton value="Ab все"
                        disabled = "#{processNotifySelector.multipleApplicants}"
                        action="#{processNotifySelector.setBatchEnabled(false)}"
                        render="SMSTable" />
                </h:panelGrid>
            </f:facet>


            <h:panelGrid columns="2">
                <s:div>

                    <h:panelGrid columns="1" style="text-align:left">
                        <s:div>
                            <h:outputText value="#{gi.getObject().toString(activeWorkItemController.activityCreateDate)}" />
                        </s:div>

                        <s:div>
                            <h:outputText value="&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;(Не указан номер мобильного телефона)" rendered = "#{empty gi.person.cellPhone and empty gi.agent.phone}" style ="font-size: 10px"/>
                        </s:div>
                    </h:panelGrid>

                </s:div>

                <s:div>
                    <h:panelGrid columns = "1" style="text-align:right">
                    <h:selectBooleanCheckbox  value="#{gi.shouldNotified}" rendered = "#{not empty gi.person.cellPhone or not empty gi.agent.phone}">
                        <a4j:ajax event="change"></a4j:ajax>
                    </h:selectBooleanCheckbox>      
                    </h:panelGrid>              
                </s:div>
            </h:panelGrid>  
        </rich:column>  
</rich:dataTable>

我尝试为 panelGrid 中的面板组添加样式 = "text-align:right/left"，与 div 的样式相同 - 无效。我该如何解决我的问题？谢谢。

Answer 1

解决方法很简单。我添加到 panelGrid 属性 style="width:100%; text-align: right"。并在 panelGroups 上左文本对齐：left/right。

对齐 h:panelGrid 内没有 CSS 的元素

Align elements inside h:panelGrid without CSS

jsf

alignment

panelgrid