locked
Modal In Modal scroll bar disapears RRS feed

  • Question

  • User364803292 posted

    Hello

    I have a page that opens a bootstrap modal, which is quite long and requires a scroll bar, and has a link that opens another modal.

    When the second modal is dismissed the scroll bar disappears which makes the first modal unreadable.

    This is a sample code:

    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
            Launch demo modal
        </button>
    
        <div class="modal fade" tabindex="-1" role="dialog" id="myModal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">Modal title</h4>
                    </div>
                    <div class="modal-body">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus cursus convallis neque, at finibus lacus pellentesque ut. Mauris tempor id velit at eleifend. Cras in nisi imperdiet eros interdum interdum commodo viverra metus. Morbi dapibus ex ut urna tincidunt, eu pellentesque sem euismod. Cras id viverra dui. Donec id ante tempor, aliquam est vel, interdum ipsum. Suspendisse potenti.</p>
                        <p>In hac habitasse platea dictumst. Mauris tempus pretium magna, ut pulvinar libero laoreet at. Sed rutrum, diam in fringilla finibus, nibh ipsum fringilla lacus, at sodales metus purus nec lectus. Nulla mattis a enim sed dapibus. Etiam sit amet volutpat orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse laoreet nunc sed turpis viverra maximus. Integer gravida arcu dolor, vel dapibus nisl finibus vel. Suspendisse molestie enim sed tincidunt maximus. Vivamus ultricies consequat ultrices. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus viverra, leo sed semper ultrices, lacus odio blandit nunc, eget mattis odio turpis at quam. Praesent elementum faucibus mauris pharetra convallis. Aliquam erat volutpat.</p>
                        <p>Nulla vel fermentum lacus. Nunc tempor quam quis ante faucibus, id egestas lacus suscipit. Phasellus non odio vitae lacus vehicula volutpat. Nulla lorem eros, euismod et interdum in, malesuada sit amet velit. Fusce pretium eros sed aliquam efficitur. Vivamus elit elit, dapibus non venenatis in, efficitur vitae lacus. Quisque at lorem diam.</p>
                        <p>Nunc rhoncus molestie congue. Nunc id erat blandit, congue velit vitae, interdum urna. Sed sed vestibulum risus, in elementum erat. Nam volutpat fermentum ex non ultrices. Aliquam sit amet augue eu mi bibendum fermentum commodo nec urna. Nunc nec lacinia felis. Etiam elit tortor, accumsan quis risus vel, tincidunt sagittis ipsum. Curabitur porta vestibulum nulla a eleifend. Donec viverra lacus sit amet justo interdum, in vehicula eros luctus. Fusce auctor faucibus eleifend. Mauris semper scelerisque urna, eu accumsan nisl placerat nec.</p>
                        <p>Maecenas imperdiet imperdiet sagittis. Nullam consectetur, massa in mollis imperdiet, ante nibh imperdiet eros, a laoreet purus ligula eget nulla. Fusce condimentum in dui gravida placerat. Morbi eleifend a quam vel laoreet. Donec sit amet arcu porttitor, pharetra ligula nec, aliquet dui. Nullam vulputate euismod ipsum. Quisque lectus ipsum, fringilla a lobortis et, tincidunt nec nisl. Suspendisse vulputate erat ut urna volutpat mollis. Cras faucibus blandit risus. Aliquam sed diam vitae odio blandit scelerisque. Donec a lacus ac sem elementum tincidunt. Sed quis ornare elit. Donec viverra neque eu magna cursus viverra.</p>
                        <p>Mauris vulputate, lorem quis ullamcorper accumsan, augue odio egestas nunc, at posuere neque tellus et massa. Praesent ultrices non lacus vel euismod. Aliquam elit nibh, viverra efficitur varius sit amet, suscipit condimentum turpis. Nulla vitae lacus ultrices, cursus leo dictum, maximus metus. Vestibulum libero massa, aliquam quis rhoncus ac, suscipit in justo. Integer placerat non enim ut laoreet. Aenean id felis urna. Nunc tortor tellus, elementum id porta nec, egestas non nibh. Nulla feugiat dui vel leo gravida, in dapibus justo ultrices. Donec quis magna pretium, dictum quam et, hendrerit tortor. Etiam id porta massa.</p>
                        <p>Nam et mauris porttitor, egestas orci vitae, pretium massa. Phasellus in lacus ultrices, commodo magna porta, bibendum ipsum. Nulla interdum convallis quam luctus auctor. Pellentesque in nulla a ex pretium vulputate ac eget felis. In bibendum est dui, vel vestibulum odio bibendum et. Duis ultrices molestie sollicitudin. Pellentesque turpis turpis, ornare et sodales eget, cursus sit amet nisi. Proin sed metus vel neque elementum porta. Mauris accumsan nulla in nibh facilisis, eu commodo turpis elementum. Fusce ullamcorper viverra justo, condimentum mattis orci euismod non. Aliquam accumsan erat in fermentum hendrerit. Duis dapibus tellus non quam dignissim, ut maximus dui commodo. Suspendisse vel dui placerat, viverra tortor nec, mattis velit. Donec non neque arcu. Suspendisse pulvinar justo et lorem convallis mattis. Mauris sem odio, volutpat id suscipit nec, blandit eget sapien.</p>
                        <p>Nam imperdiet id ante sagittis elementum. Nunc ullamcorper justo ut nisi feugiat mattis. Donec at augue et est pulvinar pretium ac sit amet enim. Suspendisse velit quam, laoreet vel volutpat non, pulvinar a lorem. Cras vel efficitur neque, sed vulputate ex. Aenean a velit in mauris ultrices euismod et in tortor. Donec tempus rhoncus nunc. Pellentesque sollicitudin, enim sed aliquet maximus, nisl justo scelerisque neque, a suscipit lacus ex in augue. Donec maximus, nibh a hendrerit pharetra, sem magna posuere libero, eget pellentesque est elit quis ante. Vivamus interdum accumsan odio, et varius dolor tempor ac. Donec magna odio, porta elementum leo vitae, suscipit gravida magna.</p>
                        <p>Nullam in congue urna, vel tincidunt justo. Duis consectetur magna sed felis semper efficitur. Aenean aliquet dolor sed ligula porttitor, ut eleifend nisi gravida. Nunc justo ipsum, facilisis quis lectus ut, iaculis consectetur erat. Praesent interdum, metus eget ornare elementum, dui tellus ultrices ex, eget condimentum sem mauris sed eros. Etiam a nisi nisl. Phasellus gravida nisl nisl, vitae feugiat nisl dignissim sed. Duis ac sollicitudin nunc. Donec eget gravida urna, eu bibendum tortor. Sed elit mi, finibus at lacinia et, laoreet at urna. Quisque consequat lectus ac dignissim sagittis.</p>
                        <p>Fusce egestas tortor id nisi tempus efficitur. Vestibulum vitae purus sed quam sagittis efficitur. Proin scelerisque imperdiet odio ut mattis. Aliquam maximus rutrum nunc, quis consequat lacus ullamcorper id. Sed feugiat pulvinar nisi, nec vestibulum ligula posuere et. Quisque pretium consectetur erat at bibendum. Mauris maximus lectus eu congue tristique. Pellentesque eu cursus nisi, eget convallis ligula. Mauris bibendum ullamcorper tellus sit amet tempus. </p>
                        <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">
                            Launch demo modal in modal
                        </button>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="modal fade" tabindex="-1" role="dialog" id="myModal2">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">Modal In Modal title</h4>
                    </div>
                    <div class="modal-body">
                        <p>One fine body modal 2</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>

    Any suggestions?

    Wednesday, January 20, 2016 10:39 AM

Answers

  • User364803292 posted

    found the solution:

    add  style="overflow-y: scroll;" in first modal

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, January 20, 2016 10:50 AM

All replies

  • User364803292 posted

    found the solution:

    add  style="overflow-y: scroll;" in first modal

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, January 20, 2016 10:50 AM
  • User61956409 posted

    Hi Taonias,

    I’m glad to hear that you resolve the problem by yourself. And thanks for sharing the solution. Besides, we could also to specify a custom CSS style for modal body to display a scroll bar.

    <style>
        .modal-body {
            max-height: 400px;
            overflow: scroll;
        }
    </style>
    

    Best Regards,

    Fei Han

    Thursday, January 21, 2016 3:23 AM