How can I create scrollable columns in Bootstrap?

Question

I created a new template file template-home2.php in a Wordpress Theme.

In there I have a row with 3 columns, I would like to make each of these columns scrollable instead of the entire page. How can I achieve that?

I have a class scrollable that I apply to the outer section of the page to make it scrollable.

<section class="<?php if( get_theme_mod( 'hide-player' ) == 0 ){ echo "w-f-md";} ?>" id="ajax-container">
    <section class="hbox stretch bg-black dker">
        <section>
            <section class="vbox">
                <section class="scrollable">
                    <div class="row">
                       <div class="col-md-5 no-padder no-gutter">
                           some data
                       </div>
                       <div class="col-md-4 no-padder no-gutter">
                           some data
                       </div>
                       <div class="col-md-3 no-padder no-gutter">
                           some data
                       </div>
                    </div>
                </section>
            </section>
        </section>
    </section>
</section>

When I remove the class “scrollable” from the main section and include it in the column div, the column disappears and the other 2 columns overflow on the elements below.

This is the relevant CSS

.scrollable {
  overflow-x: hidden;
  overflow-y: auto;
}
.no-touch .scrollable.hover {
  overflow-y: hidden;
}
.no-touch .scrollable.hover:hover {
  overflow: visible;
  overflow-y: auto;
}
.slimScrollBar {
  border-radius: 5px;
  border: 2px solid transparent;
  border-radius: 10px;
  background-clip: padding-box !important;
}

Thank you for your help.

UPDATED CODE

.homecol1, .homecol2, .homecol3 {
    position: absolute;
    overflow-y: scroll;
}

<section class="<?php if( get_theme_mod( 'hide-player' ) == 0 ){ echo "w-f-md";} ?>" id="ajax-container">
    <section class="hbox stretch bg-black dker">
        <section>
            <section class="vbox">
                <section class="scrollable">
                    <div class="row">
                       <div class="col-md-5 no-padder no-gutter homecol1">
                           some data
                       </div>
                       <div class="col-md-4 no-padder no-gutter homecol2">
                           some data
                       </div>
                       <div class="col-md-3 no-padder no-gutter homecol3">
                           some data
                       </div>
                    </div>
                </section>
            </section>
        </section>
    </section>
</section>

Can you please provide a JS fiddle, not quite sure what you want to achieve — Tom Withers, Jan 26 '16 at 22:27
It's gonna be hard to get it to work in jsfiddle. But would a live url to the site do the job? — Halnex, Jan 26 '16 at 22:50
@GuruTom You can have a look at the complete layout here: http://utopic.vision/html/ - for now I've added "scrollable" class to the first column and that's why it's invisible. — Halnex, Jan 26 '16 at 23:18
I think it has to do with the fact that the row/columns don't have a specified height. I played around in the developer tools and gave the row a height of 100% and columns a height of 100% and then you can apply `overflow-y: scroll` to get them to scroll. — alyssums, Jan 26 '16 at 23:37

score 15 · Accepted Answer · edited Jan 16 '18 at 03:47

15

To achieve this, you will first need to give each column a class. Then you need to give them the following properties:

.your-class {
    position: absolute;
    overflow-y: scroll;
}

You may also want to give your body the property overflow: hidden;

Please tell me if this works and if not I'll help further!

Edit: Created a JSFiddle

https://jsfiddle.net/mjmwaqfp/2/

edited Jan 16 '18 at 03:47

Mamun

66,969
9
47
59

answered Jan 26 '16 at 23:36

Tom Withers

1,171
4
16
28

8

This - currently accepted answer - is not a good idea. this will - completely - destroy the responsiveness of your bootstrap layout. Should have known as soon as I saw "position: absolute;" – Jan 10 '18 at 02:27
1

As soon as the page is viewed at a width that will cause the columns to responsively shift - the shifting columns will become hidden under the remaining columns. – Jan 10 '18 at 04:44
@stnfordly Using the `absolute` position will not completely destroy bootstrap 3 responsiveness if you handle it correctly within the element. Please do your research before trying to shoot somebody's answer down. This topic Is almost a year old. A new version of bootstrap is out which I suggest you look into as there are new ways to do this. – Tom Withers Jan 10 '18 at 09:21
7

@ThomasWithers a link to the new ways would have been useful – AKrush95 Aug 08 '18 at 16:40
1

@NoChance check this for Bootstrap 4: https://stackoverflow.com/questions/47649920/overflow-scroll-not-working-in-a-specific-column-grid-with-bootstrap-4 – Erick Hernández Jun 24 '19 at 14:00
@eroz - Thanks much. – NoChance Jun 24 '19 at 18:32

score 9 · Answer 2 · answered Feb 14 '20 at 16:22

Following answer https://stackoverflow.com/a/53897001/11620296 shows solution with bootstrap 4 which works perfectly for me. It has updated demo https://www.codeply.com/go/ouc3hddx5i

Code:

html

<div class="container-fluid h-100 d-flex flex-column">
    <div class="row flex-shrink-0">
        <div class="col-12 border">Navbar </div>
    </div>
    <div class="row flex-fill" style="min-height:0">
        <div class="col-2 border mh-100" style="overflow-y: scroll;">Sidebar </div>
        <div class="col-4 border mh-100" style="overflow-y: scroll;">
            Article list
            <p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape swag wolf squid tote bag. Tote bag cronut semiotics,
                raw denim deep v taxidermy messenger bag. Tofu YOLO Etsy, direct trade ethical Odd Future jean shorts paleo. Forage Shoreditch tousled aesthetic irony, street art organic Bushwick artisan cliche semiotics ugh synth chillwave meditation.
                Shabby chic lomo plaid vinyl chambray Vice. Vice sustainable cardigan, Williamsburg master cleanse hella DIY 90's blog.</p>

            <p>Ethical Kickstarter PBR asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table Williamsburg slow-carb
                readymade disrupt deep v. Meggings seitan Wes Anderson semiotics, cliche American Apparel whatever. Helvetica cray plaid, vegan brunch Banksy leggings +1 direct trade. Wayfarers codeply PBR selfies. Banh mi McSweeney's Shoreditch selfies,
                forage fingerstache food truck occupy YOLO Pitchfork fixie iPhone fanny pack art party Portland.</p>

        </div>
        <div class="col-6 border" style="overflow-y: scroll;">Article content </div>
    </div>
    <div class="row flex-shrink-0">
        <div class="col-12 border">Footer </div>
    </div>
</div>

css

html,body {
    height: 100%;
}

How can I create scrollable columns in Bootstrap?

2 Answers2