Bootstrap fullscreen modal extra space from right in RTL documents when page scrolling
Created by: MohammadxAli
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