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>
Related
I am trying to replicate the following codepen navigation bar although I have a simple logo on the left and two links on the right. The framework used is Zurb Foundation: https://codepen.io/IamManchanda/pen/LymroM?editors=1000
So far I cannot seem to get the menu responsive. When I use a large window, the mobile menu stays put and will not toggle like in the pen. Any ideas how to replicate this?
Template:
<div class="title-bar" data-responsive-toggle="navbar" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle="navbar"></button>
<div class="title-bar-title">Menu</div>
</div>
<div class="top-bar" id="navbar">
<div class="top-bar-left">
<ul class="menu">
<li class="menu-text">
<img id="logo" src="./assets/img/logo4white.png" alt="logo">HANYU.CO
</li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li id="home"><router-link class="link align-left" to="/">Home</router-link></li>
<li id="logout" v-if="this.$cookies.get('user')" #click="logout"><a>Logout</a></li>
</ul>
</div>
</div>
Thanks in advance!
I realized I was not calling $(document).foundation(); in the JavaScript. Oops!
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'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
Trying to do something very simple here:
<div class="container">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select Player
<span class="caret"></span></button>
<ul ng-repeat="name in Ids" class="dropdown-menu">
<li>
<a href="#/{{name.Player_Id}}">
{{name.Player_First_Name}} {{name.Player_Last_Name}}
</a>
</li>
</ul>
</div>
</div>
I can't see why this isn't working: if I attempt to simply render an unordered list then the data is displayed correctly. But as soon as I try to include it in bootstrap's dropdown menu, the button is displayed but not expanded when clicked.
Why are you doing ng-repeat on the ul element, it should be li element, otherwise you're creating multiple lists.
<div class="container">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select Player
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li ng-repeat="name in Ids">
<a href="#/{{name.Player_Id}}">
{{name.Player_First_Name}} {{name.Player_Last_Name}}
</a>
</li>
</ul>
</div>
</div>
Your code says to repeat the <ul> element, but don't you want to repeat the <li> elements? This should work:
<ul class="dropdown-menu">
<li ng-repeat"name in IDs">
<a href="#/{{name.Player_Id}}">
{{name.Player_First_Name}} {{name.Player_Last_Name}}
</a>
</li>
</ul>
If you still have problems, I'd suggest you confirm your module is using the ui.bootstrap components. There are working examples of the dropdowns doing exactly what you want here on the documentation page.
I need to display the submenu to left align as right align making my layout messy. I'm using bootstrap.
<div class="btn-group">
<div class="dropdown">
<a href="#" data-toggle="dropdown" class="btn">
<i class="icon-folder-close"></i> <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Outbox</li>
<li>Trash</li>
</ul>
</div>
</div>
Bootstrap has the option to make drop downs positioned out to the right. You can see an example of this on the bootstrap navbar section.
If you add the class navbar-right to your btn-group you should find that the dropdown changes drop direction.
<div class="btn-group navbar-right">
<div class="dropdown">
<a href="#" data-toggle="dropdown" class="btn">
<i class="icon-folder-close"></i> <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Outbox</li>
<li>Trash</li>
</ul>
</div>
</div>
Here is a JSFiddle