i'm create a leftbar using aside and bootstrap , can i show dropdown-menu to outside aside?
my current code in :
https://jsfiddle.net/q79w5zbj/3/
<aside>(this button dropdown)<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<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>
i want dropdown-menu in outside aside , whats wrong with my code?
dropdown-menu have position: absolute base on class dropdown with position: relative. So if you want dropdown-menu show outside aside, just remove overflow-y:hidden in aside tag.
Example : https://jsfiddle.net/1hrvx9L3/
Related
I have a simple question : when I use dropdown bootstrap https://getbootstrap.com/docs/5.1/components/dropdowns/#alignment-options, if I inspect the element I can see some properties added inline :
position: absolute;
inset: auto auto 0px 0px;
margin: 0px;
transform: translate(0px, -40px);
How can I remove this ?
I want to have my element centered in relation with my button and not on the right or left.
So, for this, want to use the position absolute and top and left not inset. Unless is there another possibility ?
I put bootstrap example behind.
.dropup {
margin-top: 8rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropup
</button>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
<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>
EDIT. I would like to have this :
Thanks a lot far answer.
UPDATED
You can override left and right values on dropdown-menu to achieve it.
For example
.dropup {
margin-top: 8rem;
margin-left: 8rem;
}
.dropdown-menu {
right: auto !important;
left: -50% !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropup
</button>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
<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>
OLD ANSWER
All those inline CSS attributes are under dropdown-menu, so you can easily override it with !important
The !important rule in CSS is used to add more importance to a property/value than normal. In fact, if you use the !important rule, it will override ALL previous styling rules for that specific property on that element!
For example
.dropdown-menu {
inset: auto !important;
}
But you need to be careful with !important. That might cause some CSS problems if you try to style on the same class with the same attribute again on other places
I am trying to create a dropdown list in the navbar that matches the style of the rest of the navbar. I have not overwritten any of the bootstrap classes to my knowledge and I am wondering if there are any classes that have the same styling for a dropdown list.
I have been looking through other articles and most seem to just use a random class and it works correctly. I tried to make a custom CSS class for it but I was unable to successfully match the header.
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Management
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#Url.Action("Index", "Management")">Statistics</a>
<br />
<a class="dropdown-item" href="#Url.Action("Index", "Production")">Production Lines</a>
<br />
<a class="dropdown-item" href="#Url.Action("Index", "Announcement")">Announcements</a>
<br />
<a class="dropdown-item" href="#Url.Action("Index", "TestStation")">Test Stations</a>
</div>
</li>
When creating a dropdown list, is there a special class to use that matches the navbar or do I have to create a custom one?
dropdown-item background color in bootstrap is white and if you want change it you can change it in your page style. you can add this code to your head tag:
.dropdown-item{
background-color: #2e89e5;
color: #fff;
}
Assuming your nav-bar uses the primary color you can give the dropdown the bg-primary class to give it the primary color background (https://getbootstrap.com/docs/4.0/utilities/colors/#background-color)
It's possible your going to have to assign this class to all the ul items individually
Change the styling of the .dropdown-menu class in your style sheet in bootstrap 4.1.3.
I'm working with Bootstrap 4 dropdown and there are about 18 dropdown items.
Because the height is too much, popper.js automatically moves the dropdown away from its original position to the top of the screen. How do I prevent this?
I always want the dropdown to appear right below the button that toggles it.
Thanks
Posting code as requested - ( I'm using C# but the code should convey the point I'm hoping)
<div class="dropdown">
<span class="p-2 text-uppercase font-weight-semi-bold pointer dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
#topMenu.Name
</span>
<div class="dropdown-menu" style="font-size:0.9rem" aria-labelledby="dropdownMenuButton">
#foreach (var subMenu in topMenu.SubMenu)
{
<a class="dropdown-item" href="#Url.Content("~/" + subMenu.Url)">#subMenu.Name</a>
}
</div>
</div>
Bootstrap 4.1
There is a new "display" option that disables popper.js dropdown positioning. Use data-display="static" to prevent popper.js from dynamically changing the dropdown position...
Bootstrap 4.0
There are some issues with popper.js and positioning.
I've found the solution is to position-relative the .dropdown, and set it as the data-boundary="" option in the dropdown toggle:
https://www.codeply.com/go/zZJwAuwC5s
<div class="dropdown position-relative" id="dd">
<button type="button" data-boundary="dd" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 1</a>
...
</div>
</div>
The boundary is set to the id of the dropdown. Read more about data-boundary.
Related questions:
Bootstrap 4: Why popover inside scrollable dropdown doesn't show?
Scrolling a dropdown in a modal in Bootstrap4
I achieved this in Bootstrap 4.3.1 by adding data-flip="false" to the dropdown element.
ex:
dropdown
ZimSystems got it almost right in Bootstrap 4.1. To disable the dropdown changing direction while open, aka. it's x-placement="bottom-end", you should use the "flip" option, instead of the "display" option.
Display static disables the positioning entirely, while flip only disables the LIVE checks, that flip the dropdown upside down, when you scroll towards the top of the screen.
In options, you can try to change dropupAuto : true to dropupAuto : false.
https://developer.snapappointments.com/bootstrap-select/options/#bootstrap-version
I'm a beginner and I'm trying to create a navbar on bootstrap 4 that changes it's display on a mobile device
On a full-width display, I want the
Logo (left aligned)
Links (left aligned)
Profile picture dropdown menu (right aligned)
On a tablet display, I want the
Logo (centred)
Links (left-aligned and collapsed into hamburger menu)
Profile picture dropdown menu (right aligned) - essentially unchanged
I have managed to achieve most of what I want, except when clicking the hamburger menu, the profile picture menu gets pushed down, which is not what I want.
https://www.bootply.com/6a0BWZivYL
My question is, how do I fix the profile picture dropdown menu to the right-side.
I have tried moving the code for navbar-collapse collapse after the profile picture, which works for when in tablet display, but produces undesirable results in full-width display. Namely that it is no longer right-aligned.
I haven't been able to find any specific examples of this online. The closest I have found https://bootsnipp.com/snippets/gmQR0. This difference is that I don't think I need two collapsible menus, just the 1 collapsible + 1 fixed dropdown menu.
In the given design you have kept profile UL below the button div navigation list.
Please place it before button and change the class from float-md-right to float-right.
Add float-left class to button to make alignment left.
Edit
First design the nav-bar for small screen, then add media queries for dropdown-link to float right.
<head>
<style>
#media(min-width:769px){
.drop-class{
position: absolute;
right: 20px;
}
}
</style>
</head>
<body>
<div>
<nav class="navbar navbar-expand-lg navbar-light">
<button class="navbar-toggler" type="button" data-
toggle="collapse" data-target="#navbarNavDropdown" aria-
controls="navbarNavDropdown"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="dropdown drop-class">
<a class="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>
</div>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
</nav>
</div>
An MVC4 Bootstrap example app shows bullet points placed way ahead of the navigation menu items on the navigation bar. separated by brand, even. The bullets appears to be related to tags CSS. Does any one have a clue about removing the bullets? The menu is displayed by navigationextension.cs
<div class="nav-collapse collapse">
#Html.Navigation()
</div>
You should be able to target the list item (.nav-collapse .li) with the following CSS property:
list-style-type: none;
you can also add class="list-unstyled" to the ul to remove all the bullets.
Removes all default list-style (bullets, left margin, etc.) styling from a or list.
https://www.w3schools.com/bootstrap4/bootstrap_ref_all_classes.asp
In case others arrive with a similar issue in Edge with .dropdown-menu
/* Edge fix */
.dropdown-menu,
.dropdown-menu ul {
list-style-type:none;
}
Note: The 2nd selector covers our custom multi-column dropdowns and can be ignored 😉
Add navbar-nav dropdown to the class
Try adding style none to li class <li class="nav-item" style="list-style-type: none;" >
I had the same problem with bullets, plus the <li> elements where invading each other spaces. I solved it by assigning the "nav" class to the <ul> element instead of the "navbar" class I was using.
This is a sample of the working list of elements:
<ul class="nav navbar-nav">
<li>Recipes</li>
<li>Shopping List</li>
</ul>
And this a sample of the list of elements showing up with bullets and overlapped:
<ul class="navbar navbar-nav">
<li>Recipes</li>
<li>Shopping List</li>
</ul>
This is working at least with Bootsrap version 3.
I found the explanation for this is at the treehouse page: What's the difference between nav and navbar?
Simply add the "list-unstyled" to the class of the <li> element.
For example, change this:
<li class="nav-item dropdown">
to this:
<li class="nav-item dropdown list-unstyled">
Example from bootstrap docs
This has a random dot:
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
The only change is I added list-unstyled and there's no dot anymore!
<li class="nav-item dropdown list-unstyled">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>