Copy link to clipboard
Copied
Hello, all,
I'm trying to use collapse on a higher z-index than the rest of the page, so when expanded it will cover part of the page content.
However, I can't seem to get Bootstrap to co-operate with my desired design. Upon clicking the element that expands and collapses the content, the hidden content starts out "over" the page content, but as soon as the expanding is completed it "sinks below" the page content.
How can I get the expanded content to stay "above" the page content?
V/r,
^ _ ^
The closest youll get to anything available in Bootstrap which will do what you need is using data-toggle, without writing your own js or jquery.
Use the bootstrap class position-absolute on the div you want to toggle , the one which is activated by clicking on the 'archives' text. This will force it above the rest of the page content. Be aware the absolutely positioned div must be inside a parent container with the bootstrap class position-relative.
Once you have that set up you can put as many d
...Copy link to clipboard
Copied
The closest youll get to anything available in Bootstrap which will do what you need is using data-toggle, without writing your own js or jquery.
Use the bootstrap class position-absolute on the div you want to toggle , the one which is activated by clicking on the 'archives' text. This will force it above the rest of the page content. Be aware the absolutely positioned div must be inside a parent container with the bootstrap class position-relative.
Once you have that set up you can put as many data-toggle divs in it as you want.
The dropdown solution of yesterday will not work as Bootstrap deavtivates it when you click anywhere inside of it hence the reason why you cant choose to show another embedded dropdown.
Copy link to clipboard
Copied
Thank you, osgood_, I had no idea about the position-absolute/position-relative classes. I'll give that a shot.
(For someone who has such disdain for Bootstrap, you seem to know a lot about it. )
V/r,
^ _ ^
Copy link to clipboard
Copied
Below is an example using Bootstrap 4, plus a handful of bespoke css classes. Would I recommend doing it this way, no. I would use less classes and jQuery to target and open/close the <divs>, keeps the html code nice and clean. I've left plenty of sapce betwenn the divs and commented them so you can see what is going on.
Uses CDN Bootstrap 4 hosted files so you'll have to hook up your local files, as I know you cant link to hosted files.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap Div</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
* {
box-sizing: border-box;
}
.trigger {
cursor: pointer;
}
#blog_archives {
border: 1px solid #ccc;
padding: 15px;
top: 2.6em;
width: 96%;
background-color: #fff;
}
#blog_archives ul {
margin: 0 0 10px 0;
padding: 0;
}
#blog_archives ul li {
margin: 0;
padding: 0 0 5px 0;
list-style: none;
cursor: pointer;
}
#blog_archives h6 {
cursor: pointer;
}
.blog-entry li {
padding: 0 0 0 15px!important;
}
</style>
</head>
<body>
<div class="container">
<div class="row bg-primary p-3">
<div class="col-md-8">
<h6 class="text-white">Recent Blogs (Dec 2014 - Sep 2013)</h6>
</div>
<div class="col-md-4 p-relative position-relative">
<div class="trigger text-white" data-toggle="collapse" data-target="#blog_archives">Archives</div>
<div id="blog_archives" class="collapse position-absolute">
<h6 data-toggle="collapse" data-target="#2018">2018</h6>
<ul id="2018" class="collapse text-black">
<li data-toggle="collapse" data-target="#dec2018">December
<ul id="dec2018" class="blog-entry collapse">
<li>Blog entry 1</li>
<li>Blog entry 2</li>
<li>Blog entry 3</li>
<li>Blog entry 4</li>
<li>Blog entry 5</li>
</ul>
</li>
<!-- end dec2018 -->
<li data-toggle="collapse" data-target="#nov2018">November
<ul id="nov2018" class="blog-entry collapse">
<li>Blog entry 1</li>
<li>Blog entry 2</li>
<li>Blog entry 3</li>
<li>Blog entry 4</li>
<li>Blog entry 5</li>
</ul>
</li>
<!-- end nov2018 -->
</ul>
<!-- end 2018 -->
<h6 data-toggle="collapse" data-target="#2017">2017</h6>
<ul id="2017" class="collapse">
<li data-toggle="collapse" data-target="#dec2017">December
<ul id="dec2017" class="blog-entry collapse">
<li>Blog entry 1</li>
<li>Blog entry 2</li>
<li>Blog entry 3</li>
<li>Blog entry 4</li>
<li>Blog entry 5</li>
</ul>
</li>
<!-- end dec2017 -->
<li data-toggle="collapse" data-target="#nov2017">November
<ul id="nov2017" class="blog-entry collapse">
<li>Blog entry 1</li>
<li>Blog entry 2</li>
<li>Blog entry 3</li>
<li>Blog entry 4</li>
<li>Blog entry 5</li>
</ul>
</li>
<!-- end nov2017 -->
</ul>
<!-- end 2017 -->
<h6 data-toggle="collapse" data-target="#2016">2016</h6>
<ul id="2016" class="collapse">
<li data-toggle="collapse" data-target="#dec2016">December
<ul id="dec2016" class="blog-entry collapse">
<li>Blog entry 1</li>
<li>Blog entry 2</li>
<li>Blog entry 3</li>
<li>Blog entry 4</li>
<li>Blog entry 5</li>
</ul>
</li>
<!-- end dec2017 -->
<li data-toggle="collapse" data-target="#nov2016">November
<ul id="nov2016" class="blog-entry collapse">
<li>Blog entry 1</li>
<li>Blog entry 2</li>
<li>Blog entry 3</li>
<li>Blog entry 4</li>
<li>Blog entry 5</li>
</ul>
</li>
<!-- end nov2016 -->
</ul>
<!-- end 2016 -->
</div>
<!-- end blog_archives -->
</div>
<!-- end col-md-4 -->
</div>
<!-- end row -->
<div class="row">
<h3>Page content goes here. Page content goes here. Page content goes here. Page content goes here. Page content goes here.</h3>
</div>
</div>
<!-- end container -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Copy link to clipboard
Copied
This definitely helped. Had to do a lot of finagling (is that a word?) to get it to work the way I had intended, but it's now working precisely as the customer wants. Thanks!
V/r,
^ _ ^
Copy link to clipboard
Copied
No problem, happy Bootstraping.
Lots of finagling sounds about right.