bootstrap dropdown ::after pseudo-element align right - html

I am currently using btn-block on my .dropdown-toggle button to make it the full width.
However, I don't like how the ::after pseudo element only sits a fixed width away from the button content.
I am weak with psuedo element styling but is there a way that I can get the dropdown arrow to 'float' and be aligned a fixed width from the right side of the dropdown?
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>

You can make the :after element position: absolute; and align it to the right like so...
.dropdown-toggle::after {
position: absolute;
right: 20px;
top: 50%;
margin-top: -5px;
}
The top and margin-top elements are to help vertically align the arrow no matter the height of the dropdown.

Related

Is there any way to change Bootstrap CSS icon on mouse hover

I have a Bootstrap dropdown in Angular. For dropdown menu I am using bootstrap css chevron-right icon. When user mouse hover, I want to change it to chevron-down icon.
This is my code
<style>
.dropdown:hover .dropdown-menu{
display: block;
}
.dropdown-menu{
margin-top: 0;
}
</style>
<div class="col-md-3 changeIcon">
<div class="nav-item dropdown">
<a href="#" data-toggle="dropdown">A-E
<i style="float: right;" class="bi bi-chevron-right"></i>
</a>
<div class="dropdown-menu">
Inbox
Sent
</div>
</div>
</div>
These css classes I tried but its not working
.changeIcon{
content: '\F285';
}
.changeIcon2:hover i::before{
content: "\uF356";
}
This is my UI, when user mouse hover, dropdown menus showing up but along with that I am not able to change right side icon
How can I do that ?
I have different solution for you.Here what i have try for you.
<div class="dropdown">
<button class="btn" type="button" data-bs-toggle="dropdown" aria-expanded="false">
A-E
<i class="bi bi-chevron-right icon"></i>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
Apply following css to it
.btn.show .icon::before {
transform: rotate(90deg);
transition: transform 0.5s;
}
And if you want to rotate icon on dropdown hover then replace above css with this one.
.dropdown:hover .icon::before {
transform: rotate(90deg);
transition: transform 0.5s;
}
Hope you like it :)

How to align a Bootstrap Dropright menu such that it opens upwards (unlike the default downwards direction)?

My drop-right menu drops towards the right correctly, but downwards, which causes it to hide under my page. I want it to open upwards instead of downwards.
I tried fiddling around with CSS, adding bottom:0 to the dropdown-menu, but it didn't work. I have also tried nesting a dropdown-menu-right in a dropup but the displayed menu is not in line with the button (it is at the top-right diagonal).
This my complete code for the dropdown:
<div class="dropright" style="position: relative;">
<button class="btn btn-primary btn-block" style="font-size: large;" onblur="this.nextSibling.style.display='none'" onclick="this.nextSibling.style.display='block'" >
<img src="/assets/Images/Avatar.jpg" class="rounded-circle" style="height:30px;width:30px; padding: 0;" alt="Avatar">
</button>
<div class="dropdown-menu" style="position: absolute;">
<a class="dropdown-item" href="">Action</a>
<a class="dropdown-item" href="">Another action</a>
<a class="dropdown-item" href="">Something else here</a>
<a class="dropdown-item" href="">Something else here</a>
</div>
</div>
This is what I want
This is the problem
Are you expecting like
.dropup .dropdown-menu {
top: auto;
left: 35px;
bottom: 100%;
margin-bottom: -36px !important;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<h2>Dropdowns</h2>
<p>The .dropup class makes the dropdown menu expand upwards instead of downwards:</p>
<br><br><br>
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>APPLICATIONS</li>
<li class="divider"></li>
<li>Bitbucket</li>
<li>Jira </li>
</ul>
</div>
</div>

Having difficulty in moving Nav bar to the left using bootstrap4

Hi everyone i have a code for nav-bar and i want to move it to the left side of
the form, its staying on the right side of the form,
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle " type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown button
</button>
<div class="dropdown-menu " aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
i have tried using floating to the left and using align-left it's still staying on the right side of the form what alternative can solve this issue?/ Thank you.
Kindly update your whole HTML page with navbar code. As running the code you have given is showing on left side of the browser.
Take a look:

how to make the dropdown menu transparent with only visible item to be the arrow inside the button and the right border?

here i need the dropdown button to be transparent but if i do background:transparent; only visible thing is the border, i need it to be the arrow icon that appears inside the dropdown button and the right border.
here is the code
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Regular</a>
<a class="dropdown-item" href="#">Link 2</a>
</div>
</div>
<< This is what I need it to be
Something like this?
.dropdown-toggle {
background:transparent;
color: black;
border-width: 0 1px 0 0;
}
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Regular</a>
<a class="dropdown-item" href="#">Link 2</a>
</div>
</div>
Here with bootstrap: https://codepen.io/anon/pen/EGZNKd
The arrow is white, so when you make the background transparent, if the background behind that is also white you can't see it. So I made it black to make it visible.
Note: this css selector will change all dropdown buttons so you'll probably want to make it more specific.
Edit: updated to show the right border.

How to open dropdown on hover in bootstrap 4

Right now my navigation drop down can open on click.
I want it to open upon hover. How do I do this?
simply add following css
.dropdown:hover>.dropdown-menu {
display: block;
}
fiddle
.dropdown:hover>.dropdown-menu {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</nav>
The css from Znaneswar works great but I would add this line as well.
.dropdown-menu {
margin: -0.125rem 0 0;
}
The dropdown is spaced 0.125rem away from the element that spawns the dropdown. So you'll have a hard time navigating from the link to the dropdown without it disappearing when you mouse over that gap.
And if you want the dropdown link to actually be a link as well, just remove this attribute from the a tag
data-toggle="dropdown"
Below css works fine
.dropdown:hover>.dropdown-menu {
display: block;
}
.dropdown>.dropdown-toggle:active {
pointer-events: none; // Add this, to prevent clicking dropdown's default click function
}
<div class="dropdown">
...
</div>
You could try this with jQuery:
$(".dropdown").hover(function(){
$(this).addClass("show");
});
I got this solution using Angular with ng-bootstrap and bootstratp:
CSS:
.dropdown:hover>.dropdown-menu {
display: block;}
HTML:
<li class="nav-item dropdown" ngbDropdown>
<a class="nav-link h5 dropdown-toggle" id="navbarDropdown" ngbDropdownToggle>
Parent</a>
<div ngbDropdownMenu class="dropdown-menu">
<a class="dropdown-item" href="#" ngbDropdownItem>Child1</a>
<a class="dropdown-item" href="#" ngbDropdownItem>Child2</a>
</div>
</li>
So, if don't use the CSS property, the dropdown will happens only when click on parent link.
While I appreciate the answers to this question, the answers given are seemingly not the best. This is because these answers are disregarding accessibility.
Notice that, when using only CSS to make the dropdown show on .nav-link hover, the aria-expanded parameter on the .nav-link element does not change to true.
You must use some JS then in order to have the full range of accessibility functionality.
Below is what I have come up with to combat this.
// header_scripts.js
$('body').on('hover', '.nav-item.dropdown', function() {
$(this).find('.dropdown-toggle').dropdown('toggle');
});
/* header.css */
.dropdown-menu {
margin: 0 0 0 0;
}
The above code should provide the same functionality that you are seeing in the other answers to this question, but with full accessibility concerns.
The CSS I gave is very general and has pretty low specificity so work with that as you see fit.