I'm trying to make a down like bootstrap dropdown, but I want to make the div position dynamic, how can I do it according to the screen size?
When IAMBUTTON is clicked, jquery automatically writes the "transform: translate" I have specified below. Likewise, when I click on the "New dropdown" button that I want to do, I want transform: translate to be added.
<div class="col-sm-1 col-12 mb-1 mb-sm-0">
<button class="btn btn-icon btn-outline-secondary" type="button" id="dropdownMenuButton1001" data-bs-toggle="dropdown" aria-expanded="false">
IAMBUTTON
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1001">
<li class="dropdown-item">
<a tabindex="-1" href="#">HTML</a>
</li>
<li class="dropdown-item">
<a tabindex="-1" href="#">CSS</a>
</li>
<li class="dropdown-submenu dropdown-item" v-on:click="openMenu">
<a class="test dropstart" tabindex="-1" data-popper-placement="left-start">New dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu dropstart" data-popper-placement="left-start" style="transform: scale(1);">
<li class="dropdown-item">
<a tabindex="-1" href="#">2nd level dropdown</a>
</li>
<li class="dropdown-item">
<a tabindex="-1" href="#">2nd level dropdown</a>
</li>
</ul>
</li>
</ul>
</div>
position: absolute;
inset: auto auto 0px 0px;
margin: 0px;
transform: translate(1071px, -407px);
Related
I have a bootstrap navbar. I want to put signOut and welcome in the menu bar along with other menu items. Below is the screenshot of my navbar:
I want to put SignOut where the purple arrow is and right beneath "SignOut", I want to put "Welcome userName". I also want to move the logo and company/city name to extreeme left of the nav bar . How can I achieve that? Below is my code:
<nav class="navbar navbar-expand-lg py-5 navbar-dark shadow-sm " style="background-color: #264653;width:100%;" >
<div class="container">
<span class="navbar-brand" style="display:flex;">
<img src="~/Images/InfoOrange.png" alt="ACR" width="70" height="70" class="d-inline-block align-middle mr-2" runat="server" />
<span style="font-size:25px;color:white;"><span style="color:#e9c46a">test City</span><br />test company</span>
</span>
<button type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler"><span class="navbar-toggler-icon"></span></button>
<div id="navbarSupportedContent" class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<%-- <li class="nav-item active">Home <span class="sr-only">(current)</span></li>--%>
<li class="nav-item dropdown nav-item active">
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Users
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Details</a>
<a class="dropdown-item" href="Depatment.aspx">Department</a>
<%-- <a class="dropdown-item" href="#">Sections</a>--%>
</div>
</li>
<li> </li>
<li class="nav-item dropdown nav-item active">
<a class="nav-link dropdown-toggle" href="#" id="admindropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Admin
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="NewBoxFolder.aspx">Box/Folder</a>
<a class="dropdown-item" href="#">Configuration</a>
</div>
</li>
<li> </li>
<li class="nav-item dropdown nav-item active">
<a class="nav-link dropdown-toggle" href="#" id="recordsDropDown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Records
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="FileUpload.aspx">BlockChain Upload</a>
<a class="dropdown-item" href="#">Verify</a>
<a class="dropdown-item" href="DocReport.aspx">Report</a>
<a class="dropdown-item" href="BucketList.aspx">S3 List</a>
</div>
</li>
</div>
<div>
<ul>
<li class="nav-item" style="margin-right:5px" >
<a class="nav-link px-5" href="<%= ResolveUrl("~/Pages/SignOut.aspx") %>">Sign Out</a>
</li>
</ul>
</div>
</div>
</nav>
You can contain this section with a class. In this instance I called it <div class="sign">. Then since your ul is a direct child of the parent you can use .sign > ul in your CSS to target that div. To get it in that position you can simply apply absolute positioning which allows you to define the area of the page. In your application, the top right. You can then add in your Welcome & Username area underneath as other unordered list items.
.sign > ul {
position: absolute;
top: 0;
right: 0;
list-style-type: none;
}
<div class="sign">
<ul>
<li class="nav-item" style="margin-right:5px" >
<a class="nav-link px-5" href="<%= ResolveUrl("~/Pages/SignOut.aspx") %>">Sign Out</a>
</li>
</ul>
</div>
I want to move the first item of the list (logo) to the left, to separate it from the rest of the items. I want it to remain responsive and that the distance from the left margin to the logo is always the same as from the right margin to the last item. Any ideas? I share my code.
Please help!
<nav class="navbar navbar-expand-md sticky-top">
<div class="nav-item-logo-vista-reducida">
<a class="nav-link" href="index.html"><img src="static/img/logo.png" class="logo-premoldeados"></a>
</div>
<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"><img src="static/img/hamb-menu.png" class="hamb-menu" alt="Menú"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav mx-auto text-center">
<li class="nav-item-logo">
<a class="nav-link" href="index.html"><img src="static/img/logo.png" class="logo-premoldeados"></a>
</li>
<li class="nav-item">
<a class="nav-link nav-link-con-hover" href="atermicos.html">Atérmicos</a>
</li>
<li class="nav-item">
<a class="nav-link nav-link-con-hover" href="pisos-y-revestimientos.html">Pisos & Revestimientos</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link nav-link-con-hover" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Mobiliario Urbano
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item nav-link-con-hover" href="bancos.html">Bancos</a>
<a class="dropdown-item nav-link-con-hover" href="cestos.html">Cestos</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link nav-link-con-hover" href="nosotros.html">Nosotros</a>
</li>
<li class="nav-item">
<a class="nav-link nav-link-con-hover" href="contacto.html">Contacto</a>
</li>
</ul>
</div>
</nav>
Wrap your logo into separate logo-parent div and navigation ul in another nav-parent div then wrap this logo-parent and nav-parent into super-parent div. Then set the padding of the super-parent and set display: flex; flex-direction: row; this will align the logo and and nav list side by side and then set margin-left: auto of nav-parent div.
I am using Bootstrap-4 for my new website. I am using the drop-down in multiple places of the page. In the header nav-bar the drop-down works fine but when I use the same drop-down logic inside the page, bootstrap or popper is adding some inline styles, messing up my styles. Is there a way to disable this automatic inline CSS from getting added?
Below is the screenshot of faulty drop-down in the page,
Below is the screenshot of the correct dropdown in the top header.
Edit:
Code
Faulty Dropdown
<div className="pull-right">
<div className="dropdown">
<a
href="#sfsd"
className="dropdown-toggle"
data-toggle="dropdown"
id="dropdownMenuLink"
aria-haspopup="true"
aria-expanded="false"
>
<i className="fa fa-ellipsis-v" aria-hidden="true" />
</a>
<ul className="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
<li className="dropdown-item">
<a href="#">
<i className="fa fa-language mr-2" />
<span>Switch to Arabic</span>
</a>
</li>
<li className="dropdown-item">
<a href="#UpdatePersonalInfo">
<i className="fa fa-user mr-2" />
<span>My Profile</span>
</a>
</li>
<li className="dropdown-item">
<a href="#ChangeSecuritySettings">
<i className="fa fa-cog mr-2" />
<span>My Configuration</span>
</a>
</li>
<li className="dropdown-item">
<a href="login.html">
<i className="fa fa-sign-out mr-2" />
<span>Logout</span>
</a>
</li>
</ul>
</div>
</div>
Correct Dropdown
<div className="user-menu dropdown pull-right">
<a
href="#Menu"
className="dropdown-toggle"
data-toggle="dropdown"
aria-expanded="false"
>
<i className="fa fa-gear fa-spin" />
</a>
<ul className="dropdown-menu dropdown-menu-right">
<li className="dropdown-item">
<a href="#">
<i className="fa fa-language mr-2" />
<span>Switch to Arabic</span>
</a>
</li>
<li className="dropdown-item">
<a href="#UpdatePersonalInfo">
<i className="fa fa-user mr-2" />
<span>My Profile</span>
</a>
</li>
<li className="dropdown-item">
<a href="#ChangeSecuritySettings">
<i className="fa fa-cog mr-2" />
<span>My Configuration</span>
</a>
</li>
<li className="dropdown-item">
<a href="login.html">
<i className="fa fa-sign-out mr-2" />
<span>Logout</span>
</a>
</li>
</ul>
As stated in the docs, you can use the data-display option....
"By default, we use Popper.js for dynamic positioning. Disable this
with static."
Just remember that then you'll have to handle positioning of the dropdown menu.
https://www.codeply.com/go/85fPF73EtF
Related: Bootstrap 4 dropdown menu within accordion
Please add your custom css code (it is not real solution but working )
#media (min-width: 0px) and (max-width: 991px) {
.dropdown-menu.show {
transform: unset !important;
position: unset !important;
}
}
This is a weird frustrating issue, as I'm working on converting code from Bootstrap 3 to 4. Navbar with a button group on the right (user name, login options, etc.)
When the button group is not a part of the navbar (not included in the menu -- I have PHP code that is not shown below that checks for a specific page if the menu (navbar) is to be displayed or not, the dropdown list appears correct -- vertical, etc. If, however, I place the button group in the navbar, the dropdown list goes horizontal.
I am sure this is because some of the code is somehow interfering with other parts, but I cannot figure it out. Stripping out the PHP code, and just showing the HTML for Bootstrap 4, this is what I have -- first with button group without the navbar:
<nav class="nav navbar-light bg-light navbar-right" style="margin-top: 3px !important;">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">hirsch</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
</button>
<div class="dropdown-menu dropdown-menu-right" style="width: 200px;">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href=""> <i class="fa fa-key" aria-hidden="true"></i> Change Password</a>
</li>
<li class="nav-item"><a class="nav-link" href=""> <i class="fa fa-user" aria-hidden="true"></i> Manage User ID</a>
</li>
<li class="nav-item"><a class="nav-link" href=""> <i class="fa fa-sign-out" aria-hidden="true"></i> Logout</a>
</li>
</ul>
</div> <!-- / dropdown-menu -->
</div> <!-- / btn-group -->
</nav> <!-- / navbar-right -->
That code displays as expected. If, however, I insert this before the end of the collapse part of the navbar (or if I put it after, it doesn't seem to matter), it displays horizontally instead, which is ... weird:
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="">Home</a>
</li>
<li class="nav-item" >
<a class="nav-link" href="">Who's Who</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Disclaimer/Copyright</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Contact Us</a>
</li>
</ul> <!-- / navbar-nav -->
<nav class="nav navbar-light bg-light navbar-right" style="margin-top: 3px !important;">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">UserName</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
</button>
<div class="dropdown-menu dropdown-menu-right" style="width: 200px;">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href=""> <i class="fa fa-key" aria-hidden="true"></i> Change Password</a>
</li>
<li class="nav-item"><a class="nav-link" href=""> <i class="fa fa-user" aria-hidden="true"></i> Manage User ID</a>
</li>
<li class="nav-item"><a class="nav-link" href=""> <i class="fa fa-sign-out" aria-hidden="true"></i> Logout</a>
</li>
</ul>
</div> <!-- / dropdown-menu -->
</div> <!-- / btn-group -->
</nav> <!-- / navbar-right -->
</div> <!-- / collapse -->
</nav>
You should be able to copy and paste the code samples and see them if you have the rest of Bootstrap 4 set up. Click the down-caret symbol on the button group, in the first example it is vertical, in the second it is horizontal, but it's the exact same code. I am really confused where the issue is, I've been staring at this for quite some time and cannot find the problem.
Turns out that the Dropdown has changed a bit, and rather than using a UL tag and such:
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href=""> <i class="fa fa-key" aria-hidden="true"></i> Change Password</a>
</li>
<li class="nav-item"><a class="nav-link" href=""> <i class="fa fa-user" aria-hidden="true"></i> Manage User ID</a>
</li>
<li class="nav-item"><a class="nav-link" href=""> <i class="fa fa-sign-out" aria-hidden="true"></i> Logout</a>
</li>
</ul>
It works better (and simpler) with:
<div class="dropdown-menu dropdown-menu-right" style="width: 200px;">
<a class="dropdown-item" href=""> <i class="fa fa-key" aria-hidden="true"></i> Change Password</a>
<a class="dropdown-item" href=""> <i class="fa fa-user" aria-hidden="true"></i> Manage User ID</a>
<a class="dropdown-item" href=""> <i class="fa fa-sign-out" aria-hidden="true"></i> Logout</a>
</div>
My application has 6 dropdowns
This is the code for two of them,(note: i wrapped everything in container1 class,at the start of the code.
<div class="container1">
<div class="row">
<div class="col-sm-2 col-xs-4">
<div class="btn-group" role="group" aria-label="...">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria- expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
</div>
</div>
<div class="col-sm-2 col-xs-4">
<div class="btn-group" role="group" aria-label="...">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
As you see i wrapped everything in a class called container1,it is made by be.
Here is what my class container1 has
.container1 {
margin-right: 200px;
margin-left: 200px;
}
And it works like magic,this is what i get(as you see the space between them is smaller)
Question: My method works well,but it is not responsive,when i make my browser screen smaller.This is what i get
but if i leave it as it is with default bootstrap,with this big space between them,i get an awesome responsiveness.
How would you make the space between dropdowns smaller,and in the same time leave the dropdown to remain responsive as bootstrap by default does,for small devices.
Thank you for your time.
I think the problem with the responsivness comes from .container1 class which decreases the width that col-**-** classes use. If you want your dropdown menus to be in the center of the .row div, use add text-align: center; in the .row div and remove the margin-right: -15px; and margin-left: -15px; from the .row (you can create custom class .margin-ignore { margin: 0 !important; } and add it to the .row div. Also, replace col-xs-4 with col-xs-6 because the dropdown buttons have bigger width that col-xs-4 in some cases. The final result may look like this:
JSFiddle: https://jsfiddle.net/0n8xmy7a/2/
Try resize the screen and look does it fit for you.
If you still does not like how and when the dropdown menus take their new position you can write your own column grid class and there write explicitly the width of screen when the class to trigger and the width of the elements that hold this class.
Good luck!
Instead on using margins, you could use max-width to keep the buttons close together on large screens.
.container1 {
max-width: 800px;
margin: 0 auto;
}