Paramétrer la hauteur d'un TabPanel

**groskanel** · 10/12/2012, 11h35

Bonjour,

J'essaie de modifier le style CSS des TabPanel.

J'y arrive à peu près, sauf au niveau de la hauteur de ces derniers.

Je me suis aperçu que GWT devait me générer un div à la volée avec une hauteur fixe, seulement impossible de le modifier dans le CSS, vu que ce div n'a pas d'id, ni de classe...

Quelqu'un saurait-il m'expliquer comment faire pour contourner le problème ?

Merci d'avance pour votre aide.

**sub_zero** · 10/12/2012, 13h38

T'as essayé ça :

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
18
19
20
21
22
23
 
.gwt-TabPanel {
}
 
.gwt-TabBar {
/*tes propriétés CSS*/
}
 
.gwt-TabBar .gwt-TabBarItem {
/*tes propriétés CSS*/
}
 
.gwt-TabBar .gwt-TabBarItem-selected {
/*tes propriétés CSS*/
}
 
.gwt-TabBar .gwt-TabBarItem:hover {
  /*tes propriétés CSS*/
} 
 
.gwt-TabBar .gwt-TabBarItem-selected:hover { 
  /*tes propriétés CSS*/
}

**groskanel** · 10/12/2012, 13h49

En fait, je ne dois pas ajouter de nouvelles classes, juste me débrouiller avec ce qui est fourni a la base.

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.gwt-TabLayoutPanel {
 
}
.gwt-TabLayoutPanel .gwt-TabLayoutPanelTabs {
 height:4em; 
}
.gwt-TabLayoutPanel .gwt-TabLayoutPanelContentContainer {
  border-color: #ccc;
  border-style: solid;
  border-width: 0px 1px 1px;
}
 
.gwt-TabLayoutPanel .gwt-TabLayoutPanelContent {
  overflow: hidden;
 
}
.gwt-TabLayoutPanel .gwt-TabLayoutPanelTab {
  width:250px;
  cursor: pointer;
  cursor: hand;
  color: white;
  font-weight: bold;
  text-align: center;
  color:#fff;
  font-weight:bold;
  height:auto;
  padding-top:20px;
  padding-bottom:20px;
  background-color:grey;
}
 
.gwt-TabLayoutPanel .gwt-TabLayoutPanelTab-selected {
  cursor: default;
  background: url(../images/fond_panel.jpg);
  color: #fff;
  font-weight: bold;
}

Ce qui donne cela comme code, sauf que le div .gxt-TabLaoutPanelTabs est pris dans un autre div, qui n'a ni id ni classe mais GWT génère le div comme ceci :

Code :

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

<div style='position:absolute; overflow:hidden; left:0px;right:0px; height:2.5em'>

Si j'examine le code avec FireFox et que je change à la volée le height par height:4em, ça fonctionne... seulement, je ne vois pas comment obliger ce div à avoir cette taille par défaut.

**sub_zero** · 10/12/2012, 17h28

J'ai bien compris, tu veux fixer la hauteur des onglets ?

T'as essayé comme ça, parce que chez moi ça fonctionne :

.gwt-TabBar .gwt-TabBarItem {
Height: 4em;
}