Table header doesn't align with columns?

Vaadin 6 / 7 / 8 Framework UI
1

I’m new to Vaadin and still learning the framework. I’m using vaadin-6.7.6.

Right now, I’ve created a TabSheet, in which I’ve placed a table. So far so good. But when I populate the table with my data (using a BeanItemContainer), the headers of my table do not align with the columns (see screenshot). As you can see, the vertical lines in the data cells do not line up with the verticals in the headers. I have done nothing special with the css stylesheets and am using reindeer as the default style.

My tab/table is defined with the following settings:


Table dataTable = new Table();
dataTable.setSizeFull();
dataTable.setContainerDataSource(container);
dataTable.setColumnCollapsingAllowed(true);
dataTable.setColumnReorderingAllowed(true);
dataTable.setImmediate(true);
dataTable.setEditable(true);

TabSheet sheet = new TabSheet();
sheet.addTab( dataTable, "" + year );

Do I have to do something different to ensure that the column lines match the headers?

Thanks,

Eric
12651.gif

2

Hi,

I saw recently the same effect on IE8 and Vaadin 6.8.5. After pressing F5 for a page refresh the table was displayed correctly.

Did you get this effect on every major browser? If you have this effect only on IE: what is the state of the compatibility mode?

Andreas

3

Hey friends,

I am also facing that issues please help me.

Thanks in advance

4

Hi Eric B.

I am facing the same problem…could you please tell me how did you solved this issues.

Thanks In advance.

5

Same here, using Vaadin 6.8.8

Some additional info:
It only seems to occur when one of the columns contains data which is larger than the default column width, but not if a scrollbar is added.
In other words, if one of the columns contains “large” data and there is room to decrease the other column’s width to make everything fit on screen, then this issue seems to occur.

Those are the browser versions I’m currently using:

Firefox: 19.0.2
Chrome: 25.0.1364.172 m
IE: 10.0.9200.16521

The strange part is that I do see this behaviour in Firefox and Chrome, but NOT in IE.

6

Apparently I spoke too soon…

I do notice it in IE10, but the other way around:
If one of the columns contains “large” data and there is no scrollbar, everything is fine in IE, but if I unmaximize my browser window a scrollbar is added and the alignment is completely wrong.

7

I tried this with Vaadin 6.8.9 on a Win 7 64bit System with IE10 and couldn’t see the issue you described. Did you used latest Vaadin version? There was a bug fixed that was maybe related to this problem.

Regards

Andreas

8

Hi Andreas,

Thanks for you feedback.
I was using 6.8.8 as stated in one of my previous posts, but I upgraded to 6.8.9 and unfortunately this is even worse !

These are my findings:

*** If I don’t specify any width, everything is ok unless one of the columns (in my case the latest column) contains a large string.
*** If I do specify a width for (most of) the columns then:
- with Vaadin 6.8.8:
everything is ok, unless one of the columns contains a large string (same as with no width specified, see above)
- with Vaadin 6.8.9:
the columns are ok, unless one of the columns contains a large string.
BUT the headers are completely messed up. And the reason for this seems to be a newly introduced bug to me:
The width of the first header is 8013px, the second 10013px, etc (used firebug for this info) while I specify the width as 80px, 100px, etc respectively.
The column width however is 80px, 100px, etc
→ So for some unknown reason the width of the headers is suffixed with “13” :rolleyes:


UPDATE
:
I think I found the cause of my problem.
I am using a CellStyleGenerator which sets custom css for 2 of the columns in the table, like this:


if (propertyId.equals(Event.PROPERTY_STATUS)) {
	Item tableItem = getTable().getItem(itemId);
	if (tableItem != null) {
		Object itemValue = tableItem.getItemProperty(Event.PROPERTY_STATUS).getValue();
		
  	if (itemValue != null) {
  		int intValue = -1;
  		if (itemValue instanceof BigDecimal) {
  			// Oracle
  			intValue = BigDecimal.class.cast(itemValue).intValue();
  		}
  		else {
  			intValue = ((Integer) itemValue).intValue();
  		}
  		switch(intValue) {
    		case 0: cellStyle = "status-ok";
    				break;
    		case 1: cellStyle = "status-nok";
					break;
    		default: cellStyle = null;
    				break;
  		}
  	}
	}
}

Based on this css, my stylesheet then “replaces” the content of that column with an image:


.v-table-cell-content-status-ok, .v-table-cell-content-status-ok .v-textfield-status-ok, .v-table-cell-content .v-textfield-status-ok {
	background: url("icons/ok.png") no-repeat transparent;
	background-position: center;
	height: 14px;
	color: transparent;
}

.v-table-cell-content-status-nok, .v-table-cell-content-status-nok .v-textfield-status-nok, .v-table-cell-content .v-textfield-status-nok {
	background: url("icons/nok.png") no-repeat transparent;
	background-position: center;
	height: 14px;
	color: transparent;
}

If I disable the CellStyleGenerator the column layout seems ok, even with columns with large strings.

The question now is: what’s the solution ?

regards,

Guy

9

Did anyone find a solution for this? I’m using Vaadin 7.1.5 and still have this problem.

The headers in my table have the correct width that they have in IE9, Chrome and FF, but in IE8 the columns are getting precisely the width of the widest data inside of them - meaning I have a very small table (about half the wifth of the headers) in the upper left corner of the “table space”. The table is not even showing all the rows and no scrollbar is presented, so I can’t even see all the data.

10

Does this happen without any custom theme or injected CSS? You might be able to deactivate your theme by adding “?theme=reindeer” to your URL.

If it happens with the default theme, please
create a ticket
 about this. Also attach a minimal UI class that shows how to reproduce the problem.

Also, please check whether browser zoom is something else than 100% and whether that has any effect on the problem.

Note that this is very likely a different problem than the small mismatch per column that some of the previous posts mentioned.

11

This sounds exactly like the issue I had - an in that case a client-side exception happened when rendering the table, which halted the process and prevented proper column width settings, fetching more rows etc.

Can you enable debug mode for your application and then access it while adding “?debug” to your application url? This should show the debug window and also any client-side exceptions should show a big red notification in the browser.

12

I was having the same issue (Chrome v30, Win7-64) but reading your post I realize my zoom was at 110%. When I set it to 100% and refreshed it looks ok. Is there any workaround for handling zoom? Not sure if we can tell our clients not to zoom. I don’t have any generated columns, default widths, and no expansion ratios.

Thanks,

13


Creating a ticket
 with info on how to reproduce this would be a good first step if there isn’t already one (
see here for some zoom related tickets
) - there is no guarantee that the issue will be addressed soon but if there is no ticket, it is very unlikely anything would be done about it. If there is a ticket but without good instructions on how to reproduce, perhaps you can add such instructions to the old ticket.

Though there have been some similar issues in the past with zoom, I suspect the new issues might also be related to the components or themes not fully taking into account sub-pixel units that latest browsers are using more and more with zoom.

14

I am
still
having this issue 3 years later with Vaadin 7.? with firefox 46.0.1 displaying the column headings with their border misaligned to the borders for the content.
please point me to the solution

15

This happened only on some computers for us and the problem was that the browser was to more than 100% zoom. To fix it, do ctrl+0 and then F5.

16

I think this is an issue with the
Text Size
 as set in the
Windows Display settings
.
When this is set at 100% it is fine, when it is set to 125% it is NOT fine (this is probably same as changing the browser zoom)

We develop on 15" 1920x1080 laptop screens so have the text size set to 125% so it is more legible (this is the default setting) and therefore the tables do not align properly
On a 23" screen with a 1920x1080 display the text is legible at 100% and the tables are perfect.

I think our clients will be using modern laptops with their HD screens set to their default settings so it is a problem

17

Just weighing in here… I too found this issue when the screen is zoomed.
I had the browser zoom at 90% and saw this occuring.

I keep finding these little ‘gotchas’ that really is making me reconsider my initial decision to implement a new software line for my company in Vaadin…

18

Peter: Are you using Table or Grid? Also, what theme are you on? Reindeer was still using images for a bunch of stuff in the theme, and didn’t work too well when zoomed. Valo, on the other hand should work much better.

19

Hey Marcus,

I am using a Table for this at the moment.

I am using a custom theme that inherits most stuff from Valo.
I haven’t changed much in the theme i’m working on at this stage, so its pretty much just Valo.

It’s not a show stopper for us at the moment… but it’ll be raised as an issue at some point the first time a QA resource reviews a page that has a table in it…

20

Ok. If you need help, feel free to post a screen shot in a separate thread and I’ll see if either I can help you or if I can find someone who can.