Nessuno scorrimento verticale nel browser

Question

Sto sviluppando un'applicazione Vaadin e sto avendo estrema difficoltà a ottenere alcuni aspetti del layout come voglio. Il problema principale in questo momento è che non riesco a ottenere una scroll verticale nel mio layout, non importa quanto grande sia la dimensione del contenuto o quanto piccola sia la finestra del browser.

Ho letto sull'argomento , So che hLayout e vLayout non supportano le barre di scorrimento ma il Pannello lo fa. Ho provato diverse combinazioni per farlo funzionare, ma sono riuscito solo a generare una barra di scorrimento orizzontale ma mai verticale.

Un altro problema è che sto creando l'applicazione all'interno di un "modello" esistente fornito dall'azienda. Questo modello contiene un piè di pagina che contiene alcune informazioni sul copyright. Questo piè di pagina non sembra occupare spazio nella finestra del browser per quanto riguarda il contenuto che sto aggiungendo, il che fa sì che quando si visualizza su schermi più piccoli la barra di scorrimento orizzontale appaia "sotto" il piè di pagina, non accessibile ... I ' Fornirò parte del codice di come appare ora.

public class InventorySimCardTable extends M2MViewBase { //M2MViewBase extends VerticalLayout 

    private final SPanel mainContent = Cf.panel(""); 
    private final SPanel tabPanel = Cf.panel(""); 
    private final SVerticalLayout tabcontent = Cf.vLayout(); 
    protected InventoryFilterPanel inventoryFilterPanel; 

    @Override 
    protected void initComponent() { 
     setSizeFull(); 
     tabPanel.setSizeFull(); 
     tabPanel.getContent().setSizeUndefined(); 

     Table simCardTable = new Table(); 
     simCardTable.setWidth("1898px"); 
     simCardTable.setPageLength(15); 

     tableContainer.setSizeUndefined(); 
     tableContainer.addComponent(simCardTable); 

     mainContent.setWidth("99%"); 
     mainContent.setHeight("100%"); 
     mainContent.setContent(tableContainer); 
     mainContent.setScrollable(true); 

     centeringlayout.setSizeFull(); 
     centeringlayout.addComponent(mainContent); 
     centeringlayout.setComponentAlignment(mainContent, Alignment.MIDDLE_CENTER); 

     tabPanel.addComponent(centeringlayout); 

     addComponent(tabPanel); 

    } 
} 

Mi piacerebbe sapere se qualcuno vede errori evidenti nel mio codice. E se qualcuno sa quale proprietà posso impostare sul piè di pagina CSS per farlo occupare spazio nella vista del contenuto in modo che lo scorrimento orizzontale non appaia al di sotto di esso. Grazie!

Answer 1

Quello che ho fatto per risolvere questo problema è stato quello di strutturare il codice come segue. Ciò creerà una barra di scorrimento verticale e orizzontale per il Pannello che contiene il mio componente di filtro e la tabella. Speriamo che questo possa aiutare qualcuno con un problema simile.

@Override 
    protected void initComponent() { 

     super.initComponent(); 

     if(!tableCreated) { 
      createSimCardsTable(); 
      tableCreated = true; 
     } 

     mainWindow = this.getWindow(); 
     Panel basePanel = new Panel(""); 

     basePanel.addComponent(inventoryFilterPanel); 
     AbstractComponent separatorLine = Cf.horizontalLine(); //Of no signficance 
     separatorLine.addStyleName("m2m-horizontal-line-list-separator"); 
     separatorLine.setWidth("99%"); 
     basePanel.addComponent(separatorLine); 
     basePanel.addComponent(simCardTable); 
     basePanel.setSizeFull(); 
     basePanel.getContent().setSizeUndefined(); // <-- This is the important part 

     addComponent(basePanel); 
     setExpandRatio(basePanel, 1); 

    } 

Answer 2

Prima di tutto cerca di rendere scorrevole il tuo pannello chiamando il metodo setScrollable (true), ma questo non funzionerà se imposti un layout personalizzato con setSizeFull() come questo nuovo layout del pannello.

Se sai esattamente che l'applicazione verrà aperta nel dispositivo con una risoluzione dello schermo ridotta, puoi semplicemente impostare il layout "principale"/"principale" di larghezza e altezza fisse, oppure aggiungere qualche stile CSS con parametri come min -width: {qualche valore} px, altezza minima: {qualche valore} px.

Answer 3

Sulla base di questo post, ho aggiunto vertical.setSizeUndefined(); e iniziato a vedere le barre di scorrimento verticali.

setMainWindow(new Window(title)); 

vertical.setSizeFull(); 
vertical.setHeight("100%"); 

toolbar = createToolbar(); 
vertical.addComponent(toolbar); 
vertical.setExpandRatio(toolbar, 0.03f); 

Component tree = buildTree(); 
vertical.addComponent(tree); 
vertical.setExpandRatio(tree, 0.97f); 
vertical.setSizeUndefined(); 
getMainWindow().setContent(vertical);> 

Answer 4

Aggiungere questo ai vostri styles.css

.v-verticallayout > div { 
    overflow-y: auto ! important; 
} 

Answer 5

componenti Tutti Vaadin avere dimensioni undefined per impostazione predefinita, quindi di solito non c'è bisogno di chiamare il metodo setSizeUndefined(). Inoltre non è necessario chiamare setScrollable(true), perché abilita solo la possibilità di scorrimento programmatico.

Quando stavo cercando di dare un senso all'aspetto di scorrimento ho scritto un semplice scheletro di layout. Prova come contenuto della finestra principale:

import com.vaadin.ui.HorizontalSplitPanel; 
import com.vaadin.ui.Label; 
import com.vaadin.ui.Panel; 
import com.vaadin.ui.VerticalLayout; 

public class Skeleton extends VerticalLayout { 

public Skeleton() { 
    setSizeFull(); 

    addComponent(new Label("Header component")); 

    HorizontalSplitPanel splitPanel = new HorizontalSplitPanel(); 
    Panel leftComponent = new Panel(); 
    Panel rightComponent = new Panel(); 
    splitPanel.setFirstComponent(leftComponent); 
    splitPanel.setSecondComponent(rightComponent); 
    for (int i = 0 ; i < 200 ; i ++) { 
     leftComponent.addComponent(new Label("left")); 
     rightComponent.addComponent(new Label("right")); 
    } 

    leftComponent.setSizeFull(); 
    rightComponent.setSizeFull(); 

    addComponent(splitPanel); 
    setExpandRatio(splitPanel, 1); 

    addComponent(new Label("Footer component")); 
} 
} 

Si dovrebbero vedere le barre di scorrimento all'interno dei pannelli nidificati. Ma se setSizeFull() viene rimosso dal layout Skeleton, non ha dimensioni limitate (per impostazione predefinita) e cresce verso il basso, quindi viene visualizzata solo la barra di scorrimento dell'intera finestra.

Answer 6

L'unico modo per risolvere questo problema ora (v6.8.14) è a specificare l'altezza nei valori px invece di%

Answer 7

Utilizzare CustomLayout, sempre. È più veloce, più efficiente e controllando facilmente html e css puoi ottenere un risultato graficamente consistente