Jump to content


Photo
- - - - -
Resolved

Making A Bootstrap Modal Scrollable

bootstrap modal scroll

This topic has been archived. This means that you cannot reply to this topic.
5 replies to this topic

#1 Beny Schonfeld

Beny Schonfeld

    Advanced Member

  • Members
  • 60 posts

Posted 24 October 2012 - 01:33 PM

Hi, again...

I'm using a bootstrap modal on this page, at the very bottom, just above the footer:

Please Login or Register to see this Hidden Content



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

#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts

Posted 24 October 2012 - 03:03 PM

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.

#3 Beny Schonfeld

Beny Schonfeld

    Advanced Member

  • Members
  • 60 posts

Posted 24 October 2012 - 04:08 PM

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!

#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts

Posted 24 October 2012 - 04:47 PM

You're welcome

#5 catrina

catrina

    Advocate

  • Members
  • 12345 posts

Posted 24 October 2012 - 04:47 PM

The topic was marked as resolved.

#6 Evan Mattson

Evan Mattson

    Super Member

  • Members

  • 231 posts

Posted 28 October 2012 - 03:48 PM

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:

Please Login or Register to see this Hidden Content

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

In summary:

Please Login or Register to see this Hidden Content