TabLayoutPanel avec scroll

Question

J'utilise un TabLayoutPanel dans une application GWT, attachée au RootLayoutPanel de la page.

À l'intérieur de chaque onglet, j'ai un ScrollPanel, qui est utilisé pour afficher un FlexTable.

Est-il possible de faire grandir le TabLayoutPanel verticalement, de sorte que l'utilisateur peut faire défiler la page entière en utilisant la barre de défilement du navigateur, au lieu d'utiliser le ScrollPanel interne?

Answer 1

Il suffit d'ajouter un nouveau style à la TabLayoutPanel:

this.addStyleName("tab-style-content"); 

Et définir dans votre CSS comme:

.tab-style-content .gwt-TabLayoutPanelContent 
{ 
overflow: auto;  
} 

Ainsi, la propriété overflow sera écrasé dans le GWT-TabLayoutPanelContent et la barre de défilement sera affiché automatiquement.

Answer 2

Si vous agrandissez TabLayoutPanel par rapport au panneau racine, vous obtenez une barre de défilement du navigateur.

Answer 3

Si je veux réaliser quelque chose comme ceci, je place toujours le TabLayoutPanel dans un SimplePanel et ajoute le SimplePanel au RootPanel. Je suppose que ce n'est pas la meilleure façon, mais ça fonctionne.

public void onModuleLoad() { 
    //Create TabPanel 
    TabPanel tp = new TabPanel(); 
    tp.add(new HTML("Foo"), "foo"); 
    tp.add(new HTML("Bar"), "bar"); 
    tp.add(new HTML("Baz"), "baz"); 
    tp.selectTab(1); 
    // Create SimplePanel and add TabPanel 
    SimplePanel sp =new SimplePanel(); 
    sp.add(tp); 
    // Add SimplePanel to the root panel. 
    RootPanel.get().add(sp); 
} 

Answer 4

La réponse courte est: Ce n'est pas possible avec LayoutPanel. La raison: LayoutPanel sont spécifiques aux applications qui doivent remplir la zone client du navigateur, ou en d'autres termes la partie visible par l'utilisateur. L'un des problèmes avec les navigateurs est d'avoir un widget qui a exactement la hauteur de la zone visible et qui se redimensionne automatiquement lorsque la fenêtre du navigateur est redimensionnée. C'est l'un des problèmes résolus par LayoutPanels.

Si vous souhaitez utiliser la barre de défilement du navigateur et pouvoir créer des pages plus longues que la zone visible, utilisez les panneaux «normaux».

BTW juste pour info vous êtes conscient que le FlexTable est lent dans le rendu et si possible mieux utiliser Grid.