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.

Sign up for GitHub

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

Jump to bottom

ngb-datepicker needs better CSS specificity, outer class overrides the datepicker chevron #3872

Closed
absalonv opened this issue Oct 16, 2020 · 0 comments · Fixed by #3931
Closed

ngb-datepicker needs better CSS specificity, outer class overrides the datepicker chevron #3872

absalonv opened this issue Oct 16, 2020 · 0 comments · Fixed by #3931
Labels
component: datepicker type: CSS
Milestone
8.0.2

Comments

@absalonv
Copy link

absalonv commented Oct 16, 2020 •
edited
Loading

Bug description:

In our Application we have panels that can be displayed on the right side using the following this selector : sk-panel.right the problems is that the .right class cascades and affects the date picker chevron that uses this selector in ngBootstrap .right .ngb-dp-navigation-chevron.

A solution should be to update the selector to this ngb-dp-arrow.right .ngb-dp-navigation-chevron to avoid this problem.

Link to minimally-working StackBlitz that reproduces the issue:

Here is a demo showing an outer class .right in the datepicker-popup.html file line 2.

image

Versions of Angular, ng-bootstrap and Bootstrap:

Angular: ^9.1.4

ng-bootstrap: ^6.1.0

Bootstrap: ^4.4.1
@absalonv absalonv changed the title ngb-datepicker needs a better CSS specificity, outer class is overriding the chevron ngb-datepicker needs a better CSS specificity, outer class is overrides the datepicker chevron Oct 16, 2020
@absalonv absalonv changed the title ngb-datepicker needs a better CSS specificity, outer class is overrides the datepicker chevron ngb-datepicker needs a better CSS specificity, outer class overrides the datepicker chevron Oct 16, 2020
@absalonv absalonv changed the title ngb-datepicker needs a better CSS specificity, outer class overrides the datepicker chevron ngb-datepicker needs better CSS specificity, outer class overrides the datepicker chevron Oct 16, 2020
@ravi9115 ravi9115 mentioned this issue Dec 26, 2020
Merged
5 tasks
@maxokorokov maxokorokov added this to the 8.0.2 milestone Jan 6, 2021
maxokorokov added a commit to maxokorokov/ng-bootstrap that referenced this issue Jan 7, 2021
@maxokorokov
fix(datepicker): improve right arrow selector specificity
4c2cf1a 
Now using `ngb-dp-arrow.right .ngb-dp-navigation-chevron` instead of `.right .ngb-dp-navigation-chevron`

Fixes ng-bootstrap#3872
maxokorokov added a commit to maxokorokov/ng-bootstrap that referenced this issue Jan 7, 2021
@maxokorokov
fix(datepicker): improve right arrow css selector
a59d6e2 
Now using `ngb-dp-arrow.right .ngb-dp-navigation-chevron` instead of `.right .ngb-dp-navigation-chevron`.

Fixes ng-bootstrap#3872
@maxokorokov maxokorokov mentioned this issue Jan 7, 2021
Merged
maxokorokov added a commit that referenced this issue Jan 8, 2021
@maxokorokov
fix(datepicker): improve right arrow css selector (#3931)
6790a3e 
Now using `ngb-dp-arrow.right .ngb-dp-navigation-chevron` instead of `.right .ngb-dp-navigation-chevron`.

Fixes #3872
maxokorokov pushed a commit to maxokorokov/ng-bootstrap that referenced this issue Apr 18, 2023
@ravi9115 @maxokorokov
fix(datepicker): remove forgotten .right class
8777068 
Forgotten fix for BS 5 migration:
- removes forgotten `.right` class
- adds `.ngb-dp-arrow-next` and `.ngb-dp-arrow-prev`

Fixes ng-bootstrap#3872
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
component: datepicker type: CSS
Projects
None yet
Milestone
8.0.2
Development

Successfully merging a pull request may close this issue.

fix(datepicker): improve right arrow css selector maxokorokov/ng-bootstrap
3 participants
@pkozlowski-opensource @absalonv @maxokorokov