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

Checkboxes show through dropdown in course management

XMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Duplicate
    • Icon: Minor Minor
    • None
    • 3.11.2, 4.0, 4.0.6
    • Themes
    • MOODLE_311_STABLE, MOODLE_400_STABLE
    • MDL-72541-MOODLE_401_STABLE
    • MDL-72541-master
    • Hide
      1. As an administrator, go to Site administration -> Courses -> Manage courses and categories.
      2. Create at least 2 categories and in each category create 2 sub categories.
      3. Expand the view so all categories and sub categories are visible.
      4. Click the cogwheel menu of the topmost category and make sure the screen is narrow enough so the drop down menu overlaps the underlying checkboxes.
      5. Without the fix, on mouseover the checkboxes will float above the drop down menu. 
      Show
      As an administrator, go to Site administration -> Courses -> Manage courses and categories. Create at least 2 categories and in each category create 2 sub categories. Expand the view so all categories and sub categories are visible. Click the cogwheel menu of the topmost category and make sure the screen is narrow enough so the drop down menu overlaps the underlying checkboxes. Without the fix, on mouseover the checkboxes will float above the drop down menu. 

      With for example two top level course categories, when opening the the dropdown of the first category, and the cursor is hovering the first category or the dropdown, the checkbox of the second course category shows through the dropdown. In order to see this, the browser window has to be small enough so that the dropdown and checkbox actually overlap. (See the Attachment for an example.)

      This also somewhat works for course subcategories. The exact rule seems to be, If you hover either the category with the currently open dropdown, or one of its parents, you could see the checkbox of every category, which is not a child of the currently hovered category.

      This seems to be caused by MDL-70311, when bootstrap 4.6.0 added z-index: 1 for .custom-control.

      Another place to look at would be https://github.com/moodle/moodle/blob/master/theme/boost/scss/bootstrap/_list-group.scss#L28. If I understand correctly, setting the z-index of every li.list-group-item-action puts all the child elements in their own stacking context. Because of that, the child elements of every .list-group-item-action only compare their z-index against each other and their parent element, but not against elements of other .list-group-item-action. That would explains why the checkboxes are shown, even though their z-index (1) is way less than the z-index of the dropdown (1000).

            Unassigned Unassigned
            justusdieckmann Justus Dieckmann
            Alex Yeung Alex Yeung
            Sara Arjona (@sarjona) Sara Arjona (@sarjona)
            Votes:
            5 Vote for this issue
            Watchers:
            9 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 21 minutes
                21m

                  Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.