Come aggiungere la barra di scorrimento al layout di Vaadin

Question

Ho trovato molte domande in cui le persone chiedono come nascondere le barre di scorrimento nei layout di Vaadin, ma il mio problema è che Vaadin non mi mostra alcuna barra di scorrimento. Per esempio posso avere questo codice:

HorizontalLayout layout = new HorizontalLayout(); 
layout.setSizeUndefined(); // I also tried setSizeFull() 
for(Integer i = 1; i <= 15; i++) { 
    layout.addComponent(new Button("Test button #" + i.toString()); 
} 

Ma quando si esegue questo codice, pulsanti della pagina sono semplicemente tagliato quando la finestra del browser è troppo piccola per mostrare loro tutto. Nessuna barra di scorrimento apparirà mai.

Ho anche provato a creare Pannello e quindi aggiungere il mio layout a questo pannello. Ho provato entrambi - e anche panel.setContent(foo), e ho provato anche a impostare panel.setScrollable(true). Senza alcun successo

C'è un modo per aggiungere la barra di scorrimento a qualche tipo di layout Vaadin? Io uso Vaadin 6.8.7. Grazie in anticipo!

---

C'è il mio codice completo:

private ComponentContainer openZoomifyLayout() { 
    Panel panel = new Panel(); 
    Panel panel2 = new Panel(); 

    middlePanel = new MiddlePanel(); 

    VerticalLayout mw = new VerticalLayout(); 
    mw.setSizeFull(); 

    HorizontalLayout sp = new HorizontalLayout(); 
    Panel photos = new Panel(); 
    photos.setSizeUndefined(); 

    mw.addComponent(panel); 
    mw.addComponent(panel2); 
    mw.addComponent(sp); 

    mw.setExpandRatio(sp, 99); 
    mw.setExpandRatio(panel, 0); 
    mw.setExpandRatio(panel2, 0); 

    panel2.addComponent(middlePanel); 

    mw.setComponentAlignment(panel, Alignment.TOP_CENTER); 
    mw.setComponentAlignment(panel2, Alignment.TOP_CENTER); 

    photos.setContent(table); 
    photos.setScrollable(true); 
    sp.addComponent(photos); 
    sp.addComponent(createMainDetail()); 

    return mw; 
} 

Questo metodo viene utilizzato in classe che si estende dalla finestra, e così in tempo di inizializzazione è lì: setContent(openZoomifyLayout());

Answer 1

Il tuo spHorizontalLayout e il tuo photosPanel devono essere di dimensioni complete.

Come si può leggere nel capitolo Vaadin Libro 6.6.1

Normalmente, se un pannello è undefined dimensione in una direzione, in quanto ha da impostazione predefinita in verticale, si adatterà la dimensione del contenuto e crescere come il contenuto cresce. Tuttavia, se ha una dimensione fissa o percentuale e il suo contenuto diventa troppo grande per adattarsi all'area del contenuto, una barra di scorrimento apparirà per la particolare direzione. Le barre di scorrimento di un pannello sono gestite in modo nativo dal browser con l'overflow: proprietà auto in CSS.

Answer 2

Avrete bisogno di un pannello. È inoltre necessario assicurarsi che le dimensioni del pannello siano fisse e non "naturali". Se la sua dimensione è "naturale", il pannello verrà ingrandito fino a quando il suo contenuto non potrà essere visualizzato completamente. La dimensione predefinita per i pannelli è naturale, e questo è il motivo per cui non vedi barre di scorrimento.

Answer 3

procedere come segue:

• le esigenze di layout esterno fisso o dimensione percentuale nella direzione corrispondente (es VerticalLayout deve altezza fissa o percentuale)
• la disposizione interna deve dimensione indefinito in quella direzione
• le esigenze di layout esterne stylename v-scrollable

es

public class SomeView extends CustomComponent implements View 
{ 
     this.addStyleName("v-scrollable"); 
     this.setHeight("100%"); 
     VerticalLayout content = new VerticalLayout(); 
     // content has undefined height by default - just don't set one 
     setCompositionRoot(content); 
... 
} 

Questo renderà il CustomComponent mostrano una barra di scorrimento, mentre content cresce in base alle esigenze.