Bootstrap collapse not working on nested unordered list - html

I've been having some issues on getting elements of a nested unordered list to collapse and expand.
While the first element functions correctly but subsequent elements don't appear to work. I'm I missing a class or something similar?
Please see attached working example code demonstrating the issue i have.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<ul class="list-group list-group-flush">
<li class="list-group-item list-group-item-action">
<a href="#f1499360-b771-487a-9d84-e399f69f4568" data-toggle="collapse" class="" aria-expanded="true">
<h3>Test Site</h3>
</a>
<div class="collapse show" id="f1499360-b771-487a-9d84-e399f69f4568" style="">
<ul class="list-group">
<li class="list-group-item">
<a href="#c6f8ebd3-5a92-461d-a37b-dcf314897361" data-toggle="collapse" class="" aria-expanded="true">
<h5>132</h5>
</a>
<div class="collapse show" id="c6f8ebd3-5a92-461d-a37b-dcf314897361" style="">
<ul class="list-group">
<li class="list-group-item">
<a href="#e867a283-4dee-44fa-884a-6b7cf7cc42fe" data-toggle="collapse" class="" aria-expanded="true">
<h5>Hello</h5>
</a>
<div class="collapse show" id="e867a283-4dee-44fa-884a-6b7cf7cc42fe" style="">
<ul class="list-group">
<li class="list-group-item">
<h6>Direct Connect Drive Status</h6>
<div class="float-left">Drive 1:</div>
<div class="float-right">Float right on all viewport sizes</div><br>
<div class="float-left">Drive 2:</div>
<div class="float-right">Float right on all viewport sizes</div><br>
<div class="float-left">Drive 3:</div>
<div class="float-right">Float right on all viewport sizes</div><br>
<div class="float-left">Drive 4:</div>
<div class="float-right">Float right on all viewport sizes</div><br>
</li>
</ul>
</div>
</li>
<li class="list-group-item">
<a href="#50e71ff4-7ef5-4b2e-8615-cdfe328320a9" data-toggle="collapse">
<h5>name 2</h5>
</a>
<div class="collapse" id="50e71ff4-7ef5-4b2e-8615-cdfe328320a9">
<ul class="list-group">
<li class="list-group-item">
<h6>Direct Connect Drive Status</h6>
<div class="float-left">Drive 1:</div>
<div class="float-right">Float right on all viewport sizes</div><br>
<div class="float-left">Drive 2:</div>
<div class="float-right">Float right on all viewport sizes</div><br>
<div class="float-left">Drive 3:</div>
<div class="float-right">Float right on all viewport sizes</div><br>
</li>
</ul>
</div>
</li>
<li class="list-group-item">
<a href="#4c6fc729-78b4-4d06-bbdd-749c96cafd05" data-toggle="collapse">
<h5>Test Assign</h5>
</a>
<div class="collapse" id="4c6fc729-78b4-4d06-bbdd-749c96cafd05">
<ul class="list-group">
<li class="list-group-item">
<h6>Direct Connect Drive Status</h6>
<div class="float-left text-warning">Not Configured - Check Settings</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="list-group-item">
<a href="#5b2e25aa-c480-445b-91a6-a46f61291a51" data-toggle="collapse">
<h5>aaa</h5>
</a>
<div class="collapse" id="5b2e25aa-c480-445b-91a6-a46f61291a51">
<ul class="list-group">
<li class="list-group-item">
<a href="#cd2a0ea7-1935-4546-9b2a-c9a3fa9ffb47" data-toggle="collapse">
<h5>Station module 2</h5>
</a>
<div class="collapse" id="cd2a0ea7-1935-4546-9b2a-c9a3fa9ffb47">
<ul class="list-group">
<li class="list-group-item">
<h6>Direct Connect Drive Status</h6>
<div class="float-left text-warning">Not Configured - Check Settings</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</body>
</html>


Using element id's that start with numbers won't work. Rename the id's, or prepend a non-numeric char such as _...
Demo: https://www.codeply.com/go/1xEVX8Ye2u
<ul class="list-group">
<li class="list-group-item">
<a href="#c6f8ebd3-5a92-461d-a37b-dcf314897361" data-toggle="collapse" class="" aria-expanded="true">
<h5>132</h5>
</a>
<div class="collapse show" id="c6f8ebd3-5a92-461d-a37b-dcf314897361" style="">
<ul class="list-group">
<li class="list-group-item">
<a href="#e867a283-4dee-44fa-884a-6b7cf7cc42fe" data-toggle="collapse" class="" aria-expanded="true">
<h5>Hello</h5>
</a>
<div class="collapse show" id="e867a283-4dee-44fa-884a-6b7cf7cc42fe" style="">
<ul class="list-group">
<li class="list-group-item">
...
</li>
</ul>
</div>
</li>
<li class="list-group-item">
<a href="#_50e71ff4-7ef5-4b2e-8615-cdfe328320a9" data-toggle="collapse">
<h5>name 2</h5>
</a>
<div class="collapse" id="_50e71ff4-7ef5-4b2e-8615-cdfe328320a9">
<ul class="list-group">
<li class="list-group-item">
...
</li>
</ul>
</div>
</li>
<li class="list-group-item">
<a href="#_4c6fc729-78b4-4d06-bbdd-749c96cafd05" data-toggle="collapse">
<h5>Test Assign</h5>
</a>
<div class="collapse" id="_4c6fc729-78b4-4d06-bbdd-749c96cafd05">
<ul class="list-group">
<li class="list-group-item">
...
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="list-group-item">
<a href="#5b2e25aa-c480-445b-91a6-a46f61291a51" data-toggle="collapse">
<h5>aaa</h5>
</a>
<div class="collapse" id="5b2e25aa-c480-445b-91a6-a46f61291a51">
<ul class="list-group">
<li class="list-group-item">
<a href="#cd2a0ea7-1935-4546-9b2a-c9a3fa9ffb47" data-toggle="collapse">
<h5>Station module 2</h5>
</a>
<div class="collapse" id="cd2a0ea7-1935-4546-9b2a-c9a3fa9ffb47">
<ul class="list-group">
<li class="list-group-item">
...
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>

Related

Bootstrap Tabs Float Image Right

I've got a basic nav-tabs in Twitter Bootstrap and I've got an image after all of my tabs, that I'd like to float right. I've tried modifying its float, text-align, and other attributes, and even the pull-right class as mentioned on a separate but related SO question.
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="stuff-tab" data-toggle="tab" href="#stuff" role="tab" aria-controls="stuff" aria-selected="true">Stuff</a>
</li>
<!-- ... -->
<img class="pull-right text-right float-right" src="myimg.png" width="32px" height="32px">
What Bootstrap class or CSS should I write to make my image float to the right?
(Bootstrap 4 if that matters)

<nav class="navbar header navbar-light bg-dark" id="myHeader">
<div class="container">
<p class="">logo</p>
// from here you get all elements on right side
<ul class="list-inline">
<li class="list-inline-item">
<div class="frqst">
<button class="fas fa-users btn text-white"></button>
<div>
<ul class="list-group">
<li class="border-bottom">
<p>first right item
</p>
</li>
</ul>
</div>
</div>
</li>
<li class="list-inline-item">
<button class="fas fa-comment btn text-white">second right item</button>
</li>
<li class="list-inline-item">
<p>third right item</p>
</li>
<li class="list-inline-item">
<img src="../../myimg.jpg">
</li>
<li class="list-inline-item">
<a class="text-white" href="./models/logout.html">Logout</a>
</li>
</ul>
</div>
</nav>

Put a div tag around the image and use d-flex justify-content-end like this:
<div class="row">
<div class="col-md-12">
<div class="">
<div class="">
<ul class="nav nav-pills w-100">
<li class="nav-item">
<a class="nav-link active" id="stuff-tab" data-toggle="tab" href="#stuff" role="tab"
aria-controls="stuff" aria-selected="true">Stuff</a>
</li>
</ul>
</div>
<div class="d-flex justify-content-end">
<img src="https://cdn.searchenginejournal.com/wp-content/uploads/2019/09/f46bc1a6-9ffa-4434-a77a-ea1491d3597a-760x400.jpeg"
class="">
</div>
</div>
</div>
</div>
I tested this. Should work.
Another you can try:
<div class="col-md-12" style="border-top: 2px solid #000;">
<div class="mx-4">
<div class="footer pt-3">
<div class="row">
<div class="col-md-6">
<ul>
<li class="nav-item">
<a class="nav-link active" id="stuff-tab" data-toggle="tab" href="#stuff" role="tab" aria-controls="stuff"
aria-selected="true">Stuff</a>
</li>
</ul>
</div>
<div class="col-md-6">
<div class="float-right">
<img class="pull-right text-right float-right" src="http://placekitten.com/301/301" width="32px" height="32px">
</div>
</div>
</div>
</div>
</div>
</div>

Resizing Bootatrap4 Navigation bar not working acordingly

.navbar.navbar-expand-lg.navbar-light.bg-light{
width:1920px;
background-color:#eee;
height:50px;
}
footer{
background-color:grey;
}
#media screen and (min-width:320px){
.navbar.navbar-expand-lg.navbar-light.bg-light{
width:100%;
}
}
#media screen and (min-width:985px){
#tog{
height:50px;
}
}
<div class="container-fluid">
<div class="row">
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="tog" role="navigation">
<div class="navbar-header">
<a id="x" class="navbar-brand" href="http://disputebills.com">
<img style="padding-bottom:75px; " id="image;" src="assets/logo.png" alt=" x">MANAGEMENT SYSTEM
</a>
</div>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon" id="but"></span>
</button>
<div class="collapse navbar-collapse justify-content-between" id="collapsibleNavbar">
<div class="col-2"></div>
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" routerLink="/table">Details
</a>
</li>
<li class="nav-item active">
<a class="nav-link" routerLink="/assigned-employees">Employees</a>
</li>
<li class="nav-item active ">
<a class="nav-link" routerLink="/bug-reporting">Report</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="container-fluid">
<div class="row">
<footer id="footer" role="contentinfo">
<div class="container-fluid">
<div class="row footer-list-row">
<div class="col-sm-6">
<div class="row">
<div class="col-xs-6" id="com">
<h3>Company</h3>
<ul>
<li>
<a href=''>About</a>
</li>
<li>
<a href=''>News</a>
</li>
<li>
<a href=''>Careers</a>
</li>
</ul>
</div>
<div class="col-xs-6" id="sol">
<h3>Solutions</h3>
<ul>
<li>
<a href=''>Applications</a>
</li>
<li>
<a href=''>Planning</a>
</li>
<li>
<a href=''>Service</a>
</li>
<li>
<a href=''>Management</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-xs-6" id="part">
<h3>Part</h3>
<ul>
<li>
<a href=''>Partner</a>
</li>
<li>
<a href=''>Partner</a>
</li>
<li>
<a href=''>Login</a>
</li>
</ul>
</div>
<div class="col-xs-6" id="contact">
<h3>Contact Us</h3>
<ul>
<li>
<a href=''>Contact Us</a>
</li>
<li>
<a href=''>Addresses</a>
</li>
<li>
<a href=''>Feedback</a>
</li>
<li>
<a href=''>Login</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</footer>
</div>
</div>
I have implemented bootstrap 4 navigation bar inside my web application.Since it is little bit of tall than I expected I needed to customize its height in to 50px. Soon after I did the customization, mobile view stated to show a malicious behavior. when I try to expand the menu by clicking the "List Icon" it expands the list underneath of other DIV s like follow (Like when it has z index -1)
List View
This is the html code I used for navigation bar
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="tog" role="navigation" style="width:1920px; height:50px;">
<div class="navbar-header">
<a id="x" class="navbar-brand" href="http://disputebills.com">
<img style="padding-bottom:75px; " id="image;" src="assets/logo.png" alt="Dispute Bills">ATTENDENCE MANAGEMENT SYSTEM
</a>
</div>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon" id="but"></span>
</button>
<div class="collapse navbar-collapse justify-content-between" id="collapsibleNavbar">
<div class="col-2"></div>
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" routerLink="/table">My Details
</a>
</li>
<li class="nav-item active">
<a class="nav-link" routerLink="/assigned-employees">Assigned Employees List</a>
</li>
<li class="nav-item active ">
<a class="nav-link" routerLink="/bug-reporting">Report Bugs</a>
</li>
</ul>
</div>
</nav>
I have tried by changing the z-index. But it didn't work for me. any clue on this please

Dropdown menu inside tabbable bootstrap

I am trying to integrate bootstrap tabs and dropdown menus using Bootstrap 2.3.4
<div class="container">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<div class="nav-no-collapse header-nav">
<ul class="nav pull-left nav-tabs">
<li class="dropdown">
<a href="/Home">
<i class="icon-bar-chart"></i></a>
</li>
<li class="dropdown"><i class="icon-refresh"></i>
</li>
<li>Development </li>
<li>Testing </li>
</ul>
</div>
</div>
<div class="container-fluid">
<div class="tab-content">
<div class="tab-pane fade" id="dev">
<ul class="nav pull-left">
<li class="dropdown"><a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Dev</a>
<ul class="dropdown-menu">
<li>
Dev1
Dev2
Dev3
</li>
</ul>
</li>
</ul>
</div>
<div class="tab-pane fade" id="testing">
<ul class="nav pull-left">
<li class="dropdown"><a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Staging</a>
<ul class="dropdown-menu">
<li>
Staging 1
Staging 2
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
But its not showing the dropdown menu properly
The menu goes somewhere and puts a scroll inside it.
JSFIDDLE Demo

You can fix your problem with just adding a simple line of
.tab-content{
overflow:inherit !important;
}
see demo below
.tab-content{
overflow:inherit !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootswatch/2.3.2/cerulean/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<div class="nav-no-collapse header-nav">
<ul class="nav pull-left nav-tabs">
<li class="dropdown"><a href="/Home">
<i class="icon-bar-chart"></i></a></li>
<li class="dropdown"><a href="javascript:RefreshAll();"
title="Refresh All"><i class="icon-refresh"></i></a>
</li>
<li>Development </li>
<li>Testing </li>
</ul>
</div>
</div>
<div class="container-fluid">
<div class="tab-content">
<div class="tab-pane fade" id="dev">
<ul class="nav pull-left">
<li class="dropdown"><a class="btn dropdown-toggle" data-toggle="dropdown"
href="#">Dev</a>
<ul class="dropdown-menu">
<li>
Dev1
Dev2
Dev3
</li>
</ul>
</li>
</ul>
</div>
<div class="tab-pane fade" id="testing">
<ul class="nav pull-left">
<li class="dropdown"><a class="btn dropdown-toggle" data-toggle="dropdown"
href="#">Staging</a>
<ul class="dropdown-menu">
<li>
Staging 1
Staging 2
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>

Bootstrap 3.0 Height 100% not working

I've set everything I need 100% to to 100% height but the sidebar still refuses to got to the bottom of the page when using Bootstrap 3.0. I've used the -9999px trick but that knocks out the dropdown I have in the navigation above it so I can't use that fix.
What I've tried instead is:
<div class="row-fluid fill">
<nav class="col-lg-2 fill">
<a class="btn btn-link" href="#"><span class="glyphicon glyphicon-piggy-bank navicon" aria-hidden="true"></span> Animal Care</a><br />
<a class="btn btn-link" href="#"><span class="glyphicon glyphicon-user navicon" aria-hidden="true"></span> Customers</a><br />
<a class="btn btn-link" href="#"><span class="glyphicon glyphicon-gift navicon" aria-hidden="true"></span> Donations</a><br />
<a class="btn btn-link" href="#"><span class="glyphicon glyphicon-calendar navicon" aria-hidden="true"></span> Events</a><br />
<a class="btn btn-link" href="#"><span class="glyphicon glyphicon-screenshot navicon" aria-hidden="true"></span> Marketing</a><br />
<a class="btn btn-link" href="#"><span class="glyphicon glyphicon-briefcase navicon" aria-hidden="true"></span> Staff Mangement</a><br />
<a class="btn btn-link" href="#"><span class="glyphicon glyphicon-globe navicon" aria-hidden="true"></span> Web Maintenance</a><br />
<a class="btn btn-link" href="#"><span class="glyphicon glyphicon-shopping-cart navicon" aria-hidden="true"></span> Products & Stock</a><br />
</nav>
<div class="col-lg-10 content fill">
<h1>Dashboard</h1>
<ul class="breadcrumb">
<li class="active">Home</li>
</ul>
<div class="row-fluid">
<div class="col-lg-4 zookeeper excount">
10
</div>
<div class="col-lg-4 birdofprey excount">
10
</div>
<div class="col-lg-4 otherex excount">
1
</div>
</div>
<div class="row-fluid">
<div class="col-lg-4 exlabel">
Zoo Keeper Experiences
</div>
<div class="col-lg-4 exlabel">
Bird of Prey Experiences
</div>
<div class="col-lg-4 exlabel">
Other Events
</div>
</div>
<div class="row-fluid">
<div class="col-lg-12 dashtoday">
<h2>Today - 17th March 2015</h2>
<div role="tabpanel">
<ul class="nav nav-tabs" role="tablist" id="dashTabs">
<li role="presentation" class="active">To-Do</li>
<li role="presentation">Keeper Log</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="todo">
<ul class="nav nav-pills nav-stacked dashtodo">
<li class="active todoitem">
To-Do Item Outstanding
</li>
<li class="active todoitem">
To-Do Item Outstanding
</li>
<li class="disabled">
To-Do Item Complete
</li>
<li class="active todoitem">
To-Do Item Outstanding
</li>
<li class="active todoitem">
To-Do Item Outstanding
</li>
<li class="active todoitem">
To-Do Item Outstanding
</li>
</ul>
</div>
<div role="tabpanel" class="tab-pane fade" id="keeperlog">
<ul class="nav nav-pills nav-stacked dashtodo">
<li class="active todoitem">
To-Do Item Outstanding
</li>
<li class="disabled">
To-Do Item Complete
</li>
<li class="disabled">
To-Do Item Complete
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And the CSS I've added to Boostrap for the height is:
html, body {
height: 100%;
}
.fill {
min-height: 100%;
height: 100%;
}

The culprit was a form tag that has been inserted automatically by ASP.Net to render the controls. The simple fix was to change the CSS to:
html, body, form {
height: 100%;
}
.fill {
min-height: 100%;
height: 100%;
}
The height now works as expected

Bootstrap navbar responsivness

I have got a centered logo in my navbar and three menu categories on the side,when i reduce my resolution some categories start to disappear and when i reduce the resolution for navbar collapse things then get really messed up,the whole collapse menu is shown behind the main slider i have got.This is my code.
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="height:90px;">
<div class="container-fluid">
<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>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<div class="row">
<div class="col-md-4">
<ul class="nav navbar-nav ">
<li class="active menu-item">
<a class="menu-link" href="#">Home</a>
</li>
<li class="menu-item">
<a class="menu-link" href="#">About us</a>
</li>
<li class="menu-item">
<a class="menu-link" href="#">Events</a>
</li>
</ul>
</div>
<div class="col-md-4">
<img class="img-responsive center-block" src="images/Night-club.png" title="Night-club logo" alt="Night-club logo">
</div>
<div class="col-md-4">
<ul class="nav navbar-nav ">
<li class="menu-item">
<a class="menu-link" href="#">Gallery</a>
</li>
<li class="menu-item">
<a class="menu-link" href="#">Reservation</a>
</li>
<li class="menu-item">
<a class="menu-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<div class="main-slider-simple">
<ul class="img-slider">
<li>
<img class="img-responsive" src="images/main-img.jpg" title="Night club " alt="Night club " />
</li>
<li>
<img class="img-responsive" src="images/main-img2.jpg" title="Night club " alt="Night club " />
</li>
<li>
<img class="img-responsive" src="images/main-img3.jpg" title="Night club " alt="Night club " />
</li>
</ul>
<!-- Glavni slider -->
</div>
And here is css for the menu links i have set up...
.menu-item{
margin-top:50px;
margin-left:30px;
margin-right:20px;
font-size:30px;
}
How can i accomplish normal responsivness?
Here is the jsfiddle that kinda explains my situation.
http://jsfiddle.net/cELuF/

I've changed the css for the div
.col-md-4
http://jsfiddle.net/cELuF/2/
You will be able to see what i've added in the CSS box.