[Feature Request]: Select and ComboBox dropdown list alignment (L/R)

Open
#13,469 5 comments 0 reactions 1 assignee View on GitHub

@hristop is already working on this.

Since May 27, 2026.

Assessment

This issue has not been assessed yet.

Description

Design Pending feature request Low Prio TOPIC P TOPIC RL
Image
Feature Request Description

Currently, the UI5 Select and ComboBox have no built-in property for controlling the dropdown list alignment (left or right).

The dropdown list is always placed left-aligned below the select or input field.
Usually, the size of input field and dropdown list is the same so placement looks fine.

For small screen sizes, or if the dropdown list is bigger than the input field, it is still aligned left below the select and shifted horizontally if it doesn't fit in the available screen space.
This placement might look a bit odd.

Proposed Solution

Similar to the vertical placement of the dropdown list (if there isn't enough space at the bottom, it opens upwards) handle the horizontal alignment: A dropdown list that cannot be displayed left-aligned below the selection field because it doesn't fit in the available screen space, should open right-aligned to the selection field.

This is the typical, "native" behavior for dropdown lists - if there is not enough space in one direction, open it in the opposite direction.

Proposed Alternatives

Alternatively, offer a built-in property for controlling the horizontal alignment of the dropdown list for Select and ComboBox controls. Useful if placed on the right side of the screen.
(Maybe similar to the menu component which has a horizontalAlign property — and allows to change it from the default "Start" to "End", "Center", or "Stretch".)

Organization

Signavio

Additional Context

No response

Priority

Low

Privacy Policy
  • I’m not disclosing any internal or sensitive information.
Dominant language
TypeScript
Stars
1.8k
Forks
285
Avg merge
3d 2h
Merged PRs (30d)
59

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from UI5/webcomponents

All issues in UI5/webcomponents

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.