I am creating a sub dropdown and I want to make it open in the right direction but it is opening at the same position. When I am using left: 100% it is opening in the left direction and working correctly but not when using the right direction.
Here is the code:
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
Action
<span class="caret"></span>
</button>
<ul class="dropdown-menu" style="margin-left:-70px;">
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">
<i class="fa fa-hand-o-left" aria-hidden="true" style="padding-right:10px;"></i>
Edit-file
</a>
<ul class="dropdown-menu" style="top: 0px;Right:100%;text-align:right;">
<li>action</li>
<li> sub action</li>
</ul>
</li>
</ul>
</div>
The dropdown menu is not opening in the right direction.
<style>right: 100%</style>
Related
Because I am trying to get the Text to remain a link and the dropdown toggle to open the dropdown, which, I've managed to achieve. But it causing Dropdown-2 to toggle/open Dropdown-1. And only Dropdown-1 is working.
Basically, can't figure out why its only opening Dropdown-1 only which ever Dropdown I click
I'm using Bootstrap 4.4.1
You can see the Pen here https://codepen.io/cr8tivly/pen/MWavBJr
This is the markup
<nav class="navbar navbar-expand-lg navbar-light">
<ul class="row row-cols-4 navbar-nav main relative list-unstyled col-6">
<li class="col nav-item dropdown" data-toggle="dropdown" aria-expanded="false">
<a class="" href="http://google.com">Dropdown-1</a>
<ul class="dropdown-menu">
<li>item-1-one</li>
<li>item-2-one</li>
<li>item-3-one</li>
<li>item-4-one</li>
</ul>
</li>
<li class="col nav-item dropdown" data-toggle="dropdown" aria-expanded="false">
<a class="" href="http://google.com">Dropdown-2</a>
<ul class="dropdown-menu">
<li>item-1-two</li>
<li>item-2-two</li>
<li>item-3-two</li>
<li>item-4-two</li>
</ul>
</li>
<li class="col">Three</li>
<li class="col">Four</li>
</ul>
</nav>
The problem is data-toggle="dropdown" should be on the a. Check the documentation here.
Instead of:
<li class="col nav-item dropdown" data-toggle="dropdown" aria-expanded="false">
<a>Dropdown-1</a>
Use:
<li class="col nav-item dropdown" aria-expanded="false">
<a data-toggle="dropdown">Dropdown-1</a>
Updated pen here.
If you want the plus sign to open the dropdown and the text to open a link you can do this:
<li class="col nav-item">
<div class="d-flex">
<a class="btn btn-link" href="http://google.com">Dropdown-2</a>
<button class="btn btn-light dropdown" id="d2" data-toggle="dropdown" aria-expanded="false">+</button>
<ul class="dropdown-menu" aria-labelledby="d2">
<li>item-1-two</li>
<li>item-2-two</li>
<li>item-3-two</li>
<li>item-4-two</li>
</ul>
</div>
</li>
I have some values in a dropdown list but I want to disable some of them.
Here I found a solution like if we add disabled style to <a> it will be disabled. I tried same for dropdown element B but it didn't work.
Help if I am wrong somewhere.
Please find below code snippet for reference,
<div class="dropdown">
<button class="fa fa-plus plusIcon dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
</button>
<div class="dropdown-menu pull-right">
<span class=" fa fa-cube dropdown-header"> Dropdown Values </span>
<span class="divider"></span>
<a class="dropdown-item">A</a>
<a class="dropdown-item disabled">B</a>
<a class="dropdown-item">C</a>
</div>
</div>
try it with list items instead. working for me
<ul class="dropdown-menu pull-right">
<li>Normal</li>
<li class="dfgdfgdf disabled">Disabled</li>
<li class="active">Active</li>
<li>Normal</li>
</ul>
Check your lib js and css reference
just add href="#"
It's working fine.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="dropdown">
<button class="fa fa-plus plusIcon dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">dropdown
</button>
<div class="dropdown-menu pull-right">
<span class=" fa fa-cube dropdown-header"> Dropdown Values </span>
<span class="divider"></span>
<a class="dropdown-item" href="#">A</a>
<a class="dropdown-item disabled" href="#">B</a>
<a class="dropdown-item" href="#">C</a>
</div>
</div>
I wanted to show a dropdown on click of the img icon but the dropdown is not opening on click, Here is my code.
<div class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="user-image" style="background-image: url('../images/rafi.jpg');"></span>
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>
<div class="profile-pic">
<img src="images/rafi.jpg" alt="Rafi Ali Khan">
</div>
</li>
<li>
<h3>{{$scope.userLocalData[0].uname}}</h3></li>
<li>Profile</li>
<li>Log Out</li>
</ul>
</div>
Your code contains some invalid HTML markup. For example, I assume you mean role="button" instead of type="button" for the anchor element. Also, you should use href="#" or data-target="#" instead of href="javascript:void(0);". You could try this:
<div class="dropdown">
<a href="#" class="dropdown-toggle" role="button" id="dropdownMenu1" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="user-image" style="background-image: url('../images/rafi.jpg');"></span>
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>
<div class="profile-pic">
<img src="images/rafi.jpg" alt="Rafi Ali Khan">
</div>
</li>
<li><h3>{{$scope.userLocalData[0].uname}}</h3></li>
<li>Profile</li>
<li>Log Out</li>
</ul>
</div>
I got a different problem. My Navbar order is gone backward. So I changed code order to 3-2-1 instead of 1-2-3 for showing 1-2-3. This is my code
<div class="collapse navbar-collapse" id="navbar-ex-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-expanded="false">Hesap <i class="fa fa-caret-down"></i></a>
<ul class="dropdown-menu" role="menu">
<li>
Ayarlar
</li>
<li class="divider"></li>
<li>
<a>Bilgisayara Son Erişim : 22:22:39 - 10.07.2015</a>
</li>
<li>
Çıkış Yap : scrappy#kodevreni.com
</li>
</ul>
</li>
</ul>
<a class="btn btn-link navbar-btn navbar-right">Kayıtlar</a>
<a class="btn btn-link navbar-btn navbar-right">Ekran Görüntüsü</a>
<a class="btn btn-link navbar-btn navbar-right">Yönetim</a>
</div>
I want to make it like this "Yönetim > Ekran Görüntüsü > Kayıtlar > Hesap (dropdown)". But It makes it backward so I changed the code upside down. But the problem is it shows as normal in mobile drop down button...
You can define your a tag float right as like this .
a.btn.btn-link.navbar-btn.navbar-right{float:right;}
<a class="btn btn-link navbar-btn navbar-right">Kayıtlar</a>
<a class="btn btn-link navbar-btn navbar-right">Ekran Görüntüsü</a>
<a class="btn btn-link navbar-btn navbar-right">Yönetim</a>
Hello please check this method it will work
<div class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Yönetim</li>
<li>Ekran Görüntüsü</li>
<li>Kayıtlar</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header"></li>
<ul class="dropdown-menu">
<li>Ayarlar</li>
<li>Kayıtlar</li>
<li>Bilgisayara Son Erişim : 22:22:39 - 10.07.2015</li>
<li>Çıkış Yap : scrappy#kodevreni.com</li>
</ul>
</div>
I'm not sure what I'm doing wrong in my code here, but it's this or CSS related. I'm not sure what CSS setting this would be, but here is my navbar section of my html code.
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
TTT Stats
<span class="caret"></span>
</button>
<a class="navbar-brand" href="index.php">Scoreboards</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="index.php?page=tttkills">Total TTT Kills</a>
</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="index.php?page=tttdeaths">Total TTT Deaths</a>
</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="index.php?page=traitorkills">TTT kills as a traitor</a>
</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="index.php?page=traitorskilled">Traitors killed as an innocent/detective</a>
</li>
</ul>
</div>
<div class="dropdown2">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-expanded="true">
Other
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
<li role="presentation"><a role="menuitem" tabindex="-1" href="index.php?page=playtime">Time Tracker</a>
</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="index.php?page=phkills">Total Prophunt Kills</a>
</li>
</ul>
</div>
(If anyone is wondering about the names, its for a garry's mod TTT server)
With that code, here is what the complete navbar looks like.
http://i.imgur.com/75cPTRh.png
I would want the two dropdown buttons side by side on that navbar. Now when they are like that, this leads into my next question tied into this. How do you work bootstrap's dropdown CSS if you have more than one button?
This is what I have in my css at the bottom to align the dropdown by the button, so that it is centered correctly below the button and not way over stuck to the left.
.dropdown-menu {
right: 68%;
left: 10%;
}
If there is more than one button, it still centers all buttons to that point on the page. How do I edit their positions individually?
Add btn-group class
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.php">Scoreboards</a>
</div>
<div class="btn-group">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
TTT Stats <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li role="presentation"><a role="menuitem" tabindex="-1" href="index.php?page=tttkills">Total TTT Kills</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="index.php?page=tttdeaths">Total TTT Deaths</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="index.php?page=traitorkills">TTT kills as a traitor</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="index.php?page=traitorskilled">Traitors killed as an innocent/detective</a></li>
</ul>
</div>
<div class="btn-group dropdown2">
<button type="button" class="btn btn-default dropdown-toggle" id="dropdownMenu2" data-toggle="dropdown">
Other <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li role="presentation"><a role="menuitem" tabindex="-1" href="index.php?page=playtime">Time Tracker</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="index.php?page=phkills">Total Prophunt Kills</a></li>
</ul>
</div>
</div>
</div>
</nav>
To answer your first question,
you can place your dropdowns inside a structure like this
<div class="container">
<div class="row">
<div class="col-md-2"> <!-- markup for dropdown 1 --> </div>
<div class="col-md-2"> <!-- markup for dropdown 2 --> </div>
</div>
</div>
You can use col classes like these to make the layout of your page using bootstrap's grid system.
To learn more about them, visit:
http://getbootstrap.com/css/#grid