Menu
I am using bootstrap 4. I have 3 columns in a single row. One of the columns contains a list and the other two do not. I want only the column with the list to be scrollable but not the entire container, which means that the scrollbar muss appear only within that column.
I would appreciate any help.
<div class="row">
<div class="col-sm-4">
<div class="card">...
<div class="col-sm-4">
<div class="card">...
<div class="col-sm-4">
<div class="card">...
</div>
603
It can be done by the following approach: Approach: Making all the div element in next line using position: absolute; property (arrange all div column-wise). Adding the scroll bar to all the div element using overflow-y: scroll; property.
Add data-spy="scroll" to the element that should be used as the scrollable area (often this is the <body> element). Then add the data-target attribute with a value of the id or the class name of the navigation bar ( . navbar ). This is to make sure that the navbar is connected with the scrollable area.
All you have to do is force the height of the containing div (here a row) to the height of the viewport. Then you make all the columns 100% height and set the overflow-y to scroll. That way any overflow on the column will be scrollable, but they will still take up the whole page.
You could do something like this:
<div class="row">
<div class="col-sm-4">
<div class="card">...</div>
</div>
<div class="col-sm-4 scroll">
<div class="card">...</div>
</div>
<div class="col-sm-4">
<div class="card">...</div>
</div>
</div>
then in your css:
.scroll {
max-height: 100px;
overflow-y: auto;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
