l'espacement des composants GWT sur HorizontalPanel

Question

je le code suivant à la mise en page du menu pour ma page:

//Header Conainer Panel 
VerticalPanel headerWidget = new VerticalPanel(); 
headerWidget.setWidth("100%"); 


//Header Panel 
HorizontalPanel headerPanel = new HorizontalPanel(); 
headerPanel.setStyleName("header"); 
headerPanel.setWidth("100%"); 
Label title = new Label("Information System"); 
title.setStyleName("componentgap"); 
headerPanel.add(title); 
headerWidget.add(headerPanel); 

//Menu 1 Panel 
HorizontalPanel menu = new HorizontalPanel(); 
menu.setStyleName("menu1"); 
menu.setHorizontalAlignment(HorizontalPanel.ALIGN_LEFT); 

Label componentLabel = new Label("Component"); 
componentLabel.setStyleName("componentgap"); 
componentLabel.setWidth("50px"); 
menu.add(componentLabel); 

//Outbound Routing Menu Item 
final Label outRouteMenu = new Label("Routing"); 
outRouteMenu.setWidth("75px"); 
outRouteMenu.setStyleName("menu1button"); 

Je dois régler la headerPanel et headerWidget à 100% que je veux que les barres de page haut pour prendre la toute la largeur de l'écran. Cependant, lorsque j'ajoute des étiquettes au menu, elles sont espacées uniformément sur l'écran plutôt qu'à gauche l'une de l'autre comme je le souhaite. Comme vous pouvez le voir, j'ai essayé de définir explicitement la largeur des étiquettes pour les forcer à être plus petites et donc les unes à côté des autres dans la barre de menu.

Des idées comment je peux y parvenir? vous verrez que j'utilise des styles que j'inclus ci-dessous, mais je vais souligner qu'ils n'intègrent pas la largeur d'un composant.

Merci,

James

Actuellement, j'ai quelque chose comme ceci:

CSS:

.header { 
     background-color:  #669966; 
     border-bottom-color: #003300; 
     border-right-color: #003300; 
     border-top-color: #99CC99; 
     border-left-color: #99CC99; 
     color:     #FFFFFF; 
     padding:    0px; 
     border-style:   solid; 
     border-width:   1px; 
     margin:     0px; 
     font:     bold 165% "Trebuchet MS",sans-serif; 
     } 

.menu1 { 
     background-color:  #336633; 
     border-bottom-color: #003300; 
     border-right-color: #003300; 
     border-left-color:  #99CC99; 
     border-top-color:  #99CC99; 
     color:     #FFFFFF; 
     padding:    0px; 
     border-style:   solid; 
     border-width:   1px; 
     font:     85% "Trebuchet MS",sans-serif; 
     } 

.menu1button { 
      background-color:  #336633; 
      border-bottom-color: #003300; 
      border-right-color: #003300; 
      border-left-color:  #99CC99; 
      border-top-color:  #99CC99; 
      color:     #FFFFFF; 
      padding:    0px; 
      border-style:   solid; 
      border-width:   0px; 
      margin:    5px; 
      font:     85% "Trebuchet MS",sans-serif; 
      } 

.menu1selectedbutton { 
      background-color:  #669966; 
      border-bottom-color: #003300; 
      border-right-color: #003300; 
      border-left-color:  #99CC99; 
      border-top-color:  #99CC99; 
      color:     #336633; 
      padding:    0px; 
      border-style:   solid; 
      border-width:   0px; 
      margin:    5px; 
      font:     85% "Trebuchet MS",sans-serif; 
      } 



.menu2 { 
     color:#A6A6A6; 
     padding: 0px; 
     border-style:none; 
     margin:0px; 
     font: 85% "Trebuchet MS",sans-serif; 
     } 

.menu2button { 
      color:#336633; 
      padding: 0px; 
      border-style:none; 
      margin:5px; 
      font: 85% "Trebuchet MS",sans-serif; 
      } 

.menu2selectedbutton { 
         color:#336633; 
         background-color:  #669966; 
         padding: 0px; 
         border-style:none; 
         margin:5px; 
         font: 85% "Trebuchet MS",sans-serif; 
        } 

.componentgap{ 
       margin: 4px; 

} 

Answer 1

Vous devrez définir la largeur les cellules (<td>), pas la largeur de widgets dans les cellules. Donc, dans votre CSS, vous pouvez utiliser:

.header td { ... } 

Ou vous pouvez utiliser l'API:

horizontalPanel.setCellWidth(horizontalPanel.getWidget(0), "0%"); 

Une alternative serait d'utiliser <div> s au lieu d'une table.