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

Page is scrollable when modals are open

XMLWordPrintable

    • 2
    • WP Sprint 2025-I2.0, WP Sprint 2025-I2.1 (Clones), WP Sprint 2025-I2.2 (Clones)

      After updating to Bootstrap 5 (Moodle v5), opening a modal no longer prevents the background content from scrolling. The expected behavior is for modals to disable scrolling on the underlying page content.

      Please check the attached video example

      Technical details

      In previous versions the way bootstrap modal was working is by adding the class modal-open to the body but this mechanism has changed since bootstrap 5 (bootstrap commit), now the styles has been removed from the CSS and the way it  seems to work is by adding the styles directly to the body through JavaScript, example:

      <body class="modal-open" style="overflow: hidden; padding-right: 15px;">

      Maybe we can change our code to mimic that behaviour and add the styles directly into the body 

       

        1. background scroll.gif
          background scroll.gif
          1.57 MB

            tasio.bertomeu@moodle.com Tasio Bertomeu
            tasio.bertomeu@moodle.com Tasio Bertomeu
            Odei Alba Odei Alba
            Votes:
            0 Vote for this issue
            Watchers:
            4 Start watching this issue

              Created:
              Updated:

                Estimated:
                Original Estimate - 0 minutes
                0m
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 2 days, 1 hour
                2d 1h

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