Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

select: dropdown box is cut off and locate out of the screen in RTL view on mobile/iPad #12100

Open

Description

@frkfir

AngularJS Material is in LTS mode

We are no longer accepting changes that are not critical bug fixes into this project.
See Long Term Support for more detail.

Bug Report

md-select dropdown box is cut off and locate out of the screen in RTL view on mobile/iPad.
In the previous versions, this bug hasn't appeared.

Demo and steps to reproduce the issue

Open md-select drop down on LTR and then change the view to RTL, the list box appears at the edge of the page and cut off.
Also when the text is a little bit long from the example on the Angular JS material documentation, the text also cuts off.

This blank StackBlitz demo can be used to create a reproduction that demonstrates your issue.

Demo URL (required)*:

Detailed Reproduction Steps

Explain the expected behavior

The expected behavior should be the same as LTR view.

Explain the current behavior

The current behavior isn't like LTR view and the list box is cut off (also the text inside each md-option)

Discuss the use-case or motivation for changing the existing behavior

It is important to fix this problem as it is a regression to something that has worked well in the past and there are quite a few customers with RTL languages who need this solution.

List the affected versions of AngularJS, Material, OS, and browsers

  • AngularJS: 1.6.10
  • AngularJS Material: 1.1.26
  • OS: Windows
  • Browsers: Chrome, FF, Edge, Safari
  • Screen Readers: NVDA, JAWS

Add anything else we should know

Stack Trace


Screenshots

On LTR view:
123

On RTL view:
1234

Activity

  1. changed the title [-]md-select dropdown box is cut off and locate out of the screen in RTL view on mobile/iPad[/-] [+]select: dropdown box is cut off and locate out of the screen in RTL view on mobile/iPad[/+] on Jun 3, 2021
  2. added
    i18n: bi-directionalThis issue is related to internationalization and right to left languages
    needs: demoA CodePen demo or GitHub repository is needed to demonstrate the reproduction of the issue
    and removed
    needs triageIssues that need initial triage
    on Jun 3, 2021
  3. Splaktar commented on Jun 3, 2021

    @Splaktar
    Contributor
    • Please provide a CodePen, StackBlitz, or GItHub reproduction and reproduction steps.
    • Also please provide the version of AngularJS Material where this functionality worked properly so that we can verify the regression categorization.

    We need this information to look into this issue further.

  4. frkfir commented on Aug 11, 2021

    @frkfir
    Author
    • For the demo:
      1. just even use the Chrome emulator for mobile (I used Galaxy S5 view) and add the HTML tag dir="rtl" .
      2. Go to 1.1.23 AngularJS Material version.
      3. Go to "Demos" --> Select.
      4. Go to the second example "Option Groups" with the first dropdown (Size).
    • The version of AngularJS Material where this functionality worked properly is 1.1.22 and in science 1.1.23 this issue appears.
      Thanks!
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    i18n: bi-directionalThis issue is related to internationalization and right to left languagesneeds: demoA CodePen demo or GitHub repository is needed to demonstrate the reproduction of the issuetype: bug

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions