Bootstrap fullscreen modal adds extra space from right due to padding-right: 17px on rtl (right to left) documents. This only happens when page has scrollbar.
Tested on:
- Operating system: Windows 10
- Browsers: Chrome, Firefox, Safari, Microsoft Edge, Opera
Expected behavior:
Modal shouldn't have extra padding from right in rtl documents.
Not really sure why do we need a padding-right at all, I just removed that inline-style which gets added after modal shows up and everything was working, I even changed the direction to ltr and tried on that and it was still working.
Since it is an inline padding from right which gets added using JavaScript, it's really hard to override it in CSS.
Fix:
Remove the extra inline-style: padding-right: 17px; from <div class="modal"></div> after modal shows up.
Here's a Pen: https://codepen.io/mohammadxali/pen/GRqKXoK
Bootstrap fullscreen modal adds extra space from right due to
padding-right: 17pxonrtl(right to left) documents. This only happens when page has scrollbar.Tested on:
Expected behavior:
Modal shouldn't have extra padding from right in
rtldocuments.Not really sure why do we need a
padding-rightat all, I just removed that inline-style which gets added after modal shows up and everything was working, I even changed the direction toltrand tried on that and it was still working.Since it is an inline padding from right which gets added using JavaScript, it's really hard to override it in CSS.
Fix:
Remove the extra inline-style:
padding-right: 17px;from<div class="modal"></div>after modal shows up.Here's a Pen: https://codepen.io/mohammadxali/pen/GRqKXoK