Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dropdown-Select listpad dont display above Scale-Modal #2120

Open
niclas18 opened this issue Sep 8, 2023 · 2 comments
Open

Dropdown-Select listpad dont display above Scale-Modal #2120

niclas18 opened this issue Sep 8, 2023 · 2 comments
Labels
bug Something isn't working

Comments

@niclas18
Copy link
Contributor

niclas18 commented Sep 8, 2023

Scale Version
3.0.0-beta.139

Framework and version
Vue 3.3.4
Vite 4.4.9

Current Behavior
When integrating the DropDown-Select component within a Scale Modal, the drop-down listpad with the items is expanded in the modal content (see minimal reproduction - open Modal2 - scroll to the end).

Expected Behavior
The dropdown-listpad should display over the modal. There should be no need to scroll in the modal to select the appropriate option.

Code Reproduction
Minimal reproduction

Desktop:

  • OS: Windows 11
  • Browser: Chrome
  • Version: 116.0.5845.180

Additional context
In #1208 we have the same problem with dropdown in ScaleCard. For this we found a fix with setting overflow: visible.
We do this now for the scale-Modal to by setting:

scale-modal::part(window) {
    overflow-y: visible;
}
scale-modal::part(body-wrapper) {
    overflow-y: visible;
}

But this leaves us with the problem that scrolling is no longer possible and content at the end of the modal is simply cut off and no longer displayed (see minimal reproduction - open Modal1, which has the same content as Modal2 - the last dropdown is not displayed at all).
In #1812 there was a pull-request which have the same problem and was closed because of broken scrolling.

@niclas18 niclas18 added the bug Something isn't working label Sep 8, 2023
@felix-ico felix-ico added question Further information is requested and removed question Further information is requested labels Oct 18, 2023
@ghost
Copy link

ghost commented Feb 13, 2024

Any updates here?

@radonyizsolt
Copy link

Having the same issue. Using angular. Any updates on this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants