Header does not scroll sideways in sync with content

Let’s say you have a grid. The grid has columns. The last column has width = 100px.

Populate the grid. The grid is bigger than its containing element, so there are horizontal scrollbars. Ensure that the last column contains a very long content. This long content does not have spaces, and very few hyphens. Aka a URL.

Now try scrolling sideways. You will notice that the header does not scroll in tandem with the content, and will end up being misaligned when you scroll sideways to the end.

This is because you didn’t set word-wrap: break-word. The long URL is considered “unbreakable”. So the column became longer than the header. Scrolling becomes out-of-sync.

[richraid21]

Issue reproduced here: http://codepen.io/richraid21/pen/vgaXPa

[coballa]

In my case, I put the first column one of type ‘control’ for remove filters, in the case when do not have results.