Twitter Bootstrap Broken Dropdown - html

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');
});

Related

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 - 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>

can anyone please let me know why the bootstrap drop down menu is not working

I am using bootstrap framework and tried to replicate http://twitter.github.com/bootstrap/examples/hero.html
can any one please tell me why the dropdown-menu is not working.
the drop down menu which works in the example is not working with my code and i have included proper styles and js ! and one other styles are working so thinking its not a prob with the style any help ll be greatly appreciated
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<meta charset="utf-8">
<title> The first step</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button 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>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</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 class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form pull-right">
<input class="span2" type="text" placeholder="Email">
<input class="span2" type="password" placeholder="Password">
<button type="submit" class="btn">Sign in</button>
</form>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<hr>
<footer>
<p>© Company 2013</p>
</footer
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
#bana close the footer close tag
Edit your Script Reference like this
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
I have used the below online utility before and it has worked for me. It is free and quick. I created a sample dropdown menu and then examined the code to apply to my website. Good luck.
CSS Menu Maker
Use the css and js file the following way: Check Jsfiddle Example with cloud hosted bootstrap css and js
Also you are using wrong version of Jquery in your page it has to be
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
The html should like below :
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<meta charset="utf-8">
<title> The first step</title>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet">
</head>
And in footer :
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>

Bootstrap - dropdown menu not working?

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();
}
}