Pi-Touch Menübox always opens to the top

[AlexanderBehnke]

Hello, i really like volumio and i build a Box for my kids so that the kann hear their Radio plays.

(it's not finished by now, the encoders and the handle are missing.)

Unfortunately the Dropbox always opens to the Top so that the first radio-plays are not possible to play.

Many thanks for your Work.

Greetings Alex

[AlexanderBehnke]

I think i have localiced the problem. It depends on the language. I chosed german when it opened to the top. When i chose english it opens down and everything works like a charm.

Greetings Alex

[fiodoro]

Any news on this? Seems to be the same as #248. Also described in https://volumio.org/forum/raspberry-touchscreen-context-menu-not-accessible-t8437.html#p43192.

I'm expieriencing this bug with german locale on the official raspberry 7" touch display and on my tablet. But there only with the chrome browser. Firefox works well. So maybe this issue is related to the chromium engine, which is also use by the touch display plugin?

[xipmix]

It might help to debug this if you could try one or two other languages, e.g. French or Italian. Do they behave the same as German or as English?

[xipmix]

I tried to reproduce this with a normal browser and found that I could. The test I did was:

• Browse-> Music Library
• NAS item - select the menu icon on the right All languagues I tried (en,fr,de,it) displayed the menu correctly at first. I tried firefox on linux, chrome on macos, safari on ipad.

But then I resized the browser window to force the bottom row of icons (browse/playback/queue) to the top of the UI. Now, the cog icon is at bottom right and the menu for it displays upwards. This is correct, as it allows the menu to be seen.

With the browser resized, I changed language again and tried the test above

• English - NAS items's menu extends downward

• Germen - menu extends upward

• French - down

• Italian - down

• Catalan - down

• Danish - down

• Czeck - down

• Swedish - down

• Turkish - down

• Dutch - up

• Hungarian - up

• Polish - up

• Russian(? - cyrillic alphabet) - up

So there must be something these languages have in common

[xipmix]

If I look at the html there is this difference in the menu once it is opened

German

<div uib-dropdown="" on-toggle="browse.toggledItem(open, $event)" class="hamburgerMenu ng-scope dropdown open">
        <button id="hamburgerMenuBtn-0-0" class="dropdownToggle btn-link dropdown-toggle" uib-dropdown-toggle="" aria-haspopup="true" aria-expanded="true">
          <i class="fa fa-ellipsis-v"></i>
        </button>
        <ul class="dropdown-menu buttonsGroup top" style="visibility: visible;">
...

English

<div uib-dropdown="" on-toggle="browse.toggledItem(open, $event)" class="hamburgerMenu ng-scope dropdown open">
        <button id="hamburgerMenuBtn-0-0" class="dropdownToggle btn-link dropdown-toggle" uib-dropdown-toggle="" aria-haspopup="true" aria-expanded="true">
          <i class="fa fa-ellipsis-v"></i>
        </button>
        <ul class="dropdown-menu buttonsGroup" style="visibility: visible;">
...

The difference is the last line:

-        <ul class="dropdown-menu buttonsGroup top" style="visibility: visible;">
+        <ul class="dropdown-menu buttonsGroup" style="visibility: visible;">

To me this looks like the cause, but I am unclear what could be setting that extra class selector.

@volumio do we have enough detail here to diagnose this?

NB testing with 2,452 on rpi2.

[fiodoro]

I tested the different languages on version 2.513 (rpi3) and can confirm the same up/down behaviour as xipmix reported.

[fiodoro]

Maybe I found the root cause. It's in the class BrowseHamburgerMenuDirective (file browse-hamburger-menu.directive.js, line 30 ff):

if (hamburgerMenu.bottom >= tableWrapper.bottom) {
  menuWrapper.classList.add('top');
}

I think this happens, when the translations of the menu entries are too long and the lines wrap around. Then the menu gets too big and is displayed upwards.

I edited the html maually (F12 in Firefox) and if I add "top" to the class list, it displays upwards, if I remove it, the menu displays downwards.

So either the translations must be shorter or there is something wrong with tableWrapper...

[fiodoro]

Semi-Good News: In 2.619 it seems to be fixed. At least in the experimental Volumio3 GUI. And there only in the grid view (with the album covers), not in the list view.

Can you please fix it also in the list view and back-port the changes to the current Volumio2 GUI?

[geek-merlin]

I can confirm this is still an issue with current volumio release: Only on touchscreen with german language the menuboxes open to top and are unusable. Both in grid and list view.

On desktop chrome, or with english language, this is not an issue.

[xipmix]

Thanks, that is v2.692 correct? If you are not on a rpi the version may differ...

[geek-merlin]

v2.692

Yes that 's what i see under "System".

[fiodoro]

One observation that might help: It seems to be related with the number of entries in the list/grid. Case 1; More entries than vertical space and the scrollbar gets activated: The menu works as expected. Case 2; Only one or a few entries so that there is no vertical scrollbar: The issue occurs

v2.692

[geek-merlin]

One observation that might help: It seems to be related with the number of entries in the list/grid. Case 1; More entries than vertical space and the scrollbar gets activated: The menu works as expected. Case 2; Only one or a few entries so that there is no vertical scrollbar: The issue occurs

Interesting: I can not confirm this in my case. Also on long lists with with scrollbar menubox opens on top (Grid and list view; Language german).