mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 11:41:20 +08:00
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
This commit is contained in:
@ -142,8 +142,22 @@
|
|||||||
background: var(--background);
|
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 {
|
.action-sheet-group-cancel {
|
||||||
|
@ -91,10 +91,24 @@
|
|||||||
overscroll-behavior-y: contain;
|
overscroll-behavior-y: contain;
|
||||||
}
|
}
|
||||||
|
|
||||||
.alert-checkbox-group::-webkit-scrollbar,
|
/**
|
||||||
.alert-radio-group::-webkit-scrollbar,
|
* Scrollbars on mobile devices will be hidden.
|
||||||
.alert-message::-webkit-scrollbar {
|
* Users can still scroll the content by swiping.
|
||||||
display: none;
|
* 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 {
|
.alert-input {
|
||||||
|
Reference in New Issue
Block a user