Bootstrap column, how to scroll on overflow?

Question

<body class='container-fluid mx-auto' style='width: 95%'>
<div class='row'>

<div
    id='video_container'
    class='
        embed-responsive
        embed-responsive-16by9
        card card-body rounded-0 border-0
        col-9'>
    <div id='player'></div>
</div>

<div
    id='chat_container'
    class='card card-body rounded-0 col-3'
    style='overflow-y: scroll'>
</div>

</div>
</body>

I want everything to remain responsive as it is now (where video_container is responsively in proper ratio and both video_container and chat_container are same height). but I don't want chat_container to expand further below in height when chats fill up the space. Instead I want it to scroll. How can it be done ?

I did set overflow-y: scroll to id chat_container in <style></style> because somehow style attribute disappears when added directly to the element(???) but that does nothing.

In the head I have (serving locally from downloaded copy) :

<link rel='stylesheet' href='bootstrap.min.css'>
<script src='jquery-3.3.1.slim.min.js'></script>
<script src='bootstrap.min.js'></script>
<script src='popper.min.js'></script>

Iskandar Reza · Accepted Answer · 2018-12-13 00:37:22Z

You can do this by creating your own video-chat-row class. Note that by using the embed-responsive-16by9 class, you cannot expect the row and col-x classes to work normally. You got to create your own overrides.

.video-chat-row {
  display: flex;
  width: 100%;
  position: relative;
}


#video_container {
  flex: 0 0 75%;
  background-color: black;
}

#chat_container {
  position: absolute;
  width: 25%;
  left: 75%;
  top: 0;
  bottom: 0;
  right: 0;
  overflow-y: scroll;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<body class='container-fluid mx-auto' style='width: 95%'>
<div class='video-chat-row'>

<div
    id='video_container'
    class='
        embed-responsive
        embed-responsive-16by9
        card card-body rounded-0 border-0' >
    <div id='player'></div>
</div>

<div
    id='chat_container'
    class='card card-body rounded-0'>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
    <p>Proin tincidunt aliquam efficitur. Cras laoreet in nulla id porttitor. Aliquam gravida, ex vulputate aliquam placerat, enim orci maximus turpis, ac lobortis quam urna eget nulla. In vel elit diam. Pellentesque fermentum a dolor sed venenatis. Praesent sit amet vulputate purus, vitae laoreet leo. Vivamus sed volutpat nunc. Nam nunc ex, auctor quis purus at, vulputate interdum enim. Maecenas non tincidunt purus, eget imperdiet lacus. Proin in dictum enim, vitae sodales tortor. Vivamus gravida finibus viverra. Nulla tempor vestibulum lorem. Morbi placerat blandit iaculis. Mauris cursus ex nibh, ornare gravida velit porta commodo. In sit amet mattis leo, at congue magna. Maecenas eu consectetur nulla.</p>
    <p>Quisque et lorem vitae nisi efficitur vehicula id vel nibh. Sed in felis tellus. Nulla viverra augue vel pretium tempus. Proin laoreet lectus ac nisl consectetur, sed mollis sem malesuada. Vivamus id lacinia erat, vel mollis eros. Ut aliquam pretium diam, ac efficitur ipsum aliquam ut. Nullam vel elit orci. Cras in malesuada nunc. Suspendisse elit lectus, tincidunt eu purus ac, consequat faucibus lacus. Sed aliquet risus ut ligula gravida, a lobortis massa pellentesque. In molestie ut sapien nec mollis. Proin a mattis diam, ut imperdiet risus. Donec id nulla massa. Donec nec mi non lacus ultricies pharetra. Morbi magna odio, sollicitudin ut lobortis at, tempus nec sem. Aliquam non ligula nec ante pharetra dapibus eu sed augue.</p>
    
</div>

</div>
</body>

Working perfectly, spent so many hours on this, thank you very much!
After doing some testing, this doesn't seem to work on opera browser
Sorry about repeated notification, I had some mistakes in testing. This actually works perfectly on opera too.

Collectives™ on Stack Overflow

Bootstrap column, how to scroll on overflow?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related