Two Columns Side By Side Scrollable
My page looks something like this I have two seperate divs one being the product filter while the other is the products div.The products content can display either 40 products or
Solution 1:
I see from your question you are using Bootstrap classes, which I am less familiar with, but here is an approach to a solution using CSS Flexbox module and other responsive CSS techniques:
.container {
position: relative;
width: 98%;
}
.navbar {
height: 30px;
background-color:rgb(255,0,0);
}
.product-filter {
display:block;
position:absolute;
top:30px;
left:0;
width:20%;
height: calc(100% - 30px);
overflow-y: auto;
background-color:rgb(127,255,127);
}
.product-filter ul {
margin-left:0;
padding-left:0;
list-style:none;
}
.product-filter li {
display:block;
margin: 0 auto;
width:80%;
margin-bottom:6px;
padding:6px 0;
color:rgb(255,255,255);
font-weight:bold;
text-align:center;
background-color:rgb(0,163,0);
border:2px solid rgb(255,255,255);
}
.products {
display:flex;
flex-wrap: wrap;
justify-content:flex-start;
flex: 1 0 80%;
margin-left:20%;
background-color:rgb(255,255,0);
}
.product {
width:100px;
height:100px;
margin: 12px;
background-color:rgb(255,191,0);
}<div class="container">
<div class="navbar"></div>
<div class="product-filter">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
<li>Item 15</li>
<li>Item 16</li>
<li>Item 17</li>
<li>Item 18</li>
<li>Item 19</li>
<li>Item 20</li>
<li>Item 21</li>
<li>Item 22</li>
<li>Item 23</li>
<li>Item 24</li>
<li>Item 25</li>
<li>Item 26</li>
<li>Item 27</li>
<li>Item 28</li>
<li>Item 29</li>
<li>Item 30</li>
<li>Item 31</li>
<li>Item 32</li>
<li>Item 33</li>
<li>Item 34</li>
<li>Item 35</li>
<li>Item 36</li>
<li>Item 37</li>
<li>Item 38</li>
<li>Item 39</li>
<li>Item 40</li>
</ul>
</div>
<div class="products">
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
</div>Solution 2:
Try this snippet
check demo here
HTML:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<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="#">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"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></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><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
Start Bootstrap
</a>
</li>
<li>
<a href="#">Dashboard</a>
</li>
<li>
<a href="#">Shortcuts</a>
</li>
<li>
<a href="#">Overview</a>
</li>
<li>
<a href="#">Events</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1>Simple Sidebar</h1>
<p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens,
the page content will be pushed off canvas.</p>
<p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
<a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a>
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
</div>
</div>
</div>
CSS:
body {
overflow-x: hidden;
}
/* Toggle Styles */
#wrapper {
padding-left: 0;
margin-top: 50px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -250px;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255, 255, 255, 0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
@media(min-width:768px) {
#wrapper {
padding-left: 250px;
}
#wrapper.toggled {
padding-left: 0;
}
#sidebar-wrapper {
width: 250px;
}
#wrapper.toggled #sidebar-wrapper {
width: 0;
}
#page-content-wrapper {
padding: 20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}
JS:
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
Solution 3:
May I suggest a javascript solution to this?
product column every 500ms
filter column to equal to the product column' height every half second
overflow:auto rule was added to the filter column in the event that the contents is in the filter column overflows despite the product column height is the same as the filter column
var filter_col = document.getElementById("filter");
var product_col = document.getElementById("product");
function det_size() {
var height = getComputedStyle(product_col, null).height;
filter_col.style.height = height;
}
var keep_checking = setInterval(det_size, 500)
//Use a set timeout function to test results
alert("I am now adding contents to the filter column to determine if it is scrollable")
setTimeout(function() {
filter_col.innerHTML = product_col.innerHTML + product_col.innerHTML
}, 2000).row1,
.row2 {
border: solid red;
position: relative;
display: inline-block;
vertical-align: top;
}
.row1 {
overflow-y: auto;
width: 40%;
}
.row2 {
width: 40%;
}<div class="container">
<div class="row1" id="filter">
</div>
<div class="row2" id="product">
Robert Wertheimer Frucht (later known as Roberto Frucht) (9 August 1906 – 26 June 1997)[1][2] was a German-Chilean mathematician; his research specialty was graph theory and the symmetries of graphs. The Frucht graph. In 1908, Frucht's family moved from
Brünn, Austria-Hungary (now in the Czech Republic), where he was born, to Berlin.[2] Frucht entered the University of Berlin in 1924 with an interest in differential geometry, but switched to group theory under the influence of his doctoral advisor,
Issai Schur; he received his Ph.D. in 1931.[3][4] Unable to find academic employment in Germany due to his Jewish descent, he became an actuary in Trieste, but left Italy in 1938 because of the racial laws that came into effect at that time.[3][5]
He moved to Argentina, where relatives of his wife lived, and attempted to move from there to the United States, but his employment outside academia prevented him from obtaining the necessary visa.[2][5] At the same time Robert Breusch, another German
mathematician who had been working in Chile for three years but was leaving for the U.S., invited Frucht to fill his position at Federico Santa María Technical University in Valparaiso, Chile, where Frucht found an academic home beginning in 1939.[1][2][6]
At Santa María, Frucht became dean of the faculty of mathematics and physics from 1948 to 1968, and retired to become an emeritus professor in 1970.[2] Frucht is known for Frucht's theorem, the result that every group can be realized as the group
of symmetries of an undirected graph,[7][8] and for the Frucht graph, one of the two smallest cubic graphs without any nontrivial symmetries. LCF notation, a method for describing cubic Hamiltonian graphs, was named for the initials of Joshua Lederberg,
H. S. M. Coxeter, and Frucht, its key developers.[9] Frucht was elected to the Chilean Academy of Sciences as a corresponding member in 1979.[2] A special issue of the Journal of Graph Theory was published in Frucht's honor in 1982,[2][10] and another
special issue of the journal Scientia, Series A (the journal of the mathematics department of Federico Santa María Technical University) was published in honor of his 80th birthday in 1986.[2][11]
</div>
</div>Solution 4:
It should be done this way (no javascript needed):
Product Filter can only calculate height from it's parent block, so a container div is needed, whose height depends on Products.
To layout these two divs as columns, set margin-left of Products to width of Product Filter. Position Product Filter absolutely, with fixed width.
Set min-height to keep both columns from collapsing into 0px.
It could look like below
html:
<div class='container'>
<div class='navbar'>...</dev>
<div class='products-container'>
<div class='product-filter'>...</div>
<div class='products'>...<div>
</div>
</div>
css:
.products-container {
position: relative;
min-height: 200px;
}
.product-filter {
position: absolute;
height: 100%;
width: 100px;
overflow: scroll;
}
.products {
margin-left: 100px;
}
Hope that you get the hang of it.
Solution 5:
May be you want something like this.Try this:-
$win = $(window);
$win.on('scroll', function() {
$("#side-content").css({"position":"absolute", "top":"0"}, $win.scrollTop() > 1);
});
Post a Comment for "Two Columns Side By Side Scrollable"