I've run into a problem where my dropdown isn't working in iOS. It works perfectly fine on desktop, but whenever I load up my site on my iPhone, the dropdown menu is nonexistent. Here is my html:
<div class='container visible-xs hidden-md'>
<div class='row well well-sm mobile-well'>
<div class='col-md-12 text-center dropdown'>
<h4 class="dropdown-toggle explore" data-toggle="dropdown" id="dropdownMenu1" aria-haspopup="true" aria-expanded="true">Explore <span class='caret'></span></h4>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Home</li>
<li class='divider'></li>
<li>Menu</li>
<li class='divider'></li>
<li>About</li>
<li class='divider'></li>
<li>Contact</li>
</ul>
</div>
</div>
Not sure if I'm doing something wrong or not, but any help would be greatly appreciated. Thank you!
I've checked this problem ( use my iPhone6 , latest iOS )
"Explore and caret" is visible but isn't work dropdown-menu. cause i forgot to add js code.
In my point of view, you have to check your js code
$(document).ready(function(){
$('.dropdown-toggle').dropdown();
});
http://getbootstrap.com/javascript/#via-javascript-1
Related
Materialize CSS Sidenav works on desktop browser: the sidebar shows up when clicked. But when I tested it on the mobile browser, the menu icon shows, but when clicked it does not open the side bar. The html/css source is given below:
<nav class="white">
<div class="nav-wrapper" >
<a href="/" class="brand-logo center">
<img src="/images/brand.png" width="150"/>
</a>
<a data-target="slide-out" class="sidenav-trigger">
<i class="large material-icons cyan-text text-darken-4">menu</i>
</a>
<ul id="slide-out" class="sidenav">
<li>
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header">Login<i class="material-icons right">arrow_drop_down</i></a>
<div class="collapsible-body">
<ul>
<li>Employer</li>
<li>Job Seeker</li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
</div>
and the js init source is
$('.sidenav').sidenav();
Thanks
enter image description here
Try to copy code from documentation and modify according to your needs.
try zIndex=1 to sidenav and nav class
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>
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 am trying to use an image (thumbnail image in nav bar) as a bootstrap drop down. I tried the solution in [bootstrap image drop down][1]
[1]: In bootstrap, How do I make an image a dropdown? but it did not work. This seems fairly simple but I cannot get it working. Basically this is the user's thumbnail image when logged in and I want a drop down for user settings, logout, etc.
I tried it once again and checked out meetup dot com. I got the dropdown while clicking the image without the background but i could not find a way to add the caret.
<div class="container">
<div class="dropdown">
<img class="btn dropdown-toggle" src="images/thumbnail_image.png" alt="dropdown image" data-toggle="dropdown" class="img-responsive">
<ul class="dropdown-menu">
<li>Settings</li>
<li>Log Out</li>
<li>Dropdown menu 3</li>
</ul>
</div>
</div>
Hope this helps :)
The solution is quite simple. All you have to do is use an 'img' tag between the button tags.
<div class="container">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
<img src="images/example_image.png" alt="dropdown image" class="img-responsive">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Settings</li>
<li>Log Out</li>
<li>Dropdown menu 3</li>
</ul>
</div>
</div>
If you still have problems, please attach your code along with you question. Hope this helps.
I have it the way I want by doing the following but there is no hand pointer on mouse over, I have to add the pointer style and I get a white background behind my image when I click for the drop down. Now I need to correctly style the drop down toggle to fix this. Thanks for your reply.
<li class="side-padded margin_left">
<div class="dropdown top_margin15">
<a class="dropdown-toggle" data-toggle="dropdown">
<?php
echo '<img id="profile-img" class="img-circle img-responsive" src="'.base_url().'i/mbr/img/'.$this->auth_user_id.'.jpeg">';
?>
</a>
<ul class="dropdown-menu">
<li>Settings</li>
<li>Log Out</li>
<li>Dropdown menu 3</li>
</ul>
</div>
</li>
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">