Uniform height of components within a table cell composite

Vaadin 6 / 7 / 8 Framework UI
1

I’m new to Vaadin (and web app development in general) so please forgive me if I’m doing something stupid here. I am trying to place a composite within the cell of a table and am having trouble getting all of the components to be the same height. In the simple example below, I am putting both a TextField and a ComboBox within a table cell and the height and vertical alignment of the two are off. I tried explicitly setting the height of the TextField and ComboBox to “100%” but that resulted in the TextField being over twice as high as the ComboBox. What am I doing something wrong?

-Mardy

    static Window subwindow;
    
    public class Cell extends HorizontalLayout {
        public Cell(String name) {
            setWidth("100%");
            setHeight("100%");
            setMargin(false);
            setSpacing(false);
            
            TextField text = new TextField();
            text.setValue(name);
            addComponent(text);
            
            ComboBox comboBox = new ComboBox();
            comboBox.addItem("A");
            comboBox.addItem("B");
            comboBox.addItem("C");
            addComponent(comboBox);
        }
    }
    
    public void test() {
        subwindow = new Window("Test Window");
        subwindow.setModal(true);
        subwindow.setWidth("40%");

        VerticalLayout layout = (VerticalLayout) subwindow.getContent();
        layout.setMargin(true);
        layout.setSpacing(true);

        Table table = new Table();
        table.addStyleName("components-inside");
        
        table.addContainerProperty("Row", Label.class, null);
        table.addContainerProperty("Cell", Cell.class, null);
        
        table.setWidth("100%");
        table.setHeight("100%");
        table.setPageLength(10);

        table.setSelectable(true);
        table.setMultiSelect(false);
        table.setImmediate(true);
        
        table.setColumnWidth("Row", 30);
        table.setColumnWidth("Cell", -1);

        table.addItem(new Object[] { new Label("1"), new Cell("1") }, 1);
        table.addItem(new Object[] { new Label("2"), new Cell("2") }, 2);
        table.addItem(new Object[] { new Label("3"), new Cell("3") }, 3);
        
        subwindow.addComponent(table);
        
        getWindow().addWindow(subwindow);
    }
2

You need to change the height of the TextField in CSS, as is done in
this example
.

.v-table-cell-wrapper input.v-textfield {
    margin-bottom: 0px; /* Normally -2px in table */
    margin-top:    0px; /* Normally -2px in table */
    height: 19px;       /* Not auto */
}

DIfferent themes and components need different settings.

3

I understand now.

Thank you!

-Mardy