Bootstrap - dropdown menu not working? - html

My dropdown menu in Bootstrap doesnt appear to be working - can anyone alert me to the problem? Right now it displays the dropdown, but clicking it does nothing. Thanks!
JS:
$(document).ready( function() {
$('.dropdown-toggle').dropdown();
});
HTML:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container" style="width: auto;">
<a class="brand" style="text-indent: 3em" href="#">
Title
</a>
<ul class="nav">
<li>Profile</li>
<li class="active">Statistics</li>
<li>Reader</li>
<li class="dropdown" id="menu1">
<a class="dropdown-toggle" data-toggle="dropdown" href="#menu1">
Options
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div>
</div>
</div>

Check if you're referencing jquery.js BEFORE bootstrap.js and bootstrap.js is loaded only once. That fixed the same error for me:
<script type="text/javascript" src="js/jquery-1.8.0.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

This is a Rails specific answer, but I had this same problem with Bootstrap dropdown menus in my Rails app. What fixed it was adding this to app/assets/javascripts/application.js:
//= require bootstrap
Hope that helps someone.

putting
<script src="js/bootstrap.min.js"></script>
file at the last after the
<script src="jq/jquery-2.1.1.min.js"></script> solved this problem for me .
this is how i use write it now and no problem
<script src="jq/jquery-2.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>

Double importing jquery can cause Error
<script src="static/public/js/jquery/jquery.min.js"></script>
OR
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="" crossorigin="anonymous"></script>

I had to download the source files instead of just the compressed files that it says to use for quick start on the bootstrap website

I had a similar problem. The version of bootstrap.js that visual studio seems to be hosed. I just pointed to this URL instead:
<link id="active_style" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/cosmo/bootstrap.min.css">
For completeness, here's the HTML and javascript
<ul class="nav navbar-nav navbar-right">
<li id="theme_selector" class="dropdown">
Theme <b class="caret"></b>
<ul id="theme" class="dropdown-menu" role="menu">
<li>Amelia</li>
<li>Cerulean</li>
<li>Cyborg</li>
<li>Cosmo</li>
<li>Darkly</li>
<li>Flatly</li>
<li>Lumen</li>
<li>Simplex</li>
<li>Slate</li>
<li>Spacelab</li>
<li>Superhero</li>
<li>United</li>
<li>Yeti</li>
</ul>
</li>
</ul>
Javascript
$('#theme li').click(function () {
//alert('item: ' + $(this).text());
switch_style($(this).text());
});
Hope it helps someone

I've scratched my head for the last few hours and only figured it is due to difference between bs4 and bs5, namely you should replace data-toggle="dropdown" in bs4 with data-bs-toggle="dropdown" in bs5 and vice versa, hope that helps

If I am getting you correctly, when you say that clicking does nothing, do you mean that it does not point to your URL?
In the anchor tag <a href>it looks like you did not pass your file path to the href attribute. So, replace the # with your actual path for the file that you want to link.
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
I hope this helps with your issue.

you are missing the "btn btn-navbar" section. For example:
<a 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>
</a>
Take a look to navbar documentation in:
Twitter Bootstrap

If you are using electron or other chromium frame, you have to include jquery within window explicitly by:
<script language="javascript" type="text/javascript" src="local_path/jquery.js" onload="window.$ = window.jQuery = module.exports;"></script>

When i checked i saw display: none; value is in the .dropdown-menu bootstrap css class. Hence i removed it.

put following code in your page
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequest);
function EndRequest(sender, args) {
if (args.get_error() == undefined) {
$('.dropdown-toggle').dropdown();
}
}

Related

Bootstrap Input Group with Dropdown Menu

I am using a Legacy Bootstrap version (2.3) to support a tool that is not planned for upgrade anytime soon.
I am trying to make a simple Filter Style Dropdown & Input Group but I am having some issues with the menus.
Here is my code:
<div id="main" class="container">
<div class="page-header">
<h3 class="text-info">
Training Summary <small>Schedule Breakdown</small>
<span class="pull-right">
<div class="input-prepend input-append">
<button tabindex="-1" data-toggle="dropdown" class="btn dropdown-toggle">
Start Date <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
<input class="span2 dp cen" type="text" placeholder="Select a Start Date" name="startDate">
<button tabindex="-1" data-toggle="dropdown" class="btn dropdown-toggle">
End Date <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
<input class="span2 dp cen" type="text" placeholder="Select an End Date" name="endDate">
<button class="btn" type="button" name="fetch"><i class="icon-refresh"></i></button>
</div>
</span>
</h3>
</div>
What I am trying to do is get the dropdown menus to fire when you click on the "Start Date" or "End Date" dropdowns. Nothing appears to be happening and I'm not too sure why.
I created a fiddle to show the issue: http://jsfiddle.net/3h6x6ztw/1/
My goal is to get the dropdown menu to show up under the buttons as they normally would in a dropdown menu. Not sure if it's something I am missing or just a syntax issue.
In Bootstrap plugins can be included individually (using Bootstrap's individual *.js files), or all at once (using bootstrap.js or the minified bootstrap.min.js).
Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included before the plugin files).
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
Also you have to set a content for the button an the ul.dropdown-menu with position: relative because ul.dropdown-menu has position: absolute the default in bootstrap is btn-group
something like this:
<div class="btn-group">
<button tabindex="-1" data-toggle="dropdown" class="btn dropdown-toggle">
Start Date <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Action</li>
</ul>
</div>
Here a jsfiddle example to play with

Override not working with bootstrap when fetching css from maxcdn server

I am using bootstrap framwork and trying to change few properties with navbar, like background color,
When I uses css from a local copy like, ./bootstrap.css override works fine or when I pasting whole css or just navbar css to liveweave CSS column override working.
But
when I am using maxcdn server like
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
Override is failing whether its liveweave or my pc, even after using !important override fails.
I am using
navbar navbar-default navbar-fixed-top
classes
I am sure about what I said above, even before posting this question I visited at least 10 pages or similar question to find solution but none them used CSS from maxcdn server.
Working Example
<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
<script src="./google.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
</html>
main.css
.navbar-default{
background-color:red;
}
If you use a local css file for override. you must be sure this file is read after the maxcdn...... file. the last one is the css element used
Having the same issue... I noticed that, when viewing the maxcdn bootstrap.min.css in my text editor, the code stops running at ".glyphicon-phone:before{content:"\e145"}.glyphicon..." so I wonder if that is relating to the issue. Hoping that it gets sorted out soon!

Dropdown menu of bootstrap

I'm trying to use a component of bootstrap : the dropdown. I made my code with the help of the documentation.
This is my entire navbar :
<nav class="nav navbar-default">
<div class="container-fluid">
<div class="navbar-header ">
AMG
</div>
<ul class="nav navbar-nav">
<li>Menu</li>
<li class="dropdown">
<a class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</a></li>
<ul class="dropdown-menu" >
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
<div>
</ul>
<ul class="nav navbar-nav navbar-right ">
<li><p class="navbar-text"><span class="essaiActuel"></span></p></li>
<li><a><div class="session"></div></a></li>
</ul>
</div>
</div>
This is the 3 links I added :
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
The link is displayed but the dropdown menu doesn't appear. I tried to do my code in a jsfiddle and it works so I think there is a problem with the links.
EDIT :
I changed the links :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Here is the jsFiddle link : https://jsfiddle.net/DTcHh/10895/
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js">
This is not necessary as it's a JS file.. But as I can see you are adding:
Updated with jQuery
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Once it's version 3.0.0 and the JS File is 3.3.5.
Try it again with both files from the same framework version
If it's working in the JSFiddle, maybe you have some extra code that is bad. So for example a div with the same ID or Class..
Also Try to show us your working JSFiddle.

Twitter Bootstrap Broken Dropdown

I have had a website running bootstrap for quite a while now (since 2.2 ish). I recently have been trying to patch up the page after noticing that the drop-down bar was no longer functional. This was odd as it had been tested before and no issues arised approximately a year ago.
I have tried swapping out parts of the HTML with some of the newer bootstrap examples for the past few hours, but I can't appear to get the drop-down to work anymore.
For debugging, I have isolated the problem to its simplest case with the HTML below.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a 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>
</a>
<div class="brand">Test</div>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>
</body>
</html>
Any ideas about what I might be missing would be very much appreciated. I believe it might be a mismatch between the versions of Bootstrap that are causing this issue. However, I am trying to refactor as little HTML as possible to get the dropdown working as I am no longer familiar with this older code.
Ultimately, I'm trying to fix this bug without migrating from 2.2.2.
I'm not sure where it is in your javascript file, but you need to give the li a class "open". When the li has the class "open" then it will show the dropdown menu. So u might want to add a script something like:
$('.dropdown a').on('click', function () {
$(this).closest('li').toggleClass('open');
});
Or you can change the click into a hover. Your choice.
UPDATE
$('html').on('click', function () {
$('.dropdown.open').removeClass('open');
});
$('.dropdown a').on('click', function (e) {
e.stopPropagation();
$(this).closest('li').addClass('open');
});

Twitter Bootstrap - Span Columns not displaying correctly

I am trying to get started with Twitter Bootstrap, but for some reason, anything I do, results in a div spanning the entire page. As such, I cannot get the grid system / navigation bar to look right as every div appears to have it's own line.
I am sure that this is a simple fix but I am completely baffled.
http://jsfiddle.net/Aq5xn/show/
<!DOCTYPE html>
<html lang="en">
<head>
<title>
#section('title')
Page Title
#show
</title>
{{-- Ensures proper rendering & touch zooming --}}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{{-- HTML::style('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css') --}}
{{ HTML::style('/css/bootstrap.css') }}
{{ HTML::style('/css/style.css') }}
</head>
<body>
<div class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<div class="container-fluid">
<a class="brand" href="#">asdf</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<p class="navbar-text pull-right">Logged in as username</p>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span4">{{-- #yield('content') --}}</div>
<div class="span4">Span 4</div>
<div class="span4">Span 4</div>
</div>
</div>
{{-- Scripts are placed here --}}
{{ HTML::script('//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js') }}
{{ HTML::script('//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js') }}
</body>
</html>
You are confusing Bootstrap 2.3.2 with Bootstrap 3.0.0. you can find the differences outlined in the CHANGELOG concerning the migration details. Glancing at your code, i see that navbar-inner class has been removed, container-fluid has been replaced by container, same for row-fluid and so on.
Basically, you're using Bootstrap 2.3.2 code with the new Bootstrap 3.0.0 engine... without migration. Follow the instructions outlined in the above link to know what you need to change and how.
PS: As of version 3.1 you can still use .container-fluid, you just need to use .row classes as with standard containers. Probably this was still the case even with version 3.0, I may have misunderstood the documentation.
Please do note that you are using Bootstrap 3.0.0.
span class is no longer in use. Changed to .col-md-* , read the details at the link below.
http://getbootstrap.com/css/#grid-options
if you still wish to use span class. Please revert it back to Bootstrap 2.3.2.
try this in bootstrap 3 http://getbootstrap.com:
<nav class="navbar navbar-inverse shadow main-menu" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand">asdf</a>
</div>
<div style="height: auto;" class="navbar-collapse navbar-ex1-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>