How to add vertical scroll only for selected div inside bootstrap modal?

Question

I have 2 div in bootstrap modal separated by col-8 and col-4.Here how can I add vertical scroll only for col-4 div?

/* .addScroll{
  overflow-y:auto;
} */
/* .modal-body{
 overflow-y:auto;
} */





    
    
        
            
                
                    
                    Modal Header
                
                
                    In 1980, physicist Tim Berners-Lee, a contractor at CERN, proposed and prototyped ENQUIRE, a system for CERN researchers to use and share documents. In 1989, Berners-Lee wrote a memo proposing an Internet-based hypertext system. Berners-Lee specified HTML and wrote the browser and server software in late 1990.
                    In 1980, physicist Tim Berners-Lee, a contractor at CERN, proposed and prototyped ENQUIRE, a system for CERN researchers to use and share documents. In 1989, Berners-Lee wrote a memo proposing an Internet-based hypertext system. Berners-Lee specified HTML and wrote the browser and server software in late 1990.

I can add vertical-scroll for complete modal-body. But I want to add only for col-4 div. Any suggestion?

https://jsfiddle.net/et5b274h/

user_6364190 · Answer

Add .addScroll div inside .col-sm-4 div set height of it with overflow-y element

.addScroll{
  overflow-y:auto;
  height: 200px;
}






    
    
        
            
                
                    
                    Modal Header
                
                
                    
                        In 1980, physicist Tim Berners-Lee, a contractor at CERN, proposed and prototyped ENQUIRE, a system for CERN researchers to use and share documents. In 1989, Berners-Lee wrote a memo proposing an Internet-based hypertext system. Berners-Lee specified HTML and wrote the browser and server software in late 1990.
                        
                            
                                In 1980, physicist Tim Berners-Lee, a contractor at CERN, proposed and prototyped ENQUIRE, a system for CERN researchers to use and share documents. In 1989, Berners-Lee wrote a memo proposing an Internet-based hypertext system. Berners-Lee specified HTML and wrote the browser and server software in late 1990.

user_6053654 · Answer

You can use the following CSS rules:

.addScroll {
  overflow-y: auto;
  max-height: 140px;
}

If you will not specify height or max-height of .addScroll element (or one of the parent elements will not limit its height), it will take as much height as content, and the scroll will not be applied. But if you will specify for example max-height: 140px; (the same height as the other div), the scroll will be applied.

Here is the working fiddle: https://jsfiddle.net/et5b274h/1/

user_1477360 · Answer

Please check https://jsfiddle.net/et5b274h/8/ and see if this is what you want. I have added a div with class row inside modal-content.



  

      
        

          
            
              
              Modal Header
            
            
              
                
                  11one one one one one one one one

                
                
                  
                    22two
                    
 two
                    
 two
                    
 two
                    
 two
                    
 two
                    
 two two two

user_4763038 · Answer

You can use CSS overflow-y: scroll;height: 120px to your inner div(col-md-4).

If you use auto instead of scroll it will add scroll whenever necessary.







  

  
    

      
        
          
          Modal Header
        
        
          In 1980, physicist Tim Berners-Lee, a contractor at CERN, proposed and prototyped ENQUIRE, a system for CERN researchers to use and share documents. In 1989, Berners-Lee wrote a memo proposing an Internet-based hypertext system. Berners-Lee specified HTML and wrote the browser and server software in late 1990.
           In 1980, physicist Tim Berners-Lee, a contractor at CERN, proposed and prototyped ENQUIRE, a system for CERN researchers to use and shar CERN researchers to use and shar CERN researchers to use and shar CERN researchers to use and share documents. In 1989, Berners-Lee wrote a memo proposing adsfdsfdsfdsfdsfsdfds edsfsdfn Internet-based hypertext system. Berners-Lee specified HTML and wrote the browser and server software in late 1990.

How to add vertical scroll only for selected div inside bootstrap modal?

4 Answers