I'm using Bootstrap and I have two dropdowns next to each other, something like this:
|Dropdown1| |Dropdown2|
I have some values in dropdown1 that have lots of characters and I don't want them to disturb the width as soon as they are pressed. How can I do that ?
Here is my dropdown
<div class="dropdown">
<div class="btn-group" id="storeId">
<button class="btn btn-default dropdown-toggle" type="button"
data-toggle="dropdown">
Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML Tutorial</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS Tutorial</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript Tutorial</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a></li>
</ul>
</div>
</div>
Related
I tried to make a simple dropdown menu with Bootstrap but it appears on the bottom of the page. What's going wrong?
.dropdown-informatie {
overflow: hidden;
float: left;
}
.dropdown-pagina {
float: left;
overflow: hidden;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<h1> Test </h1>
<p>Test</p>
<div class="dropdown-pagina">
<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Pagina's <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" href="#">Pagina 1</a></li>
<li role="presentation"><a role="menuitem" href="#">Pagina 2</a></li>
<li role="presentation"><a role="menuitem" href="#">Pagina 3</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" href="#">Contact</a></li>
</div>
<div class="dropdown-informatie">
<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Informatie <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" href="#">informatie 1</a></li>
<li role="presentation"><a role="menuitem" href="#">informatie 2</a></li>
<li role="presentation"><a role="menuitem" href="#">informatie 3</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" href="#">Contact</a></li>
</div>
YOUR NEW CODE
Instead of using "dropdown-pagina" as a class you will need to use just dropdown. Then a second and third class for pagina and informatie can be made for specific styling as dropdown is a defined Bootstrap class.
The structure for a Bootstrap 3 drop down is as follows:
div.container {
margin-top: 20px;
}
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
</div>
</body>
Prototyping a categorical classification system, I'm using Boostrap dropdown buttons in a pill-style navigation. I'm not committed to the pills, so if a different class such as a navbar might work instead, I'll change, though I did already try using navbar and button groups.
I don't know for sure that JavaScript inclusions might not be the problem, but I don't have dropdown.js in my distribution of Bootstrap. Compiling a custom version with only the components I need is way beyond my skill and the scope of the project.
CSS and JavaScript inclusions in head tag:
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<script src="jquery.2.1.1.min.js" type="text/javascript"></script>
<script src="bootstrap.min.js" type="text/javascript"></script>
Code for dropdown list:
<div id="taglist">
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="dropdown">
<a id="number-list" href="#" role="button" data-toggle="dropdown" class="dropdown-toggle" aria-expanded="false" aria-haspopup="true">
Number<span class="caret"></span>
</a>
<ul id="number-list-menu" class="dropdown-menu" role="menu" aria-labelledby="number-list">
<li><a tabindex="-1" role="menuitem" href="#">One</a></li>
<li><a tabindex="-1" role="menuitem" href="#">Two</a></li>
<li><a tabindex="-1" role="menuitem" href="#">Three</a></li>
<li><a tabindex="-1" role="menuitem" href="#">Four</a></li>
<li><a tabindex="-1" role="menuitem" href="#">Five</a></li>
</ul>
</li>
<li class="dropdown" role="presentation">
<a id="actors-list" href="#" role="button" aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" class="dropdown-toggle">Actors<span class="caret"></span></a>
<ul class="dropdown-menmu" id="actors-list-menu" role="menu" aria-labelledby="actors-list">
<li><a tabindex="-1" role="menuitem" href="#">goats</a></li>
<li><a tabindex="-1" role="menuitem" href="#">children</a></li>
<li><a tabindex="-1" role="menuitem" href="#">dogs</a></li>
<li><a tabindex="-1" role="menuitem" href="#">cats</a></li>
<li><a tabindex="-1" role="menuitem" href="#">cows</a></li>
<li><a tabindex="-1" role="menuitem" href="#">donkeys</a></li>
<li><a tabindex="-1" role="menuitem" href="#">horses</a></li>
<li><a tabindex="-1" role="menuitem" href="#">birds</a></li>
<li><a tabindex="-1" role="menuitem" href="#">ducks</a></li>
<li><a tabindex="-1" role="menuitem" href="#">adult humans</a></li>
</ul>
</li>
</ul>
</div>
That code follows the example from the getbootstrap.com JavaScript page as closely as possible, except with my own id names.
PaulL, You have a typo in this line...
<ul class="dropdown-menmu" id="actors-list-menu" role="menu"
Just change the dropdown-menmu to dropdown-menu.
Using bootstrap I am trying to get this dropdown menu to appear as a small box in the middle of the page. Like this.
This is the HTML code:
<div class="dropdown">
<button
class="btn btn-default dropdown-toggle"
type="button"
id="dropdownMenu1"
data-toggle="dropdown"
aria-expanded="true">
List
<span class="caret"></span>
</button>
<ul class="dropdown-menu" style="right: 0; left: 0;" role="menu" aria-labelledby="dropdownMenu1">
<li class="text-center" role="presentation"><a role="menuitem" tabindex="-1" href="#">First</a></li>
<li class="text-center" role="presentation"><a role="menuitem" tabindex="-1" href="#">Second</a></li>
<li class="text-center" role="presentation"><a role="menuitem" tabindex="-1" href="#">Third</a></li>
</ul>
</div>
Maybe the problem is the standard style of dropdown-menu:
.center {
text-align: center;
}
.dropdown-menu{
width: 200px;
text-align:center !important;
float: none !important;
margin: 0 auto !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<div class="container-fluid center">
<div class="col-md-5">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
List
<span class="caret"></span>
</button>
<ul class="dropdown-menu" style="right: 0; left: 0;" role="menu" aria-labelledby="dropdownMenu1">
<li class="text-center" role="presentation"><a role="menuitem" tabindex="-1" href="#">First</a>
</li>
<li class="text-center" role="presentation"><a role="menuitem" tabindex="-1" href="#">Second</a>
</li>
<li class="text-center" role="presentation"><a role="menuitem" tabindex="-1" href="#">Third</a>
</li>
</ul>
</div>
<div>
</div>
How about using <select size="1"><option>...</option></select>?
I have my dropdown menu in my _Layout.cshtml and clicking on one of the menu items works fine the first time, for example takes me to http://localhost:52098/Home/ViewTable/Scottish Premiership.
If I click on the URL again, it tries taking me to http://localhost:52098/Home/ViewTable/Home/ViewTable/Scottish Premiership
The navigation Code:
div class="navbar navbar-inverse navbar-fixed-top">
<ul class="nav nav-pills">
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
Scotland <span class="caret"></span></a>
<ul class="dropdown-menu multi-level" role="menu">
<li role="presentation"><a role="menuitem" tabindex="-1" href="Home/ViewTable/Scottish Premiership">
Scottish Premiership
</a></li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="Home/ViewMain/Scottish Championship">
Scottish Championship
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1">
Scottish First Division
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1">
Scottish Second Division
</a>
</li>
</ul>
</li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
England <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="Home/ViewMain/Scottish Championship">
English Premier League
</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="Home/ViewMain/Scottish Championship">
English Championship
</a>
</li>
</ul>
</li>
</ul>
// #*#Html.MvcSiteMap().Menu(false, true, true, true, true)
#Html.MvcSiteMap().SiteMapPath()*#
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav"></ul>
</div>
</div>
Looks like it's taking a relative path from the one i'm already on + the href on the link, where as what I really want is an absolute path?
Add '/' to the start of your URLs
like /Home/ViewMain/Scottish ChampionShip
And it is always better to use
#Url.Action("MethodName", "Controller")
e.g.
Test
To pass a Parameter in URL
Test
I'm not sure what I'm doing wrong in my code here, but it's this or CSS related. I'm not sure what CSS setting this would be, but here is my navbar section of my html code.
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
TTT Stats
<span class="caret"></span>
</button>
<a class="navbar-brand" href="index.php">Scoreboards</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="index.php?page=tttkills">Total TTT Kills</a>
</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="index.php?page=tttdeaths">Total TTT Deaths</a>
</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="index.php?page=traitorkills">TTT kills as a traitor</a>
</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="index.php?page=traitorskilled">Traitors killed as an innocent/detective</a>
</li>
</ul>
</div>
<div class="dropdown2">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-expanded="true">
Other
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
<li role="presentation"><a role="menuitem" tabindex="-1" href="index.php?page=playtime">Time Tracker</a>
</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="index.php?page=phkills">Total Prophunt Kills</a>
</li>
</ul>
</div>
(If anyone is wondering about the names, its for a garry's mod TTT server)
With that code, here is what the complete navbar looks like.
http://i.imgur.com/75cPTRh.png
I would want the two dropdown buttons side by side on that navbar. Now when they are like that, this leads into my next question tied into this. How do you work bootstrap's dropdown CSS if you have more than one button?
This is what I have in my css at the bottom to align the dropdown by the button, so that it is centered correctly below the button and not way over stuck to the left.
.dropdown-menu {
right: 68%;
left: 10%;
}
If there is more than one button, it still centers all buttons to that point on the page. How do I edit their positions individually?
Add btn-group class
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.php">Scoreboards</a>
</div>
<div class="btn-group">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
TTT Stats <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li role="presentation"><a role="menuitem" tabindex="-1" href="index.php?page=tttkills">Total TTT Kills</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="index.php?page=tttdeaths">Total TTT Deaths</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="index.php?page=traitorkills">TTT kills as a traitor</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="index.php?page=traitorskilled">Traitors killed as an innocent/detective</a></li>
</ul>
</div>
<div class="btn-group dropdown2">
<button type="button" class="btn btn-default dropdown-toggle" id="dropdownMenu2" data-toggle="dropdown">
Other <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li role="presentation"><a role="menuitem" tabindex="-1" href="index.php?page=playtime">Time Tracker</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="index.php?page=phkills">Total Prophunt Kills</a></li>
</ul>
</div>
</div>
</div>
</nav>
To answer your first question,
you can place your dropdowns inside a structure like this
<div class="container">
<div class="row">
<div class="col-md-2"> <!-- markup for dropdown 1 --> </div>
<div class="col-md-2"> <!-- markup for dropdown 2 --> </div>
</div>
</div>
You can use col classes like these to make the layout of your page using bootstrap's grid system.
To learn more about them, visit:
http://getbootstrap.com/css/#grid