[MDL-67583] Popover placement should react to scroll event - Moodle Tracker

XML

Word

Printable

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:
- ci
- triaged

Affected Branches:
MOODLE_38_STABLE, MOODLE_39_STABLE
Fixed Branches:
MOODLE_37_STABLE, MOODLE_38_STABLE
Pull from Repository:
https://github.com/KietChan/moodle
Pull Master Branch:
~~MDL-67583~~-master
Pull Master Diff URL:
https://github.com/moodle/moodle/compare/master...KietChan:MDL-67583-master?expand=1
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.

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

- Sort By Name
- Sort By Date
- Ascending
- Descending
- Thumbnails
- List
- Download All

close-to-bottom-edge.png
21 kB
27/Dec/19 10:36 AM
close-to-top-edge.png
29 kB
27/Dec/19 10:36 AM
MDL-67583.jpg
61 kB
22/Jan/20 10:20 AM
Normal.png
34 kB
27/Dec/19 10:36 AM

Activity

People

Assignee:: Kiet Ly

Reporter:: Kiet Ly

Integrator:: Adrian Greeve

Tester:: Anna Carissa Sadia

Participants:: Adrian Greeve, Anna Carissa Sadia, Bas Brands, CiBoT, Kiet Ly

Component watchers:: Huong Nguyen, Bas Brands, Mathew May, Amaia Anabitarte, Carlos Escobedo, Laurent David, Mikel Martín Corrales, Sabina Abellan, Sara Arjona (@sarjona)

Votes:: 0 Vote for this issue

Watchers:: 4 Start watching this issue

Dates

Created:: 27/Dec/19 10:36 AM

Updated:: 24/Jan/20 10:49 AM

Resolved:: 24/Jan/20 10:49 AM

Fix Release Date:: 9/Mar/20

Time Tracking

Estimated:

Not Specified

Remaining:

Logged:

1h 5m