-
-
Notifications
You must be signed in to change notification settings - Fork 78.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fix sticky margin when a modal is opened #23669
Conversation
Previously white space was visible to the right of sticky elements due to right padding being added to the body. This fixes twbs#23661.
@@ -68,6 +68,7 @@ const Modal = (($) => { | |||
DATA_TOGGLE : '[data-toggle="modal"]', | |||
DATA_DISMISS : '[data-dismiss="modal"]', | |||
FIXED_CONTENT : '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top', | |||
STICKY_CONTENT : '.sticky-top', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
.sticky-top
is in FIXED_CONTENT
so I don't see the interest to add a new constant here 🤔
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Because sticky elements also need the padding which was and still is applied to all fixed elements, in addition to the new margin, to have the correct position. However, I could change the references to STICKY_CONTENT to the string .sticky-top
if you want.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
No that's fine I just wanted to understand your thinking 👍
js/src/modal.js
Outdated
// Restore navbar-toggler margin | ||
$(Selector.NAVBAR_TOGGLER).each((index, element) => { | ||
// Restore sticky content and navbar-toggler margin | ||
$(Selector.STICKY_CONTENT).add(Selector.NAVBAR_TOGGLER).each((index, element) => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe here you should do something like that :
$(`${Selector.STICKY_CONTENT} ${Selector.NAVBAR_TOGGLER}`)
instead of .add
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM 👍
Fixes #23661