Matomo: When one datatable label is very long it causes the table to stretch overlapping other reports

[tassoman]

There's a problem with cells containing too much characters, they make widgets overlap each others.
As you can see in this screenshot the widget on the right overlaps the one on the left that's tooooo wiiiide because of content (AAAAAAAAAAAAAAAAA).

The same happens also in _Page Titles_ cells when you try to _make it flat_ the page goes horizontal, also.

Would be nice some kind of scrollable thing like "sliding doors" behavior. For now I've found this stackOverflow answer

I'm posting a screenshot taken with Firefox on Xubuntu, IE11+win7 behavior is the same.

[mattab]

Thanks for the report!

See also related to issue: Responsive tables #6159

[mattab]

@tassoman your screenshot is for Piwik 1.12 - do you still experience this issue in 2.7.0 ? if so would you mind posting a screenshot here?

[tassoman]

Ok. The previous image was Piwik 2.3.0 using nostalgic 1.x template (users loves it :fearful: ).

Now I was able to reproduce using 2.7.0 git tag

• this is the whole rendered area taken using browser's snapshot extension
• and this is a screenshot of the desktop

My expectation (and user's) was having the cell flowing text and no horizontal scrollbar in the browser

[mattab]

@mnapoli maybe this bug would also be solved with #7504 ?

[mnapoli]

Mmh I don't think so, the responsive thing should make one column go below the other when the window width is below a threshold. But in the case here it's a problem of overflow-x I guess (i.e. the table and its content span over the column width which is 50% of the screen). It might be easy to fix though, we could move it to 2.13 and I can give it a try?

I think however that #7504 will improve the situation in smaller screens which is where this bug must appear the most (i.e. when columns are collapsed on top of another).

[tassoman]

I've temporally solved this issue using a customized Theme. Inside theme.less I've added this CSS code:

tr.level0 td.label {
  overflow: hidden;
  max-width: 1200px;
}
@media screen and (max-width: 1280px) {
  tr.level0 td.label {
    max-width: 700px;
  }
}
@media screen and (max-width: 1024px) {
  tr.level0 td.label {
    max-width: 350px;
  }
}

It tries to arbitrarily adapt cell with in different screen sizes.

[tassoman]

I'll work on the custom theme further with @jdeyla then, if we reach a working solution, I'll go for a PR

[tsteur]

Awesome 👍 looking forward to it. BTW: In Piwik 3 we will likely solve it by letting users scroll dataTables when they are too wide until we have completely responsive tables

[mattab]

In Piwik 3 we will likely solve it by letting users scroll dataTables when they are too wide until we have completely responsive tables

:+1:

[sgiehl]

Datatables are now scrollable when they are too wide: