Skip to content

[RTL] Datepicker dropdown misaligned due to incorrect width calculation #2716

@MateuszCzo

Description

@MateuszCzo

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

  1. Set up datepicker with dir="rtl" and Arabic locale.
  2. Attach datepicker to an input inside an input-group with a calendar icon.
  3. 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]

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions