Problem with table header height

Hello,

I need to get two lines into column header of table. I tried adding
as LF/CR into columnheader string, and it did just what I wanted.

Problem is that table header row height calculation don’t notice this special columnheader, instead second row is partially hidden.

Question is, how can I set column header height so that all text is shown?

Below is test code snippet:

public class Application extends com.itmill.toolkit.Application {

	public void init() {
		try{
		    Window main = new Window("Table header Test");
	        setMainWindow(main);
	        main.setSizeFull();

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

	        baseLayout.addComponent(initTable(5));

	        main.setLayout(baseLayout);

		}catch(Exception e){
			e.printStackTrace();
		}
    }
	
	private Table initTable(int pageLength){
		Table table = new Table();
    	table.setWidth("100%");
		table.setPageLength(pageLength);

		table.setContainerDataSource(createDemoData(pageLength));
		
		table.setColumnHeader("firstname", "FirstName<br/>Description of firstname");
		table.setColumnHeader("lastname", "LastName<br/>Description of lastname");

		return table;
	}

	private Container createDemoData(int pageLength){
		List<Data> dataList = new ArrayList<Data>();
		for(int i=0; i<pageLength; i++){
			dataList.add(new Data("Firstname"+i, "Lastname"+i));
		}
		BeanArrayContainer bac = new BeanArrayContainer(dataList);
		return bac;
	}
	
	public class Data {
		private String firstname;
		private String lastname;
		public Data(String firstname, String lastname) {
			super();
			this.firstname = firstname;
			this.lastname = lastname;
		}
		public String getFirstname() {
			return firstname;
		}
		public String getLastname() {
			return lastname;
		}
	}
}

I think the table header height is set in CSS. You could change it in your own theme.


.i-table-header {
	height: 36px;
}

Yeah, that’s basically it. The problem is, however, that table caption seems to be designed for only one row. Redefining the height will make the text visible, but the background pictures for the header will not stretch, so you have to redo those for the theme.

I don’t like a bit that you have to go define sizes manually, because it is to break the theme after that (changing font size for example). Luckily height:auto seemed to take away all predefinitions out of the height of the caption.

I used this css when I tested the problem:


@import "../default/styles.css";

.i-table-header{
height: auto;

}

.i-table-header-wrap{
height: auto;
}

.i-table-caption-container{
padding-bottom:9px;
}

And as I didn’t have the BeanArrayContainer used in the example i rewrote it to use IndexedContainer:


public class TestCase extends Application {

    @Override
    public void init() {
        try {
            Window main = new Window("Table header Test");
            setMainWindow(main);
            main.setSizeFull();
            setTheme("testtheme");

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

            baseLayout.addComponent(initTable(5));

            main.setLayout(baseLayout);

        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    private Table initTable(int pageLength) {
        Table table = new Table();
        table.setWidth("100%");
        table.setPageLength(pageLength);

        table.setContainerDataSource(createDemoData(pageLength));
        table.setColumnHeader("firstname",
                "FirstName<br/>Description of firstname");
        table.setColumnHeader("lastname",
                "LastName<br/>Description of lastname&quot;);

        return table;
    }

    private Container createDemoData(int pageLength) {
        IndexedContainer bac = new IndexedContainer();
        bac.addContainerProperty(&quot;firstname&quot;, String.class, null);
        bac.addContainerProperty(&quot;lastname&quot;, String.class, null);
        for (int i = 0; i &lt pageLength; i++) {
            Data data = new Data(&quot;Firstname&quot; + i, &quot;Lastname&quot; + i);
            Item item = bac.addItem(data);
            item.getItemProperty(&quot;firstname&quot;).setValue(data.getFirstname());
            item.getItemProperty(&quot;lastname&quot;).setValue(data.getLastname());
        }
        return bac;
    }

    public class Data {
        private String firstname;
        private String lastname;

        public Data(String firstname, String lastname) {
            super();
            this.firstname = firstname;
            this.lastname = lastname;
        }

        public String getFirstname() {
            return firstname;
        }

        public String getLastname() {
            return lastname;
        }
    }
}

This is the best I can give, but you have to redo the background images :frowning:

There were rendering problems when I tried the above CSS, but the following seems to work along with setting the table style to “twoLineHeader” in the Java code:

.v-table-twoLineHeader .v-table-header-wrap
{
    background: none repeat scroll 0pt 0pt #E1E2E4;
    height: 36px;
}
.v-table-twoLineHeader .v-table-header
{
    height: 36px;
}