Valo theme table header is not aligned with columns

I’m trying a new theme Valo available in Vaadin 7.3.5. The first thing I’ve tried is creating a sample table. Unfortunately, table’s headers are not aligned with table’s columns (see screenshot attached). Tested on IE10, Chrome 39.

Here is the code example:

        Table table = new Table("The Brightest Stars");

        // Define two columns for the built-in container
        table.addContainerProperty("Name", String.class, null);
        table.addContainerProperty("Mag", Float.class, null);

        table.addItem(new Object[] { "Sirius", -1.46f }, 1);
        table.addItem(new Object[] { "Canopus", -0.72f }, 2);
        table.addItem(new Object[] { "Arcturus", -0.04f }, 3);
        table.addItem(new Object[] { "Alpha Centauri", -0.01f }, 4);
        table.setSizeFull();
        table.setSelectable(true);

        layout.addComponent(table);

Is this a bug? How the problem can be solved?

17413.png

That certainly doesn’t look right, but I can’t reproduce the issue with the code sample you attached (tested with Windows 7 on Chrome 39 and IE11, and then with compatibility mode IE10 as well). Is this a fresh project or have you upgraded from some older version of Vaadin? Did you recompile both your theme and widgetset? Is it possible that there are some other styles on that page that leak into your Table and override something? It also kind of looks like that the row cell widths are calculated expecting that there is a scrollbar, and header cell widths are calculated expecting that there is no scrollbar, so do you have anything in your code or styles that has anything to do with that? Are the widths calculated correctly if you switch to, say, reindeer?

Hi Anna,
I have the same issue in my project, it may be reproduced as follows (with the sample code provided by
Mark H
).

step1 : increase the column width until a horizontal scroll bar is created (

step1.jpg

).
step2 : move the horizontal scroll bar to its maximum right just as in step2_output.jpg (

step2.jpg

,

step2_output.jpg

).
step3 : Refresh (F5) the ui then you can see the result as in output.jpg
(
output.jpg
).

Test environment

Vaadin version : 7.3.2
Theme : valo
productionMode = true


browser : firefox 34.0

Hey Mark, Visruth,

I followed your steps Visruth, but was unable to produce that alignment error. Hitting refresh resets the column widths for me. I tried adding @PreserveOnRefresh, but no luck.

On latest OS X and Chrome.

Hi,

I was working on a new project. What I did now, I’ve simply created a new project from scratch once again, and then the table appeared with no issues. Don’t know what caused the problem initially.

It works fine with chrome but I could reproduce the issue in firefox 34 (old version might have the same issue). I have also seen this issue in chrome (but not with the given sample).

Mark: sounds like you may have had some old files cached somewhere

Visruth: thanks, now I can reproduce the problem, although it doesn’t look quite identical to the original screenshot. Still a bug, I’ll create a ticket about it.

Thanks a lot Anna.

Ah, indeed. This problem is evident in FF. Thanks for reporting!

It’s my pleasure Joacim.

Here is the
ticket
I promised, in case anyone is interested in following the issue.

The ticket indicates that @PreserveOnRefresh must be set to reproduce that issue. However, refreshing is not required to reproduce it. I just need to play with the width of my browser window (FF34):

  1. Reduce the width of the browser window until the horizontal table scroll bar appears
  2. Scroll it to the max. right position
  3. Increase the width of the browser window until the scroll bar disappears

Argh, one of my users just reported this.

Anyone got an ETA on a fix?

Thanks.

for me it happens right after I press f5

I’m using FilterTable…

to anyone who is still interested…
Iwas able to get to the bottom of this.
I wanted to support several Themes, so I removed the @Theme annotation from my UI and called setTheme in init.
This caused the problem since on each f5, the UI was initialized with reindeer theme and then set with the intended theme.
Once I’ve added back the @Theme annotation, , the problem was solved.
Took me a few days :frowning:

Hi,
I have the same problem but only in Firefox and Iexploer and only into portlet liferay. Only 1-2 px of mismatch beetween columns.
Chrome is ok
Did you resolved this bug ?
Thank you

CSS Workaround (8.6.3):

  .v-grid-header th {
      text-align: center;
  }

FYI see [issue 9077]
(https://github.com/vaadin/framework/issues/9077)