1

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.

  • 3
    I'm voting to close this question as off-topic because it's not related to Craft – darylknight Nov 18 '16 at 11:02
  • 2
    well its related to craft since I use a craft Garnish Modal and I could not find it anywhere else. Of course there are other Jquery modal libraries but they already have scrollbars – Robin Schambach Nov 18 '16 at 11:08
  • 2
    FWIW I think this is a legit/relevant question... Sure it's a CSS thing but a good answer can be useful to others working on Craft plugins w/ modals in the future. – Mats Mikkel Rummelhoff Nov 18 '16 at 13:28
3

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.