-
Notifications
You must be signed in to change notification settings - Fork 6k
Description
| var right = windowWidth - (left + width); |
Description
When using the datepicker with dir="rtl" and Arabic locale, the dropdown is incorrectly positioned. The issue is caused by the width calculation inside the place() method:
var right = windowWidth - (left + width);
Here, width refers to the component (often the calendar icon, ~32px) rather than the full calendar width. As a result, the dropdown shifts too far to the left, equal to the difference between the input width and the icon width.
Steps to Reproduce
- Set up datepicker with dir="rtl" and Arabic locale.
- Attach datepicker to an input inside an input-group with a calendar icon.
- Open the calendar dropdown.
Expected Behavior:
The datepicker dropdown should align correctly with the input field in RTL layouts.
Actual Behavior:
The dropdown is misaligned, shifted left by the difference between the input width and the icon width.
Root Cause:
In place(), the right position is calculated using width (icon width) instead of calendarWidth (actual dropdown width).
Fix
Replace:
var right = windowWidth - (left + width);
with:
var right = windowWidth - (left + calendarWidth);
Environment
Library: bootstrap-datepicker (or specify version)
Direction: RTL (dir="rtl")
Locale: Arabic
Browser: [e.g. Chrome 127, Firefox 118]