javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 03:32:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(alert, action-sheet): show scrollbar for long list of options (#28369)

Browse Source 
Issue number: resolves #18487 

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Web-based users do not get a scrollbar when:

- alert has a long list of inputs (this also happens on `ion-select`
with the alert interface)
- `ion-select` uses the action-sheet interface and has a long list of
options

This makes it difficult for users to navigate through the options by
forcing them to use their keyboards. Some users may also not be used to
using their keyboards for navigation. Additionally, this can lead to
potential confusion that there are no other options.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

Web-based users get a scrollbar when:

- alert has a long list of inputs (this also happens on `ion-select`
with the alert interface)
- `ion-select` uses the action-sheet interface and has a long list of
options

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

The issue was filed for the alert interface but it's also happening on
the action-sheet interface.

Dev build: 7.5.1-dev.11697570585.1774584d
This commit is contained in:
Maria Hutt
2023-10-23 10:47:22 -07:00
committed by GitHub
parent 7ecd41f385
commit 60f3d65794
2 changed files with 34 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
core/src/components/action-sheet/action-sheet.scss
View File

@ -142,8 +142,22 @@
background: var(--background);
}
.action-sheet-group::-webkit-scrollbar {
display: none;
/**
* Scrollbars on mobile devices will be hidden.
* Users can still scroll the content by swiping.
* If a user has a fine pointing device, such as a
* mouse or trackpad, then scrollbars will be
* visible. This allows users to scroll the
* content with their pointing device.
* Otherwise, the user would have to use the
* keyboard to navigate through the options.
* This may not be intuitive for users who
* are not familiar with keyboard navigation.
*/
@media (any-pointer: coarse) {
.action-sheet-group::-webkit-scrollbar {
display: none;
}
}
.action-sheet-group-cancel {

22
core/src/components/alert/alert.scss
View File

@ -91,10 +91,24 @@
overscroll-behavior-y: contain;
}
.alert-checkbox-group::-webkit-scrollbar,
.alert-radio-group::-webkit-scrollbar,
.alert-message::-webkit-scrollbar {
display: none;
/**
* Scrollbars on mobile devices will be hidden.
* Users can still scroll the content by swiping.
* If a user has a fine pointing device, such as a
* mouse or trackpad, then scrollbars will be
* visible. This allows users to scroll the
* content with their pointing device.
* Otherwise, the user would have to use the
* keyboard to navigate through the options.
* This may not be intuitive for users who
* are not familiar with keyboard navigation.
*/
@media (any-pointer: coarse) {
.alert-checkbox-group::-webkit-scrollbar,
.alert-radio-group::-webkit-scrollbar,
.alert-message::-webkit-scrollbar {
display: none;
}
}
.alert-input {