Archived

This topic is now archived and is closed to further replies.

  • 0

Resolved Making A Bootstrap Modal Scrollable


Question

Posted · Report post

Hi, again...

I'm using a bootstrap modal on this page, at the very bottom, just above the footer: http://www.designsbyfelicia.com/services/space-planning-services/

It's the purple link that reads "click here to read the terms and conditions"

What do I need to do in order to make this modal "scrollable" so reader can review the whole text???

Thanks

Share this post


Link to post
Share on other sites

5 answers to this question

Posted · Report post

Another customer asked this previously and based on the developer's insight, it's not possible to add a modal that is scrollable. If there is so much content being added to a modal that a scrollbar is required, the content should just be added to the page content area instead.

Share this post


Link to post
Share on other sites

Posted · Report post

I see. OK... I think I can achieve the same thing (allowing people to read the terms and conditions without leaving the page) by using the accordion shortcode

Thanks!

Share this post


Link to post
Share on other sites

Posted · Report post

You're welcome

Share this post


Link to post
Share on other sites

Posted · Report post

The topic was marked as resolved.

Share this post


Link to post
Share on other sites

Posted · Report post

It is very much possible to make the modal scrollable!

All you need to do is to set a max-height on the .modal-body class. This will cause the scrolling to happen whenever the content is larger than the modal's body area. A max-height of 500px would be a good starting point but you can adjust that to whatever works best for you.

If you don't want to set the max-height on every modal on your site, you can specify the html id of your modal by using the shortcode's hash attribute like so:


[pl_modal type="btn" hash="browns" label="click me!"]...long content...[/pl_modal]

This will create a modal with an html id of "modal_browns". In summary:

/* all modals */

.modal-body {

max-height: 500px;

}

/* just this one */

#modal_browns .modal-body {

max-height: 300px;

}

3 people like this

Share this post


Link to post
Share on other sites