I am trying to get bootstrap dropdown list working on plnkr but it is not dropping down the list, I have created a plunk here:
http://plnkr.co/edit/tw3O5ihT7YB79BcAGlsh
This code was copied from bootstrap:
<body ng-controller="MainCtrl as vm">
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li ng-repeat="a in vm.exportAction">
<a ng-if="a.visble == true">
<span ng-click="vm.selectedExport(a)">{{a.action}}</span>
</a>
<div ng-if="a.divider == true">
<div role="separator" class="divider"></div>
</div>
</li>
</ul>
</div>
</body>
Any ideas?
Add Jquery and Bootstrap JavaScript files in head after Bootstrap's CSS - plnkr:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Related
I have the following code to represent a floating action button:
.dropup .hide-toggle.dropdown-toggle::after {
display: none !important;
}
<div class="dropup position-absolute bottom-0 end-0 rounded-circle m-5">
<button type="button" class="btn btn-success btn-lg dropdown-toggle hide-toggle" data-bs-toggle="dropdown" aria-expanded="false" aria-haspopup="true">
<i class="fa-solid fa-plus"></i>
<span class="visually-hidden">Add Category</span>
</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">...</a>
</li>
</ul>
</div>
But I'm having an issue hiding the toggle icon in the .dropdown-toggle despite having a CSS rule to have it not display.
What can I do to remove the icon?
Are you sure it's not working? I see no icon here.
.dropup .hide-toggle.dropdown-toggle::after {
display: none !important;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div class="dropup position-absolute bottom-0 end-0 rounded-circle m-5">
<button type="button" class="btn btn-success btn-lg dropdown-toggle hide-toggle" data-bs-toggle="dropdown" aria-expanded="false" aria-haspopup="true">
<i class="fa-solid fa-plus"></i>
<span class="visually-hidden">Add Category</span>
</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">...</a>
</li>
</ul>
</div>
What is causing my dropdown to have extra whitespace? (Apologies for the screenshot)
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="caret">Snooze</span>
</button>
<div class="dropdown-menu">
<button class="dropdown-item">1 Hour</li>
</div>
</div>
As far as I know there is nothing strange in my CSS files that would cause this. I am using Bootstrap4.
Check out this code. I removed <span class="caret"></span> because it's not a valid class in bootstrap. I changed btn-default to other button, btn-primary in this case.
The most important error - look at dropdown-menu. You open button tag and close li so I changed that to div and it works nicely.
Check out Bootstrap Docs for more info here https://getbootstrap.com/docs/4.3/components/dropdowns/.
/*DEMO*/
body{padding:3rem}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Snooze</button>
<div class="dropdown-menu">
<div class="dropdown-item">1 Hour</div>
</div>
</div>
Your HTML structure is wrong. Check what you have inside the .dropdown-menu element.
Instead of <button class="dropdown-item">1 Hour</li> use <li class="dropdown-item">1 Hour</li>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Snooze
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li class="dropdown-item">1 Hour</li>
</div>
</div>
I'm trying to implement a simple design with a navbar and two side by side wells, but the wells are not aligning with their container, overflowing it horizontally to the right (screenshot at http://imgur.com/a/4XK25)
I'd also like the wells to fit the screen height, but currently they overflow vertically making the user have to scroll down.
Here's my code, JSFiddle renders it differently from Firefox (link to screenshot above), fiddle at https://jsfiddle.net/vrk3vcxb/
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<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> <!-- /.navbar-header -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-wrench" aria-hidden="true"></span> One
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Two</li>
<li>Three</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li onclick="#">
<span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span> Four
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span> Five
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Six</li>
<li>Seven</li>
<li role="separator" class="divider"></li>
<li>Eight</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="well">
</div>
</div>
<div class="col-md-4">
<div class="btn-group btn-group-xl" role="group">
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span> Nine</button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span> Ten</button>
</div>
<div class="well">
</div>
</div>
</div>
</div>
</div> <!-- top container -->
</body>
Any hints on what I'm doing wrong?
Better to remove 'container' class just above the 'row' class, it will help the overflowing to right.
For the wells to fit the screen height just add some styles: height:100vh
To fix you're overflowing well you might wanna add it into a col... In the fiddle you had it placed outside the col-md-4 div...
As you add content to the wells they should vertically fill the page... you could always add some padding I would also recommend using a separate CSS file and removing the inline styles.
If you need more help let me know and ill amend my answer for you.
<body>
<div class="container">
<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> <!-- /.navbar-header -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-wrench" aria-hidden="true"></span> Scans
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Scan files</li>
<li>See previous scans</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li onclick="#">
<span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span> Help
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span> Account
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Send feedback</li>
<li>Upgrade account</li>
<li role="separator" class="divider"></li>
<li>Logout</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="row">
<div class="col-md-8">
<div class="well">
<div id="dText" style="background: white; height: 85%; overflow-y:auto; padding:10px;" ></div>
</div>
</div>
<div class="col-md-4">
<div class="btn-group btn-group-xl" role="group">
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-backward" aria-hidden="true"></span> Previous</button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-forward" aria-hidden="true"></span> Next</button>
</div>
<div class="well">
<div id="dText2" style="background: white; height: 85%; overflow-y:auto; padding:10px;" ></div>
</div>
</div>
</div>
</div> <!-- top container -->
</body>
</html>
You also have a container wrapping the whole thing... But then inside your navbar you have a container-fluid Try and write the whole thing yourself from scratch... use the bootstarp documentaion for a referance
For the wells height you can use, as already suggested VH, or flexbox if no need to support explorer < 9.
As for the grid, you have a nested container class giving an extra padding, your code should look like this:
<div class="container">
<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> <!-- /.navbar-header -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-wrench" aria-hidden="true"></span> One
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Two</li>
<li>Three</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li onclick="#">
<span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span> Four
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span> Five
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Six</li>
<li>Seven</li>
<li role="separator" class="divider"></li>
<li>Eight</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="row">
<div class="col-md-8">
<div class="well">
</div>
</div>
<div class="col-md-4">
<div class="btn-group btn-group-xl" role="group">
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span> Nine</button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span> Ten</button>
</div>
<div class="well">
</div>
</div>
Codepen: https://codepen.io/giannidk/pen/owpYEG?editors=1100
Using bootstrap 3 I am trying to produce a row of labeled dropdown menus with a final query button. However the buttons are floating to the left of the labels due to the btn-toolbar CSS. Changing the btn-toolbar to float right produces a reversed order of query button and choices with the labels in the right position.
<div class="btn-toolbar row">
<div class="btn-group">
<label class="btn-label">Topic:</label>
<button id="choose_topic_title" type="button" class="btn btn-default">Select</button>
<button id="choose_topic" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul id="choose_topic_menu" class="dropdown-menu">
<li>all</li>
<li>weather</li>
<li>sports</li>
<li>business</li>
<li>news</li>
<li>arts</li>
<li>science</li>
</ul>
</div>
<div class="btn-group">
<label for="choose_lang_title" class="control-label">Language:</label>
<button id="choose_lang_title" type="button" class="btn btn-default">Select</button>
<button id="choose_lang" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul id="choose_lang_menu" class="dropdown-menu">
<li>en-us</li>
<li>es-us</li>
</ul>
</div>
<div class="btn-group">
<a href="#">
<button id="query_data" type="button" class="btn btn-primary">Query</button>
</a>
</div>
</div>
Does bootstrap have a simple way to position a horizontal row of labeled dropdown menus?
Here is a jsfiddle demonstrating the issue: https://jsfiddle.net/cgalles/nqmqka2e/4/
You can change float of your labels (or you can add pull-left class to labels).
.btn-toolbar .btn-label {
float: left;
}
JSFIDDLE
The navbar worked properly once but i made some changes and it no longer works. When I make the window small the toggle square shows up but when i click on it - nothing happens.
Note: The navbar works fine in full screen - its just in small windows, when I click on the toggle button - the drop down menu doesn't appear
Was wondering if anyone knew how to fix it.
Here is my code for the header :
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">CHRONOS LOGO</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>BLOG</li>
<li>ABOUT</li>
<li>CONTACT</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">SOCIAL<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li class="divider"></li>
<li>Google+</li>
<li class="divider"></li>
<li>Facebook</li>
<li class="divider"></li>
<li>Twitter</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
FOOTER:
<button type="submit" name="submit" id="submit"
class="btn btn-primary btn-lg">
Submit
</button>
</form>
</div>
<?php } ?>
</div>
<div id="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="regform/js/jquery.validate.js"></script>
<script src="regform/script.js"></script>
<script>
addEventListener('load', prettyPrint, false);
$(document).ready(function() {
$('pre').addClass('prettyprint linenums');
});
</script>
</body>
</html>
You have the wrong value on the data-target attribute; it should instead be:
<button
type="button"
class="navbar-toggle"
data-toggle="collapse"
data-target=".navbar-collapse"> <!-- You had ID from the docs example -->
</button>
http://jsfiddle.net/fZTgH/1/
This is most likely a js problem as the code looks fine. Make sure that you have the bootstrap.min.js file in the header or at the bottom of the js header stack (under all the other js files).
<script type="text/javascript" src="OTHER JS FILES"></script>
<script type="text/javascript" src="OTHER JS FILES"></script>
<script type="text/javascript" src="javascript/bootstrap.js"></script>
For a further inspection, please update your question with the header code or a link to the site