No longer possible to change the dashboard layout to multiple columns

[AgnesWhy]

Problem evidenced in Firefox 37.0.2 and in Chrome 42.0.2311.135 m After automatic upgrade to version 2.13.0, it's no longer possible to set the layout of the dashboard to multiple columns. When changing the dashboard layout to 2 or more colums, it emains displayed on 1 column taking the whole available width of the window.

[mattab]

Thanks @AgnesWhy for the report.

This is an unfortunate regression in 2.13.0 - we will fix it in next release.

Steps

• Add UI test(s) for Dashboard layout change
• fix issue

[diosmosis]

@AgnesWhy I cannot reproduce this on Firefox 37.0.2. Can you clear your browser cache and run ./console core:clear-caches and try again?

@mattab Test exists here: https://github.com/piwik/piwik/blob/master/tests/UI/specs/Dashboard_spec.js#L138

[mnapoli]

Couldn't reproduce too on chrome and safari. Test exists.

[mattab]

Hi @AgnesWhy we actually can't reproduce your problem, would you mind posting a screenshot and exact steps and browsers used to reproduce the issue?

[AgnesWhy]

Hello, I have taken all the steps you recommended, basic cleaning the browsers cache but it didn't fix the problem. I then fully installed a fresh copy of the version 2.13.0 (the previous installation was an automatic update), yet this didn't solve the problem. I'm now rolling back to the previous version of Piwik on my production system and hopefully, it will work as before. Time permitting I will install 2.13.0 on a test system and further look down at the problems and I'll communicate the results.

Have a good day...

[AgnesWhy]

I rolled back to version 2.12.1 (including the DB) and everything is fine again, no layout problem anymore, neither in Firefox, nor in Chrome.

Time permitting, I will install 2.13.0 on a test environement and further investigate.

Nonetheless, the lesson is learned, never assume an update has been tested and install it on a staging environment first.

I'll keep you posted

[AgnesWhy]

My production is fine again after the roll-back to 2.12.

I have upgraded a test system running 2.12 to 2.13 through automatic upgrade and after the upgrade (DB also upgraded), it's no longer possible to have multiple columns in the dashboard, as illustrated in the pictures enclosed hereafter:

This is what I have in 2.12 and I'm happy

I want to get the same in 2.13 so I adjust the layout full of hope

And this is what I get, there is no way out of a 1 column layout for the dashboard in 2.13, and I'm getting frustrated...

Have a nice day,

[diosmosis]

Can you provide access to the test instance (by emailing hello@piwik.org)? We would need a test user to verify the bug and possibly ssh/ftp access if the problem is caused server-side.

Also, can you try to reproduce the error on demo.piwik.org?

[AgnesWhy]

Hallo,

Yes, it's exactyly the same problem when querying the dashboard on demo.piwik.org. Problem ssems to be client-side. Did you make any change to the stylesheet linked to dashboard between 2.12 and 2.13 for the rendering of data is correct and this seems to be a layout problem only.

I'll perform a few more tests on 2.13 with Firefox and Chrome, also using another client machine.and I'll keep you posted.

Mail you soon

[diosmosis]

We changed the dashboard CSS to use bootstrap's grid CSS (which allows it to be responsive).

I see no issue on demo.piwik.org, so it might be a browser cache issue. Or maybe your web server is serving the old CSS or Piwik isn't re-generating the CSS properly. The Boostrap CSS is requested using a CSS @import rather than going through Piwik's asset pipeline, which may be the problem too.

[AgnesWhy]

The problem is not a piwik core issue" as I can reporduce it on demo and you cannot.

I don't think either it could be a browser cacce problem as my caches are emptied every time a browser is closed and the problem can be reproduced on Firefox and on Chrome and on 2 different machines (i.e.: 4 browser instances).

I think the problem is how the CSS is served to my browsers I'll see what CSS I get on 2.12 and 2.13 for the dashboard and I wil compare. But this will be for another day.

I keep you posted

[AgnesWhy]

OK, I found the source of the problem

The problem is due to the responsive design you introduced with bootstrap. With certain desktop sizes of screens, the design switches to the mobile mode where the display is on one single column. The work around consists in zooming out the dashboard until the design switches back to fesktop mode (i.e. multiple columns) The problem is that bootstrap and other pre-configured css make assumptions based on the number the relative dimensions of the screen to determine whether the display is a mobile one or a desktop but those assumptions are not always correct, and result in not desired displays

Problem is not fixed, but there is a workaround.

[AgnesWhy]

Anyway, I will stick back to my old policy: never update a system unless there is a real absolute compulsory necessity to do so... I'll stay with 2.12 for a while...

[mnapoli]

OK yes we can see in your screenshot that your screen size is quite small (the menu is collapsed on itself for example), which turns the dashboard to be responsive and switch to 1 column (the goal is to keep the dashboard readable even on smaller screens).

We could use col-sm-4 instead of col-md-4: that would allow the 3 columns to stay on even smaller screens? (would the dashboard still be usable on the smallest possible width that keeps 3 columns?)

[Trance-Man]

AgnesWhy, what do you mean exactly by "The work around consists in zooming out the dashboard until the design switches back to desktop mode (i.e. multiple columns) "

I used my options on Firefox to zoom in and out on the webpage "options" 'Zoom In' and 'Zoom out' but I never got 3, I will mess with it some more, hope to hear back. :(

I will try to resize browser and then change column options after that, maybe that will work.

[AgnesWhy]

Let's try to make it clear

The point is that I use a resolution of 1024 * 768 for monitoring my websites and on top of that I have the Windows menu on the left of the screen and not at the bottom..So you can assume that the Piwik dashboard can use 900 * 768 or something in the range. The Piwik responsive design detects the available space (900 pixels wide) as being the space of a mobile device screen and it switches to the "mobile display" and displays the dashboard on one column.

When the dashboard is on one column (the so-called mobile mode), if one zooms out in Firefox then the dashboard switches back to the desktop mode as it has has more pixels available (e.g. 1050 pixels wide instead of 900). and it displays multiple columns instead of a single one.

So to reproduce the problem, switch to a screen resolution of let's say 900 * 768 and you should be able to see what I mean.

I hope my explanation is crystal clear, if not, don't hesitate to ask

Agnès

[mnapoli]

@AgnesWhy if you consider Piwik usable with such a small screen and 3 columns then I think we can allow 3 columns layout on smaller screens.

As explained here currently the columns will collapse into one for a width of 970px or less. If we use the col-sm-4 CSS class instead the columns would collapse into one for a width of 750px. Would that be OK? Or we could ignore the responsive feature and force to never collapse the columns using col-xs-4, but that means the dashboard wouldn't be responsive (opening a 3 columns dashboard on a mobile would be unsusable).

@mattab thoughts?

[AgnesWhy]

Having one single column, even on a small screen like the one I use, makes it diffcult to read, to get an overview. Regarding the dimensions thresholds for switching from desktop to mobile mode, you should better gather other opnions than mine as well before making a decision.

For your information, I personally define the folllowing switching thresholds for my websites @media (max-width:740px) -> smartphones @media (min-width:741px) and (max-width:980px) -> tablets @media (min-width:981px) and (max-width:1199px) - > desktops @media (min-width:1200px) -> large screens and up to know all my tests were positive and I didn't get any adverse reactions from my visitors.

For Piwik, I think defining one single threshold at 750 px would be ok.

Hope this helps

[spider312]

Hi

I experience the same problem, but the cause don't seem to be the same : i have this bug under chromium and firefox, both under windows and linux, all with a fullHD resolution (1920x1080)

I of course cleared all client-side and server-side caches, whith no effects

Update to 2.13.1 didn't solve this issue

[AgnesWhy]

Hi Spider312

In Firefox when you zoom out a few clicks (View / Zoomout), does it solve your issue ?

Agnès

[spider312]

Oh, sorry i forgot to mention that zooming has no effect

[diosmosis]

@spider312 Sorry for the late reply. Can you check your plugins/Morpheus/stylesheets/base.less file for the following text: @import "bootstrap.css";? If it isn't there, the file is incorrect and the update failed to copy the new file. In this case, you should re-upload/copy the files in the latest stable release.

[spider312]

The import directive is present in the less file, but what you said remembered me of many errors with file access (mostly images) i had, so i downloaded a fresh piwik install zip and replaced my files with it, which solved the issue

After that a friend of mine analysed apache log files (for another reason) and found many access denied errors and last ones were on this bootstrap.css file

I think this problem, and the one i was reporting about image file access, come from update procedure (well, i'm pretty sure for that) and maybe because of the use of suPHP for this website

[mnapoli]

I have replaced the classes to use col-sm- columns instead of col-md (so that on tablets the columns are not collapsed). I didn't use col-xs- because that would really make Piwik unusable on smartphones… (so on smartphones the 3 columns layout still is shown as one column).

[berliner]

I have seen the same problems with Piwik 2.13. Disabling mod_pagespeed fixed the problem entirely.