编辑jsf组件primefaces的样式

Question

I have this page : 我有这个页面：

    <?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">

    <body>

        <ui:composition template="./template_admin.xhtml">

            <ui:define name="tohead">
            </ui:define>

            <ui:define name="content">


                <p:panel header="Edition d'une commande"  style="height: 490px;" id="panel"  >
                    <p:messages id="msgs"/>
                    <h:panelGrid columns="3" style="float:left;" columnClasses="column" cellpadding="5">

                        <h:outputLabel  for="idd" value="Id : " />   
                        <p:inputText  disabled="true" value="#{editCommandController.myCom.id}" id="idd" required="true" requiredMessage="veuillez saisir un nom" label="Nom"  />  
                        <p:message for="idd" display="icon"/>

                        <h:outputLabel for="dteenvoi" value="Date d'envoi : " />  
                        <p:inputText disabled="true" id="dteenvoi" value="#{editCommandController.myCom.dateEnvoi}" required="true" requiredMessage="veuillez saisir un prénom" label="Prénom" />  
                        <p:message for="dteenvoi" display="icon"/>

                        <h:outputLabel for="division" value="Date de livraison recommandée : " />  
                        <p:inputText disabled="true"  id="division" value="#{editCommandController.myCom.dateLivraisonRecommande}" />  
                        <p:message for="division" display="icon"/>

                        <h:outputLabel for="poste" value="Nombre de page : " />  
                        <p:inputText id="poste" disabled="true" value="#{editCommandController.myCom.nbrePage}" />  
                        <p:message for="poste" display="icon"/>


                        <h:outputLabel for="email" value="Nombre d'exemplaire : " />  
                        <p:inputText id="email" disabled="true" value="#{editCommandController.myCom.nbreExemplaire}" />
                        <p:message for="email" display="icon"/>

                        <h:outputLabel for="autres" value="Type d'impression : " />  
                        <p:inputText id="autres" disabled="true" value="#{editCommandController.myCom.typeImpression}"  />  
                        <p:message for="autres" display="icon"/>

                        <h:outputLabel for="identifiant" value="Observation : " />  
                        <p:inputTextarea id="identifiant" disabled="true" value="#{editCommandController.myCom.observation}" required="true" validator="#{addUserController.validateIdentifiant}" requiredMessage="veuillez saisir un identifiant" label="Identifiant" />  
                        <p:message for="identifiant" display="icon"/>

                        <h:outputLabel for="dec" value="Decision : " />  
                        <p:selectOneMenu  id="dec" value="#{editCommandController.myCom.decision}" >  
                            <f:selectItems value="#{editCommandController.decisions}" />  
                            <p:ajax update="etat gridContainer :myform:alors" event="change" />
                        </p:selectOneMenu>  
                        <p:message for="dec" display="icon"/>

                        <h:outputLabel for="etat" value="Etat : " />  
                        <p:selectOneMenu  id="etat" value="#{editCommandController.myCom.etat}" disabled="#{editCommandController.myCom.decision eq 'rejettée'}" >  
                            <f:selectItems value="#{editCommandController.etats}" />   
                        </p:selectOneMenu>  
                        <p:message for="etat" display="icon"/>

                        <h:outputLabel for="calen" value="Date de Livraison réelle: *" />
                        <p:calendar  label="Date de Livraison reelle" id="calen" showOn="button" effect="slide" value="#{editCommandController.myCom.dateLivraisonReelle}" pattern="MM/dd/yyyy HH:mm" >
                        </p:calendar>  
                        <p:message for="calen" id="msgSurname4" display="icon"/>


                    </h:panelGrid>  

                    <p:outputPanel id="gridContainer" layoyut="block" >
                        <h:panelGrid id="alors"   rendered="#{editCommandController.myCom.decision ne 'rejettée'}" >
                            <p:dataTable id="cars" style="width: 80px;" var="car" value="#{editCommandController.pdm}" paginator="true" rows="10"  
                                         selection="#{editCommandController.selectedPapier}" selectionMode="single" >  

                                <p:ajax event="rowSelect" listener="#{editCommandController.onRowSelect()}"   
                                        update=":myform:jesuis" />  

                                <f:facet name="header">  
                                    RadioButton Based Selection  
                                </f:facet>                    

                                <p:column headerText="libelle">  
                                    #{car.libelle}  
                                </p:column>  

                                <p:column headerText="format">  
                                    #{car.format}  
                                </p:column>  

                                <p:column headerText="stock" >  
                                    #{car.stock}  
                                </p:column>  

                            </p:dataTable>  


                            <h:outputText  id="jesuis" value=" c est la papier : #{editCommandController.selectedPapier.libelle}"  />


                            <h:panelGrid columns="2" cellpadding="5" style="margin-top: 22px;">  
                                <h:outputLabel value="Reliure :" for="city" />
                                <p:selectOneMenu id="city" value="#{addPapierController.choixReliure}">  
                                    <f:selectItem itemLabel="choisir reliure" itemValue="" />  
                                    <f:selectItems value="#{addPapierController.libelleReliures}" />  
                                    <p:ajax 
                                        listener="#{addPapierController.handleCityChange}" />  
                                </p:selectOneMenu>
                            </h:panelGrid>

                        </h:panelGrid>
                    </p:outputPanel>


                    <h:panelGrid columns="2" style="float:none;display: block;" >
                        <p:commandButton value="Editer" ajax="false" action="#{editCommandController.updateCommand()}" update="panel" ></p:commandButton>
                        <p:commandButton value="Annuler"  immediate="true" action="commandesUser" ajax="false" ></p:commandButton>

                    </h:panelGrid>
                </p:panel>  

            </ui:define>

        </ui:composition>

    </body>
</html>

I would like to divide the panel into three part : the fisrt in the left of the page the second in the right of the page and the third in the bottom of the page 我想将面板分为三部分：页面左侧的第一部分，页面右侧的第二部分和页面底部的第三部分

I managed to put the first and the second but the third part is just below the second part, I would like to put it only in the bottom 我设法将第一和第二部分放到第三部分，但是第三部分恰好在第二部分下面，我只想将其放在底部

Answer 1

Your first panel is floated left by float:left; 您的第一个面板由float:left;向左float:left; . 。 So anything which comes after it in the DOM will just end up on the right side of it as long as there's at least some vertical space for it. 因此，只要它至少有一些垂直空间，DOM中紧随其后的所有内容都将最终位于其右侧。 If you want the element to escape this float and thus end up in a new line, then you need to clear the float. 如果您希望元素转义此浮点数并因此以新行结尾，则需要clear浮点数。 This isn't to be done by float:none; 这不是通过float:none;来完成的float:none; as you attempted: 尝试时：

<h:panelGrid columns="2" style="float:none;display: block;" >

but instead by clear:left; 而是用clear:left; : ：

<h:panelGrid columns="2" style="clear:left;" >

Note that I removed display:block; 请注意，我删除了display:block; as the HTML <table> (as generated by <h:panelGrid> is already a block level element . 因为HTML <table> （由<h:panelGrid>生成）已经是块级元素。

Unrelated to the concrete problem, this has very little to do with JSF. 与具体问题无关，这与JSF无关。 It's merely a HTML code generator. 它只是一个HTML代码生成器。 In future CSS-related questions it'd be more helpful for CSS experts if you ignore the JSF part and concentrate on its generated HTML output only (which you can find by rightclick, View Source in the webbrowser) in the question. 在将来的与CSS相关的问题中，如果您忽略JSF部分，而只专注于问题中的JSF生成的HTML输出（可以通过在Web浏览器中的“右键单击， 查看源代码”找到），则对CSS专家会更有帮助。 Once you get the answer from the CSS experts, all you need to do is to trackback the responsible JSF component and change it accordingly so that you get the desired generated HTML output. 一旦从CSS专家那里得到答案，您要做的就是追溯负责的JSF组件并进行相应的更改，以便获得所需的生成的HTML输出。

编辑jsf组件primefaces的样式

问题描述

1 个解决方案

解决方案1
1 已采纳 2012-09-04 13:39:28

编辑jsf组件primefaces的样式

问题描述

1 个解决方案

解决方案1 1 已采纳 2012-09-04 13:39:28

解决方案1
1 已采纳 2012-09-04 13:39:28