Adding additional items below the twitter bootstrap bs-docs-sidebar - javascript

so what im trying to do at the moment is add a few more things below the bs-docs-sidebar for twitter bootstrap. Im currently using this code
<div class="row-fluid">
<div class="span3 bs-docs-sidebar">
<div class="row-fluid">
<ul class="nav nav-list bs-docs-sidenav affix">
<li><i class="icon-chevron-right"></i>item 1</li>
<li><i class="icon-chevron-right"></i> item 2</li>
<li><i class="icon-chevron-right disabled"></i> Item 3</li>
<li><a id="contribute" href="#forms"><i class="icon-chevron-right"></i> item 4</a>
<li><a id="contribute" href="#buttons"><i class="icon-chevron-right"></i> item </li> 5</a></li>
</ul>
<div class="well affix">
<h4>Big Heading</h4>
<div class="btn-group btn-block">
<button type="button" class="btn btn-warning">option 1</button>
<button type="button" class="btn btn-warning">option 2</button>
<button type="button" class="btn btn-warning">option 3</button>
</div>
<h4 class="pagination-centered">Or</h4>
<button class="btn btn-block btn-primary">Alternative</button>
</div>
</div>
but the position of the well, is not below the nav menu, it is stuck to the bottom of the page, and cut-off because the well contents seem to be pushing it out of range, is there a way to affix to the bottom of the nav menu instead?

Related

Bootstrap 5 Dropdown & Navs: Cannot read property 'children' of null

I get this Dev Console error message "Cannot read property 'children of null" while I'm trying to use a dropdown button with Nav Tabs in Navbar Component.
when I click on the dropdown item to display nav-link in navbar I get this Dev Console error message "Cannot read property 'children of null"
Live Example: https://codepen.io/themes4all/pen/bGWjMzZ
HTML:
<nav class="navbar navbar-expand-lg navbar-light bg-light py-3">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col">
<div id="nav-tab" class="dropdown" role="tablist">
<button type="button" id="dropdownEx" class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Select Item</button>
<ul class="dropdown-menu" aria-labelledby="dropdownEx">
<li>
<button type="button" role="tab" id="nav-example-1-tab" class="dropdown-item active" data-bs-toggle="tab" data-bs-target="#nav-example-1" aria-controls="nav-example-1" aria-selected="true">
Example 01
</button>
</li>
<li>
<button type="button" role="tab" id="nav-example-2-tab" class="dropdown-item" data-bs-toggle="tab" data-bs-target="#nav-example-2" aria-controls="nav-example-2" aria-selected="false">
Example 02
</button>
</li>
</ul>
</div>
</div>
<div class="col">
<div class="tab-content">
<div role="tabpanel" id="nav-example-1" class="tab-pane fade show active" aria-labelledby="nav-example-1-tab">
<ul class="navbar-nav">
<li class="nav-item dropdown">
Example 01
<ul class="dropdown-menu" aria-labelledby="navbarDropdown"></ul>
</li>
</ul>
</div>
<div role="tabpanel" id="nav-example-2" class="tab-pane fade" aria-labelledby="nav-example-2-tab">
<ul class="navbar-nav">
<li class="nav-item dropdown">
Example 02
<ul class="dropdown-menu" aria-labelledby="navbarDropdown2"></ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
Tabs (data-bs-toggle="tab") should be contained inside a nav nav-tabs...
<nav class="navbar navbar-expand-lg navbar-light bg-light py-3">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col">
<div id="nav-tab" class="dropdown" role="tablist">
<button type="button" id="dropdownEx" class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Select Item</button>
<ul class="dropdown-menu nav nav-tabs" aria-labelledby="dropdownEx">
<li class="dropdown-item p-0">
<button type="button" role="tab" id="nav-example-1-tab" class="dropdown-item active" data-bs-toggle="tab" data-bs-target="#nav-example-1" aria-controls="nav-example-1" aria-selected="true"> Example 01 </button>
</li>
<li class="dropdown-item p-0">
<button type="button" role="tab" id="nav-example-2-tab" class="dropdown-item" data-bs-toggle="tab" data-bs-target="#nav-example-2" aria-controls="nav-example-2" aria-selected="false"> Example 02 </button>
</li>
</ul>
</div>
</div>
<div class="col">
<div class="tab-content">
<div role="tabpanel" id="nav-example-1" class="tab-pane fade show active" aria-labelledby="nav-example-1-tab">
<ul class="navbar-nav">
<li class="nav-item dropdown">
Example 01
<ul class="dropdown-menu" aria-labelledby="navbarDropdown"></ul>
</li>
</ul>
</div>
<div role="tabpanel" id="nav-example-2" class="tab-pane fade" aria-labelledby="nav-example-2-tab">
<ul class="navbar-nav">
<li class="nav-item dropdown">
Example 02
<ul class="dropdown-menu" aria-labelledby="navbarDropdown2"></ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
Demo
Caveat: This is not the intended use of Bootstrap Tabs and Dropdowns. Dropdowns aren't designed used to toggle Tabs, and Tabs aren't meant to be used in the Navbar.
This doesn't describe why it's happening, but if you would like a solution.
Remove some of the attributes associated with the dropdown list item buttons (see below for example). Depending on what you want to do, you can either set up JavaScript event listeners for those buttons. Or you can change the buttons to anchor tags and navigate to a different page.
<div id="nav-tab" class="dropdown" role="tablist">
<button type="button" id="dropdownEx" class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Select Item</button>
<ul class="dropdown-menu" aria-labelledby="dropdownEx">
<li>
<button type="button" role="tab" id="nav-example-1-tab" class="dropdown-item active">
Example 01
</button>
</li>
<li>
<button type="button" role="tab" id="nav-example-2-tab" class="dropdown-item">
Example 02
</button>
</li>
</ul>
</div>
"Leaf" menu items like Example 1 and Example 2 should not contain data-bs-toggle="dropdown"

Nav collapsing and closing

I'm building some website and I want to have menu like on http://www.strv.com (with transition effect on open and close).
I've already done code like:
<div class="menu">
<button id="hamburger" type="button" class="btn pull-left navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<button id="hamburger" class="btn pull-left">
<span class="fa fa-bars"></span>
</button>
<ul class="list-inline nav-menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li class="pull-right"><i class="fa fa-shopping-bag" aria-hidden="true"></i></li>
</ul>
</div>
<div id="mainmenu">
<div class="container">
<button type="button" class="close btn btn-default navbar-toggle">Close</button>
<ul class="nav nav-pills nav-stacked">
<li>Subitem1</li>
<li>Subitem2</li>
<li>Subitem3</li>
<li>Subitem4</li>
</ul>
</div>
</div>
JSFiddle: https://jsfiddle.net/eztuhvhL/
(not working there and don't know why), but there is no transition effect on close and I can't solve it.
And also I want to do add "Item1, Item2, Item3" to this menu on mobile screens and I don't know how to figure it out.
Thank you.
Your problem is that you have two buttons with the id hamburger so jquery doesn't know which one you want. If you look at the console for like chromes devtools, you will see that nothing happens when you click it. The solution is to get rid of the first instance of hamburger. Here is what I got:
http://codepen.io/Squeakasaur/pen/mWKzer
<div class="menu">
<button id="hamburger" class="btn pull-left">
<span class="fa fa-bars"></span>
</button>
<ul class="list-inline nav-menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li class="pull-right"><i class="fa fa-shopping-bag" aria-hidden="true"></i></li>
</ul>
</div>
<div id="mainmenu">
<div class="container">
<button type="button" class="close btn btn-default navbar-toggle">Close</button>
<ul class="nav nav-pills nav-stacked">
<li>Subitem1</li>
<li>Subitem2</li>
<li>Subitem3</li>
<li>Subitem4</li>
</ul>
</div>
</div>
That should fix your problem. You can also just change the id of the first instance to something else :P

Bootstrap3 two dropdowns on the same line

I'm trying to make two bootstrap3 dropdown element working on the same line:
I've tried this:
<div class="btn-group btn-block">
<button class="btn btn-lg btn-default dropdown-toggle" data-toggle="dropdown">first
<span class="caret"></span>
</button>
<ul class="dropdown-menu btn-block">
<li>Reason 1</li>
<li>Reason 2</li>
<li>Reason 3</li>
</ul>
<button class="btn btn-lg btn-default dropdown-toggle" data-toggle="dropdown">second
<span class="caret"></span>
</button>
<ul class="dropdown-menu btn-block">
<li>Reason 5</li>
<li>Reason 6</li>
<li>Reason 7</li>
</ul>
</div>
Unfortunately it seems that the two dropdowns share the same ul list (only the second one). How can I bind the first dropdown to its ul list and the second one to its own ul list too?
You need to separate your dropdowns in two btn-group:
<div class="btn-group btn-group-inline">
<button class="btn btn-lg btn-default dropdown-toggle" data-toggle="dropdown">first
<span class="caret"></span>
</button>
<ul class="dropdown-menu btn-block">
<li>Reason 1</li>
<li>Reason 2</li>
<li>Reason 3</li>
</ul>
</div>
<div class="btn-group btn-group-inline">
<button class="btn btn-lg btn-default dropdown-toggle" data-toggle="dropdown">second
<span class="caret"></span>
</button>
<ul class="dropdown-menu btn-block">
<li>Reason 5</li>
<li>Reason 6</li>
<li>Reason 7</li>
</ul>
</div>
jsfiddle-link
You need them in 2 different divs like:
<ul class="list-inline">
<li>
<div class="btn-group btn-block">
<button class="btn btn-lg btn-default dropdown-toggle" data-toggle="dropdown">first
<span class="caret"></span>
</button>
<ul class="dropdown-menu btn-block">
<li>Reason 1</li>
<li>Reason 2</li>
<li>Reason 3</li>
</ul>
</div>
</li>
<li>
<div class="btn-group btn-block">
<button class="btn btn-lg btn-default dropdown-toggle" data-toggle="dropdown">first
<span class="caret"></span>
</button>
<ul class="dropdown-menu btn-block">
<li>Reason 1</li>
<li>Reason 2</li>
<li>Reason 3</li>
</ul>
</div>
</li>
</ul>
Added both buttons in <div class="dropdown pull-left">
<div class="btn-group btn-block">
<div class="dropdown pull-left"> //added this
<button class="btn btn-lg btn-default dropdown-toggle" data-toggle="dropdown">first
<span class="caret"></span>
</button>
<ul class="dropdown-menu btn-block">
<li>Reason 1</li>
<li>Reason 2</li>
<li>Reason 3</li>
</ul>
</div> //added this
<div class="dropdown pull-left"> //added this
<button class="btn btn-lg btn-default dropdown-toggle" data-toggle="dropdown">second
<span class="caret"></span>
</button>
<ul class="dropdown-menu btn-block">
<li>Reason 5</li>
<li>Reason 6</li>
<li>Reason 7</li>
</ul>
</div> //added this
</div>
Demo Link Here

Having issues with using a bootstrap dropdown toggle for a multi-option filter

I'm trying to use a bootstrap dropdown toggle as a filter to change various controls. I'm able to get the links within the toggle to change the div with the controller in it, but I can't get the date selector to work that I'm attempting to for some reason.
Also - for some reason my two dropdown selectors won't change the default for some reason?
Any help would be greatly appreciated!
<div class="container">
<div class="row">
<div class="col-md-12">
<div style="float:left" class="col-md-3">
<div class="">
<h5>Filter</h5>
<div id="switcher" class="btn-group">
<button style="width:110px" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span data-bind="label">Select One</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Week
</li>
<li>Month
</li>
<li>Stage
</li>
<li>Team
</li>
</ul>
</div>
</div>
</div>
<div style="float:left" class="col-md-9">
<div class="col-sm-3">
<div class="filter" id="week">
<div style="margin-top:10px;margin-left:15px;">
<h5>Week</h5>
<input style="width:200px" id="date-picker-1" type="text" class="date-picker form-control" />
</div>
</div>
<div class="filter" id="month">
<div style="margin-top:10px;margin-left:15px;">
<h5>Month</h5>
<input style="width:200px" id="date-picker" type="text" class="date-picker-2 form-control" />
</div>
</div>
<div class="filter" id="stage" class="" style="margin-top:10px;margin-left:15px;">
<h5>Stage</h5>
<button style="width:200px" class="btn btn-warning dropdown-toggle" data-toggle="dropdown"> <span data-bind="label">Select Stage</span> <span class="caret"></span>
</button>
<ul style="margin-left:30px" class="dropdown-menu" role="menu">
<li>Stage 1
</li>
<li>Stage 2
</li>
<li>Stage 3
</li>
<li>Stage 4
</li>
</ul>
</div>
<div class="filter" id="team" class="" style="margin-top:10px;margin-left:15px;">
<h5>Team</h5>
<button style="width:200px" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"> <span data-bind="label">Select Team</span> <span class="caret"></span>
</button>
<ul style="margin-left:30px" class="dropdown-menu" role="menu">
<li>Team 1
</li>
<li>Team 2
</li>
<li>Team 3
</li>
<li>Team 4
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
http://jsfiddle.net/toomanyjulians/zh4trzgw/

Keep Bootstrap dropdown button focused when even if clicked on input field

I am having a problem keeping bootstrap dropdown button focused when clicked(:focus) on the input field inside the dropdown.
<div id="select_btn">
<div class="btn-group">
<button class="btn btn-custom-select btn-group show-properties dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="select-p-text">Select a Property
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<div id="propertyHolder">
<div class="right-inner-addon">
<i class="fa fa-search"></i>
<input placeholder="Search for a property..." id="box" type="search" />
</div>
<li role="separator" class="divider"></li></div>
<li><ul class="selectList">
</ul>
</li>
</div>
</ul>
</div>

Categories