-
-
Notifications
You must be signed in to change notification settings - Fork 79k
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.
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
Fix dropup in navbar and the caret position accordingly #23520
Conversation
e081743
to
e7cf93c
Compare
Can you take a stab at adding a docs demo for this with a fixed bottom navbar? |
Sure I'll take time to give some love to this PR 😄 |
Also, what about #22786? |
e7cf93c
to
893b423
Compare
I added an example 😉 I'll take a look at this issue |
893b423
to
b987580
Compare
@mdo this PR fix now the issue you mentionned 👍 I think I've done my work on this PR if you have time to review my CSS before merging this one that's would be great 😄 |
b987580
to
98ccdc4
Compare
scss/_navbar.scss
Outdated
|
||
.dropdown-toggle { | ||
&::after { | ||
border-top: 0; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Properties should be ordered border-bottom, border-top
scss/_navbar.scss
Outdated
} | ||
|
||
.dropdown-toggle { | ||
&::after { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Selector should have depth of applicability no greater than 2, but was 4
Nesting should be no greater than 4, but was 5
223a01d
to
98ccdc4
Compare
3952292
to
2cc1212
Compare
If you found something wrong here in my CSS @mdo and @andresgalante feel free to correct it 😄 I'll merge this PR for now |
@Johann-S: the dropup in the example still opens to the bottom. |
I tested that a few minutes ago and the dropup in the example opens to the top 🤔 |
Hmm no sorry I just checked an it opens to the top : Make sure you checked on that URL : http://localhost:9001/docs/4.0/examples/navbar-bottom/ |
OK, it's because of the dist files. It seems to work fine. |
68d3c9b
to
3842139
Compare
@@ -74,6 +74,13 @@ | |||
position: static; | |||
float: none; | |||
} | |||
|
|||
.dropdown-toggle { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
For me this change is unnecessary. Why we need redefine .dropdown-toggle
in .navbar?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
because without that we cannot have the up caret
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I just tested and works without these lines.
Still I don't understand why this is needed :)
@@ -144,6 +151,18 @@ | |||
padding-right: 0; | |||
padding-left: 0; | |||
} | |||
|
|||
.dropup { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sorry @Johann-S but here is another issue.
This should be moved to media-breakpoint-up
because currently it only works with .navbar-expand
but not with .navbar-expand-{sm,md}
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
you're right ! Can you open an issue which explain that ? Or a PR if you want to fix that ? 👍
We choose to disable Popper.js style for Dropdown in navbar but we didn't handle the case when we have a dropup in a bottom navbar and the change of the dropdown caret
Fixes #23429
Fixes #22786