If i place a media object inside Bootstrap drop down, the menu should expand in width to accommodate media. In the example i wrote in the JSiddle, the heading and text below heading should not wrap to new line.
<ul class="nav navbar-nav navbar-right">
<li class="dropdown" id="account">
<form action="/tracker/logout" method="post">
<button type="button" id="accountHolder" class="btn btn-link dropdown-toggle" data-toggle="dropdown">Lokesh<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<div class="media">
<img class="media-object pull-left" alt="" src="http://www.google.com/homepage/images/google_favicon_64.png">
<div class="media-body">
<a><h4 class="media-heading">Media heading</h4></a>
This is some sample text
</div>
</div>
</li>
</ul>
</form>
</li>
</ul>
please make output window larger to see menu on right corner as i want menu on right side.
https://jsfiddle.net/DTcHh/12500/
Thanks
Related
I added a new menu item to a navbar, but now when resizing smaller, the top Account menu item in yellow(see screenshot)(the div with 'navbar-right-container' in the HTML) moves down into the main navbar. If I resize even smaller, the hamburger icon shows up. I want the hamburger icon to show up before the top menu item overlaps into the other navbar. Below is a snippet of the HTML. I tried adding padding to the body as suggested by other posts but that did not work. How can I get the hamburger icon to show up before it overlaps? Thanks.
<div id="navigation" class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-expand-background">
</div>
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand">
</div>
</div>
<div class="navbar-collapse collapse">
<div class="navbar-middle-container">
<ul class="nav navbar-nav navbar-middle">
<li>
<a href="javascript:openModalAction('/Manage/Accounts')" class="navbar-account-switch">
<span>Account:<br />My Account</span> <span class="caret caret-right caret-collapsible"></span>
</a>
</li>
<li class=" nobr">
<a href="/" title="My Dashboard" >
DASHBOARD
</a>
</li>
<li class=" dropdown nobr">
<a href="/Quotes" class="dropdown-toggle" data-toggle="dropdown">
ACCOUNTS
<b class="caret caret-collapsible"></b>
</a>
<div class="dropdown-menu dropdown-menu-multicolumn ">
<div class="dropdown-menu-head"><div class="dropdown-menu-head-border"></div></div>
<table class="table table-condensed">
<tr>
<td>
<ul class="dropdown-menu-col">
<li class="nobr"><div class="dropdown-menu-col-header">MANAGE</div></li>
.......................................<div class="navbar-right-container">
<ul class="nav navbar-nav navbar-right">
<li class=" dropdown nobr">
<a href="/Quotes" title="Manage Account" class="dropdown-toggle" data-toggle="dropdown">
My name
<b class="caret"></b>
</a>
My Navbar
It is hard to presume without a working example. But almost certainly you should add some to your CSS breakpoint. Add 12em or 200px. Or make an entirely new breakpoint to focus specifically on that element.
You could resort to hacky tricks like negative margin width to offset the new element's impact on the layout. This may affect your ability to click and require even more rules.
I created a dropdown menu in Bootstrap in HTML. All I want to do is adding an image for each one of the elements of the dropdown list.
But when I try to execute it nothing happens. The dropdown list is ok but the images dont appear. Can someone help to add the images in a dropdown menu? Thanks!
<div class="dropdown">
Lingua    
<button class=" btn btn-default " type="button" data-toggle="dropdown">Italiano
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#">
<img src="images/flag.png" width="35" height="30">1</a>
</li>
<li>
<a href="#">
<img src="images/account.png" width="35" height="30">2</a>
</li>
</ul>
    Paese    </tab>
<button class="btn btn-default dropdown-toggle " type="button" data-toggle="dropdown">Italia
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>1
</li>
</ul>
</div>
Here is my result:
I'm sorry for the paint but I have to remove that button.
Yoc Can Use This Code In Your Css File
ul {
list-style-image: url('Some.gif');
}
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
I am new to HTML and CSS and have started coding in the last 4 days. I found bootstrap very useful to get things moving quickly.
Here is my attempt at getting a Navbar with transparency and fixed to the top.
http://jsfiddle.net/revanur/mf5wc/4/
<!-- Top-Navigation-Bar -->
<div class="row-fluid">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner" id="topbar">
<div class="container"> <img class = "brand" src="http://placehold.it/269x50" alt="SparkCharger" />
<button id="topbtn" type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<div class="nav-collapse">
<ul class="nav pull-right">
<li class="active">
<form class="navbar-search brand">
<input type="text" class="search-query" placeholder="Search">
</form>
</li>
<li> <h5> Discover </h5>
</li>
<li> <h5> Blog </h5>
</li>
<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"><h5>Start <span class="caret"></span></h5></a>
<ul class="dropdown-menu">
<li> <h6> Login </h6>
</li>
<li> <h6> Signup </h6>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- /Top-Navigation-Bar -->
However, the height of the navbar seems to change based on brand image size. I have no problem with that but I notice significant spacing between the image and the navbar top and bottom. How do I change this. Also, is it possible to fix the navbar size so that the navbar does not have a mind of its own.
There are a few things affecting the height of the navbar:
div class="navbar-inner" (5px padding)
img class="brand" (10px padding)
the size of the image
You can remove the padding by:
img.brand {
padding: 0;
}
And/Or you can specify the height of the navbar:
div.navbar-inner {
height: 10px;
}
Use something like this:
.brand {height: 25px;}
Demo: Fiddle