Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-51819

Nested navigation dropdowns don't work on small screens (mobile view)

    XMLWordPrintable

    Details

    • Type: Bug
    • Status: Closed
    • Priority: Minor
    • Resolution: Fixed
    • Affects Version/s: 2.9, 2.9.1, 2.9.2
    • Fix Version/s: 2.9.4
    • Component/s: Themes
    • Labels:

      Description

      This bug appeared after update from 2.8 to 2.9
      Scenario:

      1. Choose moodle clean theme
      2. Set the top navigation menu to the suggested setting - this would include nested menus
        e.g.

        Moodle community|https://moodle.org
        -Moodle development|https://moodle.org/development
        --Moodle Docs|http://docs.moodle.org|Moodle Docs
        ---Moodle level 3|http://google.com
        ---Moodle level 34|http://google.com
        ---Moodle level 3|http://google.com
        --Moodle 22Docs|http://docs.moodle.org|Moodle Docs
        ---Moodle level 3|http://google.com
        ---Moodle level 34|http://google.com
        ---Moodle level 3|http://google.com
        --German Moodle Docs|http://docs.moodle.org
        -Moodle development|https://moodle.org/development
        --Moodle Docs|http://docs.moodle.org|Moodle Docs
        ---Moodle level 3|http://google.com
        ---Moodle level 34|http://google.com
        ---Moodle level 3|http://google.com
        --Moodle 22Docs|http://docs.moodle.org|Moodle Docs
        ---Moodle level 3|http://google.com
        ---Moodle level 34|http://google.com
        ---Moodle level 3|http://google.com
        --German Moodle Docs|http://docs.moodle.org
        

      3. resize the window so that the navagation menu gets in mobile view
      4. try to open any of the nested submenus - all the menus are closing

      What I expected - nested dropdown menus to work in mobile view
      What actually happens - instead of opening a submenu, the top-level menus are get closed

      This happens due to a bug in the bootstrapbase javascript - in theme/bootstrapbase/amd/src/bootstrap.js, lines 667-748. The function clearMenus() is called everytime a dropdown is toggled, and it causes all the menus to be closed.

      Here is a patch that fixes the bug with a few small changes:

      diff --git a/theme/bootstrapbase/amd/src/bootstrap.js b/theme/bootstrapbase/amd/src/bootstrap.js
      index 196975e..35fb020 100644
      --- a/theme/bootstrapbase/amd/src/bootstrap.js
      +++ b/theme/bootstrapbase/amd/src/bootstrap.js
      @@ -679,15 +679,15 @@ define(['jquery'], function($) {
       
             isActive = $parent.hasClass('open')
       
      -      clearMenus()
      +      clearMenus($this)
       
             if (!isActive) {
               if ('ontouchstart' in document.documentElement) {
                 // if mobile we we use a backdrop because click events don't delegate
                 $('<div class="dropdown-backdrop"/>').insertBefore($(this)).on('click', clearMenus)
               }
      -        $parent.toggleClass('open')
             }
      +      $parent.toggleClass('open')
       
             $this.focus()
       
      @@ -737,10 +737,13 @@ define(['jquery'], function($) {
       
         }
       
      -  function clearMenus() {
      +  function clearMenus($e) {
           $('.dropdown-backdrop').remove()
           $(toggle).each(function () {
      -      getParent($(this)).removeClass('open')
      +      var $parent = getParent($(this))
      +      if ($e == undefined || $parent.find($e).length == 0) {
      +          $parent.removeClass('open')
      +      }
           })
         }
      

        Attachments

        1. low_contrast_and_weird_blue.png
          low_contrast_and_weird_blue.png
          34 kB
        2. mdl_51819_css_fixed.patch
          0.7 kB
        3. mdl_51819_css.patch
          0.6 kB
        4. moodle_theme_bootstrapbase.patch
          1 kB
        5. Screen Shot 2015-11-12 at 13.18.45.png
          Screen Shot 2015-11-12 at 13.18.45.png
          235 kB
        6. test.html
          5 kB
        7. without_important.png
          without_important.png
          36 kB

          Issue Links

            Activity

              People

              • Votes:
                1 Vote for this issue
                Watchers:
                9 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:
                  Fix Release Date:
                  11/Jan/16