adopted-ember-addons / adopted-ember-addons/ember-sortable
.visually-hidden class conflicts with bootstrap 5
- Vorherrschende Sprache
- TypeScript
- Sterne
- 299
- Forks
- 159
- Ø Merge
- 4 T. 6 Std.
- Gemergte PRs (30 T.)
- 4
Beschreibung
**Describe the bug**
Both bootstrap 5 and ember-sortable use a `.visually-hidden` class. This results in styles being applied to an `ember-sortable` element that can cause layout issues. Particularly because the bootstrap class makes the element absolutely positioned.
**To Reproduce**
Add `ember-bootstrap` and `ember-sortable` to a project. Configure `ember-bootstrap` to use boostrap 5 and add a `sortable-group`
This span is added by `ember-sortable`
``
Styles for `.visually-hidden` on the span element are (these all come from bootstrap)
```css
.visually-hidden:not(caption), .visually-hidden-focusable:not(:focus):not(:focus-within):not(caption) {
position: absolute !important;
}
.visually-hidden, .visually-hidden-focusable:not(:focus):not(:focus-within) {
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
```
**Expected behavior**
The span does not have additional styles applied from bootstrap
**Proposal**
I've worked around this in my project by applying more specific styles, however it took me quite some time to track down what was causing a weird behavior in my application so I thought it would help others if this style could be updated to avoid the issue.
I propose renaming `.visually-hidden` to `.ember-sortable-visually-hidden`, The class name does not appear to form any part of an external interface so I think it would be a non-breaking change?
Happy to raise a PR for this if the proposal sounds good?
Beitragsleitfaden
Bewertung
Dieses Issue wurde noch nicht bewertet.