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