Dashboard menu does not scroll .. not all dashboards accessible from it

bidouilleur · 2016-10-09T07:26:39.915Z

think we need a double approach for this kind off situation
scrollable but also being able to make sub parts to regroup (feeds) dashboards into subgroups … I can imagine the time you spend each time looking for the feed you want in this kinda lists.

Andreas_Messerli · 2016-10-09T07:40:09.016Z

Eric, that are two different things. The initial post was about not being able to scroll in the menu boxes which appear when you click on them. This is not exactly true but not nice and needs a fix from my point of view. in my Chrome it’s actually creating a scrollbar for the whole window. It definitely should be in the menu boxes itself

The feeds you mentioned can already be sorted. You can use the tag for that and easily group them together:

Pasted image1161×925 37.8 KB

I do this already and it helps a lot The feeds are then also grouped in the feed selection.

bidouilleur · 2016-10-09T07:55:29.423Z

corrected, meant dashboards and not the feeds … need to pay more attention to terms.
Meant being able to group for ex all the dashboards related to the kitchen, sleeping room or whatever regrouping …

Andreas_Messerli · 2016-10-09T07:57:21.677Z

Then I agree with you

Andreas_Messerli · 2016-10-09T08:32:00.136Z

I tried to solve it like this:

Pasted image431×704 25.7 KB

in file menu_view.php search for the following:
$out .= '<ul class="dropdown-menu">';

Exchange or add the following:
$out .= '<ul class="dropdown-menu" style="height:auto; max-height:300px; overflow-y:auto">';

try it out if it solves your issue Joyrider. If ok I maybe do a pull request to have it for all…

I set a max height of 300px here. Do not know how to use screen height for this but maybe it’s useless anyway to have such a big menubox? What do you think?

joyrider3774 · 2016-10-09T11:43:44.282Z

Hi Andreas,

The small change indeed solves my issue i had with the menu the only thing i did change was increase the max-height to 600, 300 is a bit small i think. Thanks for this !

On a side note having a way to group dashboards into submenu’s would have been great too, as i have for example 8 dashboards one for each of my smart energy plugs and another 8 for displaying costs from these 8 smart plugs i could have made a dashboard menu “Smart Plugs” and placed those dashboards in side it but that probably needs a lot more work than this simple fix. I’m more than happy with this small fix also.

another suggestion might be to have a setting in the settings php file to make it scrollable or not this way people not having the issue i had but having enough dashboards that makes the menu greater than max-height can still disable it if they want to. If you keep it at the default setting of not scrollable it won’t impact any user and people having the issue can enable the scrolling. Just to make sure people are not going to complain as i can imagine not everyone want’s it scrollable if it would display completly on their screen …

bidouilleur · 2016-10-09T11:57:51.378Z

would max-height: 95% work to auto adjust to screen height ? As html often accepts percentages … didn’t test as my screen is large, very large …

joyrider3774 · 2016-10-09T12:01:34.933Z

i tried the 95% it makes the dashboard menu really really small, probably because it doesn’t take 95% of the screen / window but of the parent container…

pb66 · 2016-10-09T12:15:09.159Z

joyrider3774:

On a side note having a way to group dashboards into submenu’s would have been great too, as i have for example 8 dashboards one for each of my smart energy plugs and another 8 for displaying costs from these 8 smart plugs i could have made a dashboard menu “Smart Plugs” and placed those dashboards in side it but that probably needs a lot more work than this simple fix. I’m more than happy with this small fix also.

You’re both right, when v9 was in the making and the topic of which dashboards would be displayed on the main navbar was being discussed, I suggested having grouping just like the feed “tags” or the input “nodes” so that similar dashboards or related dashboards could be grouped under one dropdown menu rather than having just a handful “published”, sadly it didn’t happen.

As a workaround I tend to have quite a few dashboard links and not publish all the dashboards eg you could have a “smart energy plugs” page that displays a dial or feed value and title for each smartplug and put a transparent box over that with a href link in so that the gauge or feedvalue becomes a hotspot clickable link to another more indepth per device page with a “back to smart plug list” button on each.

I have also made pages that have tabs at the top of using grey and white containers eg

2016-10-09.png1236×438 24.3 KB

2016-10-09 (3).png1154×283 16 KB

2016-10-09 (2).png1196×286 15.6 KB

Once you have a template page it is easy to clone and rearrange the tabs for each page (move the white one along one place and rename it and the grey one that has swapped position.

(please ignore the content and labels, this is some test pages I set up when trying to get read-only navigation working. With this method I can send a someone a link with a read-only key in the link and they v=can then navigate around those few pages as I have included a read-only key in the href’s so you do not need to be logged in)

joyrider3774 · 2016-10-09T12:32:20.683Z

that’s actually pretty nice workaround as well i might change my dashboards to do this as well it would prevent the need for the quick menu. Only problem i have is that i would need to move every single widget i have now on my dashboards to a lower position to have the top navbar and as far as i’m aware i need to do this manually one widget at a time for each dashboard as i don’t think you can multiselect and move them all at once to a lower position.

pb66 · 2016-10-09T12:40:26.189Z

joyrider3774:

as far as i’m aware i need to do this manually one widget at a time for each dashboard as i don’t think you can multiselect and move them all at once to a lower position.

Yes, at the moment it would, i did ask for “multi-select” when @mattjgalloway was doing the great dashboard improvements recently, he added move forward/backward and also undo and redo, but I think the multi-select was a bit involved.

He also added an editable grid size and moving items via the curser arrows rather than using a mouse to drag, so it should be much easier to do all the widgets, even though it is one at a time.

Do you currently use “full width” page size or standard? If you can switch to “full page”, you could have a righthand side column of tabs.without moving stuff.

mattjgalloway · 2016-10-09T13:02:36.731Z

I have multiselect working on my fork. But I keep hitting a few cases where things mess up with it. So I haven’t pull requested it yet. I shall endeavour to find some time to tidy it up and PR it!

pb66 · 2016-10-09T13:14:18.913Z

That’s great news, although I should point out I only mentioned you so you get the credit for the great additions you have already done, it wasn’t a meant as a “get a wriggle on” type comment, but still, I’m really glad to hear you are on the case.

joyrider3774 · 2016-10-09T13:15:33.608Z

pb66:

Do you currently use “full width” page size or standard? If you can switch to “full page”, you could have a righthand side column of tabs.without moving stuff.

not sure what full width page or standard width page is (can’t seem to find this option) but my dashboards are made in such a way that the widget occupy the wole screenwidth when my browser is maximized at my current resolution. So i had have to make some room on the right hand side as well then.

Could be i’ll wait for the multiselect option then because currently i’m fine with the quick fix for a scrollable menu but having a menu on the dashboards itselve would be nice as well, it’s on my todo list

pb66 · 2016-10-09T13:26:26.792Z

it’s in emoncms/settings.php

https://github.com/emoncms/emoncms/blob/master/default.settings.php#L79-L80

Although looking at your screenprints it looks like you are already using the full width, that’s why the nav bar starts ~20% into the page and ends ~20% short of the right edge, that would be where the page edges would be also be if that setting was “false”.

Andreas_Messerli · 2016-10-09T13:27:03.269Z

Glad it solves the issue at least temporarily
And yes you cant use % there as it is using the parent of it, that’s why I used Auto for height but set a max-height value to stop letting the box getting bigger than this value. It fits easily 11 dashboards without a scrollbar. It seems that we are power users and therefore have another requirement list

I quite like the simple fix here, it solves also a handling issue on my 42" 4K monitor. A large dropdown list is sometimes not nice to use. Imagine what happens when you leave the menu area and the box vanishes halfway down the list. It’s annoying as hell. Also moving that far for selecting something is not really cool. That was also the reason I suggested to use a toolbox approach for the dashboard as you can move it around where you need it:

Pasted image1973×1759 693 KB

mattjgalloway · 2016-10-09T19:07:35.095Z

pb66:

That’s great news, although I should point out I only mentioned you so you get the credit for the great additions you have already done, it wasn’t a meant as a “get a wriggle on” type comment, but still, I’m really glad to hear you are on the case.

Ah no worries - didn’t think you were saying to get a wriggle on ;-). But FWIW I just submitted a PR for this. Was good to get a reminder and nudge to get this in.

Jon · 2016-10-09T19:16:38.206Z

pb66:

“get a wriggle on”

I had to google/bing this one. I learned something new!

mattjgalloway · 2016-10-09T19:31:16.612Z

I’ve put up a PR to fix the issue that @joyrider3774 was having:

github.com/emoncms/emoncms

Make dropdowns a maximum height and allow them to scroll

emoncms:master ← mattjgalloway:menu_scroll

opened 07:29PM - 09 Oct 16 UTC

mattjgalloway

+7 -1

This aids usability when you have a long list of items. Moving your mouse all th…e way down can be tedious. Scrolling the list is easier. In particular this is useful when you have a long list of dashboards which ends up going off the screen. Now it'll scroll so you can get to all of the items. This was picked up here: https://community.openenergymonitor.org/t/dashboard-menu-does-not-scroll-not-all-dashboards-accessible-from-it

I made all dropdowns have a maximum height of 250px and then they scroll. It feels right to me. If someone who day-to-day uses a lot of dashboards could give it a go that’d be helpful.

Paul · 2016-10-11T19:26:08.475Z

Now merged into git master branch - thanks Matt!

Paul