web-dev-qa-db-fra.com

Comment puis-je changer la largeur des colonnes de la grille du panneau dans PrimeFaces

Je travaille avec Java EE et PrimeFaces. Comment puis-je changer la largeur de colonne d'une grille de panneau dans PrimeFaces? Y a-t-il un exemple?

jsfprimefaces
15
Andromida

Vous pouvez qualifier vos colonnes à l'intérieur du panelGrid à l'aide de columnClasses. Le code suivant définit une largeur différente et colle le contenu des cellules aligné sur le côté supérieur.

<h:panelGrid columns="2" style="width: 100%" columnClasses="forty-percent top-alignment, sixty-percent top-alignment">

.forty-percent {
     width: 40%;
}

.sixty-percent {
     width: 60%;
}

.top-alignment {
     vertical-align: top;
}
28
Iván

J'ai eu un problème similaire et voici ma solution:

<p:panelGrid style="width:100%"> # notice that I do not define columns attribute in p:panelGrid!!
    <f:facet name="header"> # header
        <p:row> # p:row and p:column are obligatory to use since we do not define columns attribute!
            <p:column colspan="2"> # here I use colspan=2, coz I have 2 columns in the body
                Title
            </p:column>
        </p:row>
    </f:facet>

    <p:row>
        <p:column style="width:150px"> # define width of a column
            Column 1 content
        </p:column>
        <p:column> # column 2 will fill the rest of the space
            Column 2 content
        </p:column>
    </p:row>

    <f:facet name="footer"> # similar as header
        <p:row>
            <p:column colspan="2">
                Footer content
            </p:column>
        </p:row>
    </f:facet>
</p:panelGrid>

Donc, comme vous pouvez le voir, la principale différence est que vous faites pas définir colonnes attribut dans p: panelGrid . Dans l'en-tête et le pied de page, vous devez utiliser p: ligne et p: colonne , et dans mon cas, je dois également utiliser colspan = 2 car dans le corps, nous avons 2 colonnes.

J'espère que cela t'aides ;)

10
Marko Jankovic

Avez-vous considéré l'attribut style? Exemple :

<p:panelGrid columns="2" style="width: 50px">

Sinon, pour les colonnes:

<p:column style="width:50px">

Reportez-vous à ce fil: comment puis-je ajuster la largeur de <p: ​​colonne> dans <p: panelGrid>?

7
Akheloes