How to create a Modal with a scrollbar

Question

I'm trying to create a Modal and have a question: my code is:

<div id="my-modal" class="modal" >
    <div id="modal" class="body">
        <header class="header">
            <h2>Modal header</h2>
        </header>
        <div style="overflow:auto;">
            {{ include('srgooglemaps/infobubble/addEntry'}}
        </div>
    </div>
</div>
<button id="newInfoBubble"  type="button" class="btn submit" value="test">new</button>

Javascript

$("#newInfoBubble").click(function(){
    $modal = new Garnish.Modal($('#my-modal'));
});

How do I manage to make overscroll auto working? My included template is higher than the modal and I would like to add a scrollbar or another option to make everything visible.

Answer 1

Although I agree to close this, I think Anubarak deserves an answer as to why this is not Craft related.

The Garnish Modal doesn't care what you use it for, it's just a modal. So, what Daryl and Mats is hinting at, is that you just need to style the content of the modal properly, and you'll have scroll. Which is what you've tried to do with overflow: auto on the div. But this doesn't work since the wrapping element doesn't have a height. Also, the div itself needs a height to know when to introduce the scroll.

Taking the header into account (assuming you want it fixed in the top of the modal), something like this should get you started (inline styles cause I'm lazy, these should of course go into classes):

<div id="my-modal" class="modal">
  <div id="modal" class="body" style="height: 100%;">
    <header class="header">
        <h2>Modal header</h2>
    </header>
    <div style="overflow: auto; height: calc(100% - 66px); position: absolute; top: 66px; left: 0;">
        (insert long content here)
    </div>
  </div>
</div>

Again, this isn't specific to craft, it's a pure CSS question.