Two Columns Side By Side Scrollable

October 27, 2023 Post a Comment

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-filterul {
margin-left:0;
padding-left:0;
list-style:none;
}

.product-filterli {
display:block;
margin: 0 auto;
width:80%;
margin-bottom:6px;
padding:6px0;
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: 1080%;
margin-left:20%;
background-color:rgb(255,255,0);
}

.product {
width:100px;
height:100px;
margin: 12px;
background-color:rgb(255,191,0);
}

<divclass="container"><divclass="navbar"></div><divclass="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><divclass="products"><divclass="product"></div><divclass="product"></div><divclass="product"></div><divclass="product"></div><divclass="product"></div><divclass="product"></div><divclass="product"></div><divclass="product"></div><divclass="product"></div><divclass="product"></div><divclass="product"></div><divclass="product"></div><divclass="product"></div><divclass="product"></div><divclass="product"></div><divclass="product"></div></div>

Solution 2:

Try this snippet

check demo here

HTML:

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <divclass="container-fluid"><!-- Brand and toggle get grouped for better mobile display --><divclass="navbar-header"><buttontype="button"class="navbar-toggle"data-toggle="collapse"data-target="#bs-example-navbar-collapse-1"><spanclass="sr-only">Toggle navigation</span><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span></button><aclass="navbar-brand"href="#">Brand</a></div><!-- Collect the nav links, forms, and other content for toggling --><divclass="collapse navbar-collapse"id="bs-example-navbar-collapse-1"><ulclass="nav navbar-nav"><liclass="active"><ahref="#">Link</a></li><li><ahref="#">Link</a></li><liclass="dropdown"><ahref="#"class="dropdown-toggle"data-toggle="dropdown">Dropdown <bclass="caret"></b></a><ulclass="dropdown-menu"><li><ahref="#">Action</a></li><li><ahref="#">Another action</a></li><li><ahref="#">Something else here</a></li><liclass="divider"></li><li><ahref="#">Separated link</a></li><liclass="divider"></li><li><ahref="#">One more separated link</a></li></ul></li></ul><formclass="navbar-form navbar-left"role="search"><divclass="form-group"><inputtype="text"class="form-control"placeholder="Search"></div><buttontype="submit"class="btn btn-default">Submit</button></form><ulclass="nav navbar-nav navbar-right"><li><ahref="#">Link</a></li><liclass="dropdown"><ahref="#"class="dropdown-toggle"data-toggle="dropdown">Dropdown <bclass="caret"></b></a><ulclass="dropdown-menu"><li><ahref="#">Action</a></li><li><ahref="#">Another action</a></li><li><ahref="#">Something else here</a></li><liclass="divider"></li><li><ahref="#">Separated link</a></li></ul></li></ul></div><!-- /.navbar-collapse --></div><!-- /.container-fluid --></nav><divclass="container-fluid"><divclass="row"><divclass="col-sm-12"><divid="wrapper"><!-- Sidebar --><divid="sidebar-wrapper"><ulclass="sidebar-nav"><liclass="sidebar-brand"><ahref="#">
                        Start Bootstrap
                    </a></li><li><ahref="#">Dashboard</a></li><li><ahref="#">Shortcuts</a></li><li><ahref="#">Overview</a></li><li><ahref="#">Events</a></li><li><ahref="#">About</a></li><li><ahref="#">Services</a></li><li><ahref="#">Contact</a></li></ul></div><!-- /#sidebar-wrapper --><!-- Page Content --><divid="page-content-wrapper"><divclass="container-fluid"><divclass="row"><divclass="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><ahref="#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-navli {
   text-indent: 20px;
   line-height: 40px;
 }

 .sidebar-navlia {
   display: block;
   text-decoration: none;
   color: #999999;
 }

 .sidebar-navlia:hover {
   text-decoration: none;
   color: #fff;
   background: rgba(255, 255, 255, 0.2);
 }

 .sidebar-navlia:active,
 .sidebar-navlia:focus {
   text-decoration: none;
 }

 .sidebar-nav > .sidebar-brand {
   height: 65px;
   font-size: 18px;
   line-height: 60px;
 }

 .sidebar-nav > .sidebar-branda {
   color: #999999;
 }

 .sidebar-nav > .sidebar-branda: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?

Keep checking for the height of the product column every 500ms

Adjust the height of the the filter column to equal to the product column' height every half second

An initial 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");

functiondet_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 resultsalert("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%;
}

<divclass="container"><divclass="row1"id="filter"></div><divclass="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'>
  <divclass='navbar'>...</dev><divclass='products-container'><divclass='product-filter'>...</div><divclass='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);
    });

link:-Left column scrolling, other options then scrollbar?

Html5 Developer