@tassoman opened this Issue on September 4th 2014 Contributor

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.

screenshot-demo piwik org 2016-06-07 12-08-32

@mattab commented on September 8th 2014 Owner

Thanks for the report!

See also related to issue: Responsive tables #6159

@mattab commented on September 28th 2014 Owner

@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 commented on September 30th 2014 Contributor

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

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

@mattab commented on April 7th 2015 Owner

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

@mnapoli commented on April 7th 2015 Member

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 commented on April 7th 2015 Contributor

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;
}
<a class='mention' href='https://github.com/media'>@media</a> screen and (max-width: 1280px) {
  tr.level0 td.label {
    max-width: 700px;
  }
}
<a class='mention' href='https://github.com/media'>@media</a> screen and (max-width: 1024px) {
  tr.level0 td.label {
    max-width: 350px;
  }
}

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

@tassoman commented on June 12th 2016 Contributor

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

@tsteur commented on June 13th 2016 Owner

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 commented on July 8th 2016 Owner

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 commented on November 19th 2017 Member

Datatables are now scrollable when they are too wide:
image

This Issue was closed on November 19th 2017
Powered by GitHub Issue Mirror