Bootstrap collapse expanding too far when first clicked

Question

The following jsfiddle has two collapse panels. However, when each window is expanded and collapsed, the animation is awkward and not fluid--it expands larger than it needs to at first, with the input fields contained therein not visible, and then the input fields appear suddenly.

https://jsfiddle.net/6pmsp9ou/

This only appears to happen when the window is above a certain width. If the viewing window is made less wide, it expands normally. This can be seen in the jsfiddle, as it appears to expand and collapse normally at the default width, but if you widen the viewing window, then the behavior described above is observed.

How can I get it to expand and collapse normally?

<div id='ah-body'>
  <div style='max-height:500px;overflow-y:auto;'>
    <a href='#section1' class='collapse-header col-sm-12' data-toggle='collapse'>Section 1</a>
    <div id='section1' class='collapse'>
      <div class='input-wrapper required col-sm-12 col-md-6'>
        <label for='field1'>Field 1</label>
        <input id='field1'>
      </div>
      <div class='input-wrapper required col-sm-12 col-md-6'>
        <label for='field2'>Field 2</label>
        <input id='field2'>
      </div>
      <div class='input-wrapper col-sm-12 col-md-6'>
        <label for='field3'>Field 3</label>
        <input id='field3'>
      </div>
      <div class='input-wrapper col-sm-12 col-md-6'>
        <label for='field4'>Field 4</label>
        <input id='field4'>
      </div>
      <div class='input-wrapper required col-sm-12 col-md-6'>
        <label for='field5'>Field 5</label>
        <input id='field5'>
      </div>
      <div class='input-wrapper required col-sm-12 col-md-6'>
        <label for='field6'>Field 6</label>
        <input id='field6'>
      </div>
      <div class='input-wrapper col-sm-12 col-md-6'>
        <label for='field7'>Field 7</label>
        <input id='field7'>
      </div>
      <div class='input-wrapper col-sm-12 col-md-6'>
        <label for='field8'>Field 8</label>
        <input id='field8'>
      </div>
      <div class='input-wrapper col-sm-12 col-md-6'>
        <label for='field9'>Field 9</label>
        <input id='field9'>
      </div>
    </div>
  </div>
  <a href='#section2' class='collapse-header col-sm-12' data-toggle='collapse'>Section 2</a>
  <div id='section2' class='collapse'>
    <div class='input-wrapper required col-sm-12 col-md-6'>
      <label for='field10'>Field 10</label>
      <input id='field10'>
    </div>
    <div class='input-wrapper required col-sm-12 col-md-6'>
      <label for='field11'>Field 11</label>
      <input id='field11'>
    </div>
    <div class='input-wrapper col-sm-12 col-md-6'>
      <label for='field12'>Field 12</label>
      <input id='field12'>
    </div>
    <div class='input-wrapper col-sm-12 col-md-6'>
      <label for='field13'>Field 13</label>
      <input id='field13'>
    </div>
    <div class='input-wrapper required col-sm-12 col-md-6'>
      <label for='field14'>Field 14</label>
      <input id='field14'>
    </div>
    <div class='input-wrapper required col-sm-12 col-md-6'>
      <label for='field15'>Field 15</label>
      <input id='field15'>
    </div>
    <div class='input-wrapper col-sm-12 col-md-6'>
      <label for='field16'>Field 16</label>
      <input id='field16'>
    </div>
    <div class='input-wrapper col-sm-12 col-md-6'>
      <label for='field17'>Field 17</label>
      <input id='field17'>
    </div>
    <div class='input-wrapper col-sm-12 col-md-6'>
      <label for='field18'>Field 18</label>
      <input id='field18'>
    </div>
    <div class='input-wrapper col-sm-12 col-md-6'>
      <label for='field19'>Field 19</label>
      <input id='field19'>
    </div>
  </div>

Answer 1

When expanding an element - the browser has to calculate the height it will be when finished to complete the animation smoothly, otherwise it will 'fudge' it and overshoot.

This is usually thrown off either padding on the element being transitioned or not clearing floated elements inside.

It appears you have a lot of elements using the col-md-* classes, which set widths and floats. These are designed to be used with class="row" - which offsets margins and clears the floats.

It is good practice to use rows and col-- classes together to get rid of many unexpected side effects from not clearing floats