Discussion :

[Alkhan]

bonjour,

J'ai un problème pour appliquer un style sur des composants PrimeFaces.

Ma page :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<h:body>
  <div id="outerWrapper">
    <p:layout fullPage="true" id="allLayout">
      <p:layoutUnit id="top" position="north" size="40">
        <h2>My title</h2>
      </p:layoutUnit>
      <p:layoutUnit id="AppView" position="center">
        <p:tabView id="tabView" value="#{tviewT.tabs}" var="tab" ...>
          <p:tab title="#{tab.title}" closable="true">
            <ui:include src="/test/center1.xhtml"></ui:include>
          </p:tab>
        </p:tabView>
      </p:layoutUnit>
    </p:layout>
  </div>
</h:body>

mon CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
.ui-tabs {
    border : solid 1px orange;
    min-height: 100%;
}
 
.ui-tabs-panels {
    border : solid 1px red;
    min-height: 100%;
}

J'obtiens donc la page suivante :

On peux voir que le tabView (en orange) s'agrandit bien, mais l'onglet lui reste au minimum.
Si je passe min-height de l'onglet de 100% a 800px alors il s'agrandit, mais cela ne me conviens pas car la taille est fixe alors que je voudrais qu'il prenne 100% de l'espace disponible.

Quelqu'un aurait il l'explication et/ou un moyen de résoudre mon problème ?

merci d'avance