I have cart in my top menu, using push-right and my problem is that the dropdown bubble falls out of the page. I am trying to align the bubble right, so that it right-aligns with 'click'
like this
HTML:
<div class="cart pull-right">
<ul class="nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">CLICK</a>
<div class="dropdown-menu">
STUFF
</div>
</li>
</ul>
</div>
Bootstrap 5+ (Update June 2022)
dropdown-menu-right has been replaced with dropdown-menu-end
<div class="dropdown-menu dropdown-menu-end">
STUFF
</div>
https://getbootstrap.com/docs/5.2/components/dropdowns/#menu-alignment
Bootstrap 3.1+
Adding the class .dropdown-menu-right to the same div containing the class dropdown-menu:
<div class="dropdown-menu dropdown-menu-right">
STUFF
</div>
http://getbootstrap.com/components/#dropdowns-alignment
Bootstrap 2.3 & 3.0
Add the class .pull-right to the same div containing the class dropdown-menu
<div class="dropdown-menu pull-right">
STUFF
</div>
This seems to work for me using bootstrap 3.0
This can be solved with the bootstrap class dropdown-menu-right with dropdown-menu that is specifically for this problem that uses the css properties right: 0; and left: auto; to right align it.
This solution is working for me.
Source - http://getbootstrap.com/components/#btn-dropdowns-dropup (go to developer tools for this)
<div class="dropdown-menu dropdown-menu-right">
This is still working in boostrap 4.2.1 :)
in bootstrap v 3.1.0 the answer to this question is different.
jsfiddle
<div class="dropdown-menu pull-menu-right">
STUFF
</div>
ok got it!
position:relative;left:0 on <ul class="dropdown-menu">
Related
I am using below bootstrap code for a drop-down button. it's working for dropdown but is not responsive on mobile devices.
how to make it responsive.
<div class=" col-sm-4 col-xs-6">
<div class="guu">
Login
<div class="dropdown">
<button class="dropbtn boxed-btn blank">Register</button>
<div class="dropdown-content">
Left Side
Right Side
</div>
</div>
</div>
</div>
</div>
Thanks in advance.
You should make a list !
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
as written here :
https://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp
#waqar, please provide a working snippet so that we can see the issue with responsiveness, please have a look at the below working snippet, see if it helps you :)
Note: follow the documentation of the bootstrap dropdown, that will resolve the issue you are facing,
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Menu
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Choice1</li>
<li>Choice2</li>
<li>Choice3</li>
<li class="divider"></li>
<li>Choice..</li>
</ul>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
Using bootstrap I'd like to show combobox which should expand and show its items into visible part of web page.
Given following snippet:
<div class="row">
<div class="col-xs-5">I contain long label</div>
<div class="col-xs-3"></div>
<div class="col-xs-4">
<div class="dropdown">
<button class="btn btn-default btn-block dropdown-toggle" type="button" data-toggle="dropdown">
<span>Options</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>This is very long text which normally overlays box on right</li>
</ul>
</div>
</div>
</div>
jsfiddle here
When dropdown button is expanded it overflows on right side and causes scrollbar to show.
How it would be possible to utilize free space on left side - e.g. make <ul> and <li> overflow original combobox header on other side and so prevent scrollbar to appear?
Just add class dropdown-menu-right to your ul item like
<ul id="migratorAvailableBuildings" class="dropdown-menu
migratorDropDownRight dropdown-menu-right"
Fiddle
adding .pull-right to ul.dropdown-menu should do it, updated fiddle http://jsfiddle.net/hku8a8nf/3/
I'm creating a side nav bar that's on the left side of my page. Within that nav bar, I have a couple dropdown menus that I would like to open to the right instead of below. I've read of using data-toggle="popover", but is there a way using dropdowns instead?
thanks
Though your question is not clear as there is no code but according your description add the below list inside your dropdownlist below one is in bootstrap
<ul class="nav nav-stacked">
<li>
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Menu
<i class="icon icon-caret-right"></i>
</a>
<ul class="dropdown-menu">
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
</ul>
</div>
</li>
</ul>
see the below fiddle
demoFiddle
And if You only want to html css then
try the below fiddle hope it helps.
csshtml dropdown fiddle
I'm creating the following web app: https://mobigas.herokuapp.com/ and I'm having some problems with its css.
When you place your mouse over the "ENTRAR" link it displays the Sign In form in a wrong position (its left margin should be aligned to the left margin of the link).
And also, I tried to make the DIV with the map use the rest of the available visible area, but with no luck.
Here is the HTML of the menu and the CSS, however, I think looking at the Heroku link will be more helpful.
<div class="header-nav-main header-nav-main-light header-nav-main-effect-1 header-nav-main-sub-effect-1 collapse">
<nav>
<ul class="nav nav-pills" id="mainNav">
<li class="dropdown dropdown-mega dropdown-mega-signin signin" id="headerAccount">
<a class="dropdown-toggle" href="page-login.html">
<i class="fa fa-user"></i> ENTRAR
<i class="fa fa-caret-down"></i><i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu">
<li>
<div class="dropdown-mega-content">
<div class="row">
<div class="col-md-12"> <!--content-->
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
</nav>
</div>
The map div is inside the <div class="body"> below the <header> element.
<div role="main" class="main">
<!-- Google Maps -->
<div id="googlemaps" class="google-map full-height mt-none mb-sm"></div>
</div>
This is a customization of the Porto template I've bought on ThemeForest and it uses Bootstrap 3.
UPDATE
Currently the <li class="dropdown dropdown-mega dropdown-mega-signin signin"> element and the <ul class="dropdown-menu"> are using position: static, and changing the dropdown-menu as another user suggested made the dropdown-menu smaller.
I've increase the width of the dropdown-menu and fixed the width of the <a class="dropdown-toggle">, but this made the Google Maps div to go down.
Well first to the sign in Form:
You can achieve the postitioning by giving .dropdown-menu a relative position
.dropdown-menu{
position: relative;
top: 0px;
left: 0px;
}
This way the position is calculated relative to the link.
I can easily use Bootstrap to create a button dropdown such as the following:
<div class="btn-group">
<button class="btn">Action</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
content goes here
</ul>
</div>
However, this creates a button and block element (?).
Is it possible to use Bootstrap's button dropdwon to create normal text (best to be inline), clicking on which produces a dropdown?
I am not talking about Bootstrap tooltip. I am hoping to use the dropdown to hold a more complex layout.
Thanks for any idea or suggestion!
So you want a link instead of a button to toggle the dropdown? use this markup:
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
<ul class="dropdown-menu">
You can add any content here
</ul>
</div>
You can also add
.dropdown {
display: inline-block;
}
To make it appear inline