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

Popover placement should react to scroll event

    XMLWordPrintable

    Details

    • Type: Bug
    • Status: Closed
    • Priority: Minor
    • Resolution: Fixed
    • Affects Version/s: 3.8, 3.9
    • Fix Version/s: 3.7.5, 3.8.2
    • Component/s: Themes
    • Labels:
    • Testing Instructions:
      Hide
      • Navigate to any page that has a help icon (e.g: course edit page), scroll the browser to make sure the help icon is at the middle of the screen
      • Click on the help icon, check that the dialog is at the right side of the icon.
      • Scroll the browser down to make the icon closer to the browser top edge, check that dialog is at the bottom of the icon.
      • Scroll the browser up to make the icon closer to the browser bottom edge, check that dialog is at the top of the icon.
      Show
      Navigate to any page that has a help icon (e.g: course edit page), scroll the browser to make sure the help icon is at the middle of the screen Click on the help icon, check that the dialog is at the right side of the icon. Scroll the browser down to make the icon closer to the browser top edge, check that dialog is at the bottom of the icon. Scroll the browser up to make the icon closer to the browser bottom edge, check that dialog is at the top of the icon.
    • Affected Branches:
      MOODLE_38_STABLE, MOODLE_39_STABLE
    • Fixed Branches:
      MOODLE_37_STABLE, MOODLE_38_STABLE
    • Pull from Repository:
    • Pull 3.8 Branch:
    • Pull Master Branch:
      MDL-67583-master

      Description

      Currently, when clicking on help icon, the popover popup always show at the right side of the icon no matter where the element is, sometime, the element is too close to header, footer or the edge of the browser that cut off the dialog's content.

      So I think this dialog should aware of it position react to user scroll event, normally it's will display at the right side like it is now, when user scroll, it will react and change position to top or bottom, also this can be achieve by just adding a Bootstrap parameter.

      I've attached the result after adding new parameter (placement: 'auto').

        Attachments

        1. close-to-bottom-edge.png
          close-to-bottom-edge.png
          21 kB
        2. close-to-top-edge.png
          close-to-top-edge.png
          29 kB
        3. MDL-67583.jpg
          MDL-67583.jpg
          61 kB
        4. Normal.png
          Normal.png
          34 kB

          Activity

            People

            Assignee:
            kietlyc Kiet Ly
            Reporter:
            kietlyc Kiet Ly
            Integrator:
            Adrian Greeve
            Tester:
            Anna Carissa Sadia
            Participants:
            Component watchers:
            Bas Brands
            Votes:
            0 Vote for this issue
            Watchers:
            4 Start watching this issue

              Dates

              Created:
              Updated:
              Resolved:
              Fix Release Date:
              9/Mar/20

                Time Tracking

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 1 hour, 5 minutes
                1h 5m