I have the following some clickable sub list of a button which is in the navbar of the website having some modals in different urls such as url.com/mystock#modal-batch-stock-add.
Navbar button list
<div class="btn">
<a class="btn btn-success dropdown-toggle" data-toggle="tooltip" title="Hooray!" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-plus"></i>
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink" style="">
<a class="dropdown-item" href="#">First Link</a>
<a class="dropdown-item" href="#">Second Link</a>
<a class="dropdown-item" href="#">Third Link</a>
</div>
</div>
A modal example which is in mystock.razor (think of it as just as html typically).
<button type="button" class="btn btn-success" data-toggle="modal" data-backdrop="static" data-target="#modal-batch-stock-add"><!--!--><i class="fas fa-plus"></i> ABCDE-DeMO-MODAL</button>
I wish I open the modals which are in different sub-html files and place them in dropdown-items' hrefs. I thought I would write like a class="dropdown-item" href="url.com/mystock#modal-batch-stock-add" but on the address bar when I enter url.com/mystock#modal-batch-stock-add doesn't retrieve the modal.
Related
I have this code:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle buttonForProfile" type="button" id="dropdownMenuButton" data-bs-toggle='dropdown' aria-haspopup="true" aria-expanded="false">
<?php echo $_SESSION['username']; ?>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Profile</a>
<a class="dropdown-item" href="#">Subscriptions</a>
<a class="dropdown-item" href="./php/signout.php">Sign out</a>
</div>
</div>
I added some css and now it looks like this:
When I click on it, the background changes back to default:
How do I change that gray background when the dropdown is toggled?
#dropdownMenuButton:focus {
background-color: //color;
}
PS: btn-secondary gives it the grey color, you don't need it if you're customizing the color.
example photo sidebar
I looking for solution for create sidebar like on above photo.
photo2
After click icon sidebar then display menu.
I have somelike this but I need to add extra menu after click like first screen:
https://www.codeply.com/p/yRugA2FB3I
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu">
<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>
Put this as dropdown list, try to edit css of the dropdown item.
or use this as well:
<!-- Default dropright button -->
<div class="btn-group dropright">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropright
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
it is the element of bootstrap 4 that do dropdown on the right.
I'm currently using bootstrap 4.0. The dropdown menu is at the top right corner of the screen. When the user clicks on the drop down menu, The menu makes the page expand slightly to the right so it shows white space right next to the nav bar.
This is what it looks like:
This is the code that I'm using:
<div class="dropdown dropdown-left">
<button class="btn btn-secondary dropdown-toggle bg-dark" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu bg-dark" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item text-light" href="#">Action</a>
<a class="dropdown-item text-light" href="#">Another action</a>
</div>
</div>
Use this code:
<!-- Default dropright button -->
<div class="btn-group dropright">
<button type="button" class="btn btn-secondary dropdown-toggle" data-
toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropright
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
This is how you do that in BS 4:
Documentation
<div class="btn-group dropleft">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropleft
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
You need to add the alignment class to the .dropdown-menu instead of the container .dropdown element. And the class to add to right align a menu should be .dropdown-menu-right as mentioned in the docs.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle bg-dark" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu dropdown-menu-right bg-dark" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item text-light" href="#">Action</a>
<a class="dropdown-item text-light" href="#">Another action</a>
</div>
</div>
So as I said in the title corners of a bootstrap button are not being rounded and I can't figure out why.
I looked up other posts but none of the found solutions worked for me.
Code (layout.hbs)
...
<!-- navbar-nav -->
<ul class="navbar-nav ml-auto">
<!--Sell Tickets-->
<button type="button" class="btn btn-primary" style="margin-right:20px;">Sell tickets</button>
<!--/Sell Tickets-->
<!-- Currency Dropdown -->
<li class="nav-item dropdown d-none d-md-flex">
<a class="nav-link dropdown-toggle" href="#" role="button" id="dropdownCurrency" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
USD <i class="fa fa-caret-down fa-fw"></i>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownCurrency">
<button class="dropdown-item" type="button">USD</button>
<button class="dropdown-item" type="button">EUR</button>
</div>
</li>
<!-- /Currency Dropdown -->
<!-- Search Toggle -->
<li class="nav-item d-sm-none">
<i class="fa fa-search fa-lg"></i>
</li>
<!-- /Search Toggle -->
<!-- Shopping Cart Toggle -->
<li class="nav-item dropdown ml-1 ml-sm-3">
<a href="#" class="nav-link" data-toggle="modal" data-target="#cartModal">
<i class="fa fa-shopping-cart fa-lg"></i>
<span class="badge badge-pink badge-count">4</span>
</a>
</li>
<!-- /Shopping Cart Toggle -->
<!-- Notification Dropdown -->
<li class="nav-item dropdown ml-1 ml-sm-3">
<a class="nav-link dropdown-toggle" href="#" role="button" id="dropdownNotif" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-bell fa-lg"></i>
<span class="badge badge-info badge-count">3</span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownNotif">
<a class="dropdown-item has-icon" href="#"><i class="fa fa-envelope"></i> 1 New Message</a>
<a class="dropdown-item has-icon" href="#"><i class="fa fa-comment"></i> 2 New Comments</a>
</div>
</li>
<!-- /Notification Dropdown -->
...
Here is the website for full code http://ertagon.cf:3000/
Fixed by adding an inline style margin-right:20px
<button type="button" class="btn btn-primary" style="margin-right:20px; border-radius: 8px;">Sell tickets</button>
Thanks, #Chris W
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>