Skip to content

Commit 60f3d65

Browse files
authored
fix(alert, action-sheet): show scrollbar for long list of options (#28369)
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
1 parent 7ecd41f commit 60f3d65

File tree

2 files changed

+34
-6
lines changed

2 files changed

+34
-6
lines changed

core/src/components/action-sheet/action-sheet.scss

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -142,8 +142,22 @@
142142
background: var(--background);
143143
}
144144

145-
.action-sheet-group::-webkit-scrollbar {
146-
display: none;
145+
/**
146+
* Scrollbars on mobile devices will be hidden.
147+
* Users can still scroll the content by swiping.
148+
* If a user has a fine pointing device, such as a
149+
* mouse or trackpad, then scrollbars will be
150+
* visible. This allows users to scroll the
151+
* content with their pointing device.
152+
* Otherwise, the user would have to use the
153+
* keyboard to navigate through the options.
154+
* This may not be intuitive for users who
155+
* are not familiar with keyboard navigation.
156+
*/
157+
@media (any-pointer: coarse) {
158+
.action-sheet-group::-webkit-scrollbar {
159+
display: none;
160+
}
147161
}
148162

149163
.action-sheet-group-cancel {

core/src/components/alert/alert.scss

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -91,10 +91,24 @@
9191
overscroll-behavior-y: contain;
9292
}
9393

94-
.alert-checkbox-group::-webkit-scrollbar,
95-
.alert-radio-group::-webkit-scrollbar,
96-
.alert-message::-webkit-scrollbar {
97-
display: none;
94+
/**
95+
* Scrollbars on mobile devices will be hidden.
96+
* Users can still scroll the content by swiping.
97+
* If a user has a fine pointing device, such as a
98+
* mouse or trackpad, then scrollbars will be
99+
* visible. This allows users to scroll the
100+
* content with their pointing device.
101+
* Otherwise, the user would have to use the
102+
* keyboard to navigate through the options.
103+
* This may not be intuitive for users who
104+
* are not familiar with keyboard navigation.
105+
*/
106+
@media (any-pointer: coarse) {
107+
.alert-checkbox-group::-webkit-scrollbar,
108+
.alert-radio-group::-webkit-scrollbar,
109+
.alert-message::-webkit-scrollbar {
110+
display: none;
111+
}
98112
}
99113

100114
.alert-input {

0 commit comments

Comments
 (0)