Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-11-20T22:14:33.597Z
Answers.LastActivityDate: 2016-11-20T22:14:33.597Z
Answers.UserDisplayName: André Elvan
Body: <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>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2016-11-18T11:02:34.160Z
Comments.Text: I'm voting to close this question as off-topic because it's not related to Craft
Comments.UserDisplayName: darylknight
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2016-11-18T11:08:33.563Z
Comments.Text: 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
Comments.UserDisplayName: Robin Schambach
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2016-11-18T13:28:35.303Z
Comments.Text: 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.
Comments.UserDisplayName: Mats Mikkel Rummelhoff
Tags: <modal>
Title: How to create a Modal with a scrollbar
ThreadText: # 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:
  
  ```
  <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.
  
  **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 username_2 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.
  
  
  ---
  
  