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;
}

**groskanel** · 10/12/2012, 17h32

oui j'ai essayé de coller la hauteur dans le tab, mais encore une fois ca ne passe pas, le div générer au dessus bloque la taille.

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

tu peux poster la partie du code (java) concernée ?

**groskanel** · 11/12/2012, 07h25

voila le code que cela génère :

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
<HTML>
  <head>
 
    <META http-equiv="Cache-Control" content="no-cache">
    <META http-equiv="Pragma" content="no-cache">
    <META http-equiv="Expires" content="0"> 
 
    <style>
      @import url(style/cacf/cacf.css);
    </style>
 
    <meta name="fragment" content="!">
    <script language='javascript'>
      // Used in the Dictionary Example
      var userInfo = {
        name: "Amelie Crutcher",
        timeZone: "EST",
        userID: "123",
        lastLogOn: "2/2/2006"
      };
    </script>
    <script language='javascript' src='showcase/showcase.nocache.js'></script>
  </head>
  <body>
    <iframe src="javascript:''" id="__gwt_historyFrame" style="position:absolute;width:0;height:0;border:0"></iframe>
    <noscript>
      <div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color:white; border: 1px solid red; padding: 4px; font-family: sans-serif">
        Your web browser must have JavaScript enabled
        in order for this application to display correctly.
      </div>
    </noscript>
  </body>
</html>

**sub_zero** · 11/12/2012, 09h46

C'est pas la page html qui permet de comprendre.

Je parlais de ton code Java (avant la compilation)

Paramétrer la hauteur d'un TabPanel

GWT et Vaadin Java

Discussions similaires

Partager

Partager