Paramétrer la hauteur d'un TabPanel

Version imprimable

10/12/2012, 11h35
groskanel

Paramétrer la hauteur d'un TabPanel

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.

T'as essayé ça :

Code:

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*/
}

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

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:

<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.

10/12/2012, 17h28
sub_zero

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;
}
10/12/2012, 17h32
groskanel

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.
10/12/2012, 17h56
sub_zero

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

voila le code que cela génère :

Code:

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>

11/12/2012, 09h46
sub_zero

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

Je parlais de ton code Java (avant la compilation)