Widget size issues

[p-banaszczyk]

I was looking for duplicates for a while, but couldn't find anything. If this however duplicates anything, please close this issue and paste original one in comment.

There are problems with some types of widgets and reports - strictly related with columns and page/dashboard layouts. Ie.

Dashboard + page titles:
http://i.imgur.com/lKYgpNV.png

Visitors + settings
http://i.imgur.com/9fuNlr0.png

[tsteur]

The only solution I can see so far would be to show scrollbars on the x-axis:

overflow-x: scroll;
overflow-y: hidden;

Looks ok on Mac but not so nice on Windows + Linux. One problem are the dataTableRowActions which needs to be fixed as they are positioned fixed. Would need to have a look if scrollbars would be ok for everyone. We would display them of course only if needed

[tsteur]

I tried to solve it with the scrollbars as mentioned above. The problem I couldn't fix are the dataTableRowActions as they are positioned fixed. The idea was to update the left rowActions positions on each mousemove and scroll event which works fine on Chrome but not at all on Firefox. I tried to find different solutions but couldn't. Then I tried to show the rowActions only if scrollLeft = 0 meaning hiding the rowActions if the user scrolls and showing them again if the user scrolls to the very left again. Also didn't work on Firefox since I did not always get the correct scrollLeft position. Next idea was to wrap all content within the first td in a `<div style="position:relative></div>" so we would not have to update the left value of rowActions at all but then the label of a row jumps by a few pixel on hover which I cannot explain at all. The styles are more or less the same and there was no way I could fix it.

I also tried to remove the columns that do not fit into the table but this resulted in problems with the label ellipsis (truncated too early as removing the columns before truncating results in problems and afterwards as well). It is also not that easy since we have to make sure to display at least the column the report is sorted by otherwise it would be confusing. For reports outside of the dashboard (such as Visitors => Browsers") it is not possible to see all columns since there is no "maximise" feature as it is in the dashboard.

Maybe we can have a look in Munich at this? Or maybe someone else knows a different solution? An easy fix could be to display the scrollbars and live with the fact that the tableRowActions are always fixed in the same position.

[mattab]

@tsteur Thanks for reporting on your experiments. It's unlucky you couldn't find something that works nicely. Maybe someone else has an idea?

[mattab]

See related issue: #6159 Reponsive table which may fix this one.

[mattab]

this was fixed in Piwik 3