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

<p>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 <code>overflow: auto</code> 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. </p>

<p>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):</p>

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

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

CC BY-SA 3.0
2016-11-20T22:14:33.597Z
2016-11-20T22:14:33.597Z
André Elvan
<p>I'm trying to create a Modal and have a question:
my code is:</p>

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

<p>Javascript</p>

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

<p>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.</p>

CC BY-SA 3.0
2016-11-18T11:02:34.160Z
I'm voting to close this question as off-topic because it's not related to Craft
darylknight
CC BY-SA 3.0
2016-11-18T11:08:33.563Z
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
CC BY-SA 3.0
2016-11-18T13:28:35.303Z
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
<modal>
How to create a Modal with a scrollbar
# How to create a Modal with a scrollbar

(Asked by: username_0 on 2016-11-18)

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

    
        
            Modal header
        
        
            {{ include('srgooglemaps/infobubble/addEntry'}}
        
    

new

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.

**Tags:** modal
> **Comments:**
> **username_1**: I'm voting to close this question as off-topic because it's not related to Craft  
> **username_0**: 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  
> **username_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.  

---

## 1 answers

### Answer by username_3 on 2016-11-20. Score: 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):

  
    
        Modal header
    
    
        (insert long content here)
    
  


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


---

