Essential Theme: Dropdown Menu Error on Android Tablets

Essential Theme: Dropdown Menu Error on Android Tablets

by Stephen Shelato -
Number of replies: 14

My organization has many staff who view our Moodle site on an Android tablet. So far, the Essential Theme is working great! I do have one glitch that I need some help with, however.

On our Android tablets, using the Chrome app, the dropdown menus in the nav bar are not working correctly. When you click on My Courses or on a Username or any other dropdown menu, the dropdown menu appears but is not clickable. Tapping anywhere on the dropdown menu causes it to close and does not open the selected page. 

I have tested our site on a desktop (In Chrome and IE) as well as on iPads (Safari app). Only Android (Or the Chrome app) seems to have this issue.

Any advice would be greatly appreciated. 

Average of ratings: -
In reply to Stephen Shelato

Re: Essential Theme: Dropdown Menu Error on Android Tablets

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Ok,

  • Did you see the posting information at the top when you posted?
  • What version of the theme?
  • What version of Moodle?
  • What version of Android?
  • What version of Chrome on Android?  Is it up to date?
  • Is this the first time you have tried this combination?
  • Has it worked in the past and if so what versions (Moodle, Essential, Android, Chrome etc.)?
  • When you say "Only Android (Or the Chrome app) seems to have this issue" this indicates an 'or' on Android, so what other browser are you using and does it work?
  • Have you tried other browsers on Android?  I believe that FireFox has just been released for Android and if so, does it work?
  • Have you tried the Clean theme on the failing setup and does that work?
  • Have you made any modifications to the theme?
  • Does it happen on lots of pages or just one?
  • What other contributed plugins do you have?

Average of ratings: -
In reply to Gareth J Barnard

Re: Essential Theme: Dropdown Menu Error on Android Tablets

by Stephen Shelato -

Sorry, here's the info I left out: 

  • Moodle Version: 2.9.3 (Build: 20151110)
  • Theme Version: 2.9.1.5.2 (Build: 2015062418)
  • Tablet Specs: Galaxy TabPro 12.2"
  • Android Version: 5.1.1
  • Chrome App Version: 47.0.2526.83 (Updated on Dec 8, 2015)
  • The dropdown has not worked in the past, I have tried only versions 2.9.1.5.2 and 2.9.1.5
  • We only use the Chrome app on our Android Tablets. However, I installed the Firefox app on one Android tablet and tested the dropdown menu. In the Firefox app, after showing a dropdown menu, I have to tap on a menu item twice to get the link to work. (But the links do work.)
  • On our iPads (Model: MGTY2LL/A), in the Safari App (Up to date), the dropdown links work fine
  • On the Clean theme, the dropdown links work fine
  • I have not made any modifications to the theme, only some color changes using the Custom CSS feature in the Essential theme's General settings
  • This error does not only occur on one page; I haven't tested every page
  • I am currently using the following plugins: Level up!, Drag & Drop onto image, Select missing words, Ordering, Enroll by user profile fields

Thank you very much for your time and efforts!

Average of ratings: -
In reply to Stephen Shelato

Re: Essential Theme: Dropdown Menu Error on Android Tablets

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Thanks, do you still have the problem without the other contributed plugins?

Average of ratings: -
In reply to Gareth J Barnard

Re: Essential Theme: Dropdown Menu Error on Android Tablets

by Stephen Shelato -

Yes, the dropdown menu behaves the same way after disabling the other plugins.

Average of ratings: -
In reply to Stephen Shelato

Re: Essential Theme: Dropdown Menu Error on Android Tablets

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Disabling is not a complete guarantee.  The plugins must not exist in any form at all on the test system.

Average of ratings: -
In reply to Gareth J Barnard

Re: Essential Theme: Dropdown Menu Error on Android Tablets

by Stephen Shelato -

Luckily, we have not started using any of the plugins I mentioned above. I uninstalled them and I'm still having the same issue with the dropdown menu in the Chrome app on the Android tablets.

Average of ratings: -
In reply to Gareth J Barnard

Re: Essential Theme: Dropdown Menu Error on Android Tablets

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Gareth this is a known Bootstrap bug. It is also the same with my iPad Mini the menus do not work properly. 

Cheers

Mary

PS. This is nothing to do with Essential...

Average of ratings: -
In reply to Stephen Shelato

Re: Essential Theme: Dropdown Menu Error on Android Tablets

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi Stephen,

Can you test the menu using the Clean theme, as I think this is the same Bootstrap bug, and as such is not an Essential theme bug.

Mary

Average of ratings: -
In reply to Mary Evans

Re: Essential Theme: Dropdown Menu Error on Android Tablets

by Stephen Shelato -

I switched to the Clean theme and tested the dropdown on the User menu. In the Clean theme, the dropdown menu works fine. When I switch back to the Essential theme, however, the dropdown behaves as I described above.

Average of ratings: -
In reply to Stephen Shelato

Re: Essential Theme: Dropdown Menu Error on Android Tablets

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Ok, in that case this is not the Bootstrap bug I thought it was.

However, this does mean that it is fixable...which is good news.

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: Essential Theme: Dropdown Menu Error on Android Tablets

by Stephen Shelato -

Should I report this issue on the GitHub bug tracker?

I've played around with this issue a little, but it is beyond my meager JavaScript skills. smile

Average of ratings: -
In reply to Stephen Shelato

Re: Essential Theme: Dropdown Menu Error on Android Tablets

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Ok, found an Android 5 device, can replicate in all browsers (Chrome and Firefox as well as bundled version).  Clean and Shoelace themes are fine.  Currently thinking that the pre-click hover CSS might be the issue:

.navbar .navbar-inner ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
}

Need to test further by removing it.

Average of ratings: -