Table header mis-aligned with table cells in TreeTable

Hi

I’m only just start learning Vaadin7 so not sure if this is a bug or something is missing in my code

I used dashboard demo to try out TreeTable in Vaadin7, basically replacing the entire enter(ViewChangeEvent event) method of TransactionsView.java with sample code of TreeTable found at http://demo.vaadin.com/book-examples-vaadin7/book#component.treetable.components. I’ve managed to get it working in dashboard demo but I noticed that the table header is not lining up with table cells as shown in the screenshot below

I did a bit of CSS debugging using chrome dev tools, it appears to me that the width of first table TD (the TD with literal "UI“) is always 20px short in width, in the above example the width is 402px (this value seems to be calculated dynamically, it changes when browser window is resized)

If I manaully add 20px to it, making it to 422px, everything lines up perfectly. No matter how I resize my browser (hence a new width value is calculated) this 20px gap always applies.

Am I missing anything here? my code is shown below (it’s literally just copy-and-paste from http://demo.vaadin.com/book-examples-vaadin7/book#component.treetable.components into TransactionsView.java)

public class TransactionsView extends VerticalLayout implements View {

    private static final long serialVersionUID = 1L;
    
    @Override
    public void enter(ViewChangeEvent event) {

        setSizeFull();
        
        final TreeTable ttable = new TreeTable("My TreeTable");
        ttable.addContainerProperty("Name", CheckBox.class, "");
        ttable.addContainerProperty("City", String.class, "");
        ttable.setWidth("100%");
                
        // Create the tree nodes
        ttable.addItem(new Object{new CheckBox("UI"), "Helsinki"}, 0);
        ttable.addItem(new Object{new CheckBox("Branch 1"), "Tampere"}, 1);
        ttable.addItem(new Object{new CheckBox("Branch 2"), "Turku"}, 2);
        ttable.addItem(new Object{new CheckBox("Leaf 1"), "Piikkiö"}, 3);
        ttable.addItem(new Object{new CheckBox("Leaf 2"), "Parainen"}, 4);
        ttable.addItem(new Object{new CheckBox("Leaf 3"), "Raisio"}, 5);
        ttable.addItem(new Object{new CheckBox("Leaf 4"), "Naantali"}, 6);
                
        // Set the hierarchy
        ttable.setParent(1, 0);
        ttable.setParent(2, 0);
        ttable.setParent(3, 1);
        ttable.setParent(4, 1);
        ttable.setParent(5, 2);
        ttable.setParent(6, 2);
                
        // Expand the tree
        ttable.setCollapsed(2, false);
        for (Object itemId: ttable.getItemIds())
            ttable.setCollapsed(itemId, false);
                
        ttable.setPageLength(ttable.size());
        addComponent(ttable);
        
    }
}

I have the same problem with Table object in Chrome. Moving the table right and back left causes proper adjustment of header and rest of table.

I just tested the tree table in the latest versions of Mozilla, Chrome and Safari as a stand-alone application (i.e. not in the Dashboard app) with the code that you provided Phil Xue (although I changed the add item parameters to Object). I couldn’t reproduce any alignment issues.

However, although I’m not familiar with the Dashboard app, if the theme modifies the padding of the table cells it could possibly mess up the JS calculations.

Hi Agata

Good to know I’m not the only one experiencing this irritating issue, when you said moving table right and back do you mean resizing your browser? (how do you move the table anyway?)

What version of Vaadin are you running? And which browser(s)?

Vaadin: 7.1.12
Browser: Chrome 34.0.1847.116 (on Ubuntu 13.10)

BTW, would you mind sharing your test app with me? Thanks

My table is wider than the browser window. When I scroll to the right end of table and then back to the beginning, table header fix to the rest of table.

Certainly,

package com.example.misctesting;

import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.CheckBox;
import com.vaadin.ui.TreeTable;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;


@SuppressWarnings("serial")
@Theme("misctesting")
public class MisctestingUI extends UI {

    @WebServlet(value = "/*", asyncSupported = true)
    @VaadinServletConfiguration(productionMode = false, ui = MisctestingUI.class)
    public static class Servlet extends VaadinServlet {
    }

    @Override
    protected void init(VaadinRequest request) {
        final VerticalLayout layout = new VerticalLayout();
        layout.setMargin(true);
        setContent(layout);

        final TreeTable ttable = new TreeTable("My TreeTable");
        ttable.addContainerProperty("Name", CheckBox.class, "");
        ttable.addContainerProperty("City", String.class, "");
        ttable.setWidth("100%");

        ttable.addItem(new Object{new CheckBox("UI"), "Helsinki"}, 0);
        ttable.addItem(new Object{new CheckBox("Branch 1"), "Tampere"}, 1);
        ttable.addItem(new Object{new CheckBox("Branch 2"), "Turku"}, 2);
        ttable.addItem(new Object{new CheckBox("Leaf 1"), "Piikkio"}, 3);
        ttable.addItem(new Object{new CheckBox("Leaf 2"), "Parainen"}, 4);
        ttable.addItem(new Object{new CheckBox("Leaf 3"), "Raisio"}, 5);
        ttable.addItem(new Object{new CheckBox("Leaf 4"), "Naantali"}, 6);

        ttable.setParent(1, 0);
        ttable.setParent(2, 0);
        ttable.setParent(3, 1);
        ttable.setParent(4, 1);
        ttable.setParent(5, 2);
        ttable.setParent(6, 2);

        ttable.setCollapsed(2, false);
        for (Object itemId: ttable.getItemIds())
            ttable.setCollapsed(itemId, false);

        ttable.setPageLength(ttable.size());
        layout.addComponent(ttable);
    }

}

Hi Joacim

Thanks for sharing your test case, like you mentioned TreeTable works properly on its own.

I found another thread which solved my problem
https://vaadin.com/old-forum/-/message_boards/view_message/3573394

Hope this can be helpful to others

Regards