title: Change Height of Div After Ajax Call
body: <p>PROBLEM: 
  I have a dynamic form that is using JQuery steps to make it a wizard.  Right now, there is a step where a drop down box selection triggers an AJAX call that then adds form fields to the form.  I need the height of the div that this field is in to become longer based off of the amount of fields added.  </p>
  
  <p>IMAGES: 
  The form starts with two drop downs: 
  <a href="https://i.stack.imgur.com/bxVSb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bxVSb.png" alt="Form Before Selection"></a>
  Once something is selected for the second dropdown, the AJAX call is made and the form appends fields. 
  <a href="https://i.stack.imgur.com/4Uxsc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4Uxsc.png" alt="Form After Selection"></a></p>
  
  <p>The grey box should resize to accomodate the appended fields. </p>
  
  <p>CODE: 
  The CSS for the div is as follows: </p>
  
  <pre><code>.wizard &gt; .content
  {
      background: #eee;
      display: table-cell;
      margin: 0.5em;
      min-height: 35em;
      position: relative;
      width: auto;
  
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
  }
  </code></pre>
  
  <p>I can add a permanent height here, but it's not dynamic. </p>
  
  <p>The form is a Zend Form, so the HTML is as follows: </p>
  
  <pre><code> &lt;div class="container-fluid"&gt;
  &lt;?php if ($this-&gt;error) : ?&gt;
  &lt;div class="row-fluid"&gt;
      &lt;?php echo $this-&gt;error; ?&gt;
  &lt;/div&gt;
  &lt;?php else : ?&gt;
  &lt;?php echo $this-&gt;form()-&gt;openTag($form); ?&gt;
  
  &lt;h3&gt;Details&lt;/h3&gt;
  &lt;section&gt;
      &lt;?php echo FormElementFactory::create($this, ProjectForm::KEY_PROJECT_NAME, false, true); ?&gt;
      &lt;?php echo FormElementFactory::create($this, ProjectForm::KEY_PROJECT_DUE_DTTM, !($this-&gt;uberAdmin)); ?&gt;
      &lt;?php echo FormElementFactory::create($this, ProjectForm::KEY_PROJECT_DESCRIPTION); ?&gt;
  &lt;/section&gt;
  &lt;h3&gt;Options&lt;/h3&gt;
  &lt;section&gt;
      &lt;?php echo FormElementFactory::create($this, ProjectForm::KEY_REVIEW_PROJECT); ?&gt;
      &lt;?php echo FormElementFactory::create($this, ProjectForm::KEY_WTL_PROJECT); ?&gt;
      &lt;?php echo FormElementFactory::create($this, ProjectForm::KEY_JOB_TABLE); ?&gt;
  &lt;/section&gt;
  &lt;h3&gt;Project Configuration&lt;/h3&gt;
  &lt;section&gt;
      &lt;?php echo FormElementFactory::create($this, ProjectForm::KEY_PROJECT_TYPES, !($this-&gt;uberAdmin), true); ?&gt;
      &lt;?php echo FormElementFactory::create($this, ProjectForm::KEY_PROJECT_SUBTYPES, !($this-&gt;uberAdmin)); ?&gt;  
      &lt;?php 
      echo $this-&gt;partial('project/project/dynamicFormElements.phtml', array('form' =&gt; $this-&gt;projectForm, 'div' =&gt; 'project-config-elts'));
      ?&gt;
  &lt;/section&gt;
  
  &lt;h3&gt;Workflow Configuration&lt;/h3&gt;
  &lt;section&gt;
      &lt;?php echo FormElementFactory::create($this, ProjectForm::KEY_WORKFLOW_TYPES, !($this-&gt;uberAdmin)); ?&gt;  
      &lt;?php echo FormElementFactory::create($this, ProjectForm::KEY_WORKFLOW_SUBTYPES, !($this-&gt;uberAdmin), true); ?&gt;
      &lt;?php echo FormElementFactory::create($this, ProjectForm::KEY_PROJECT_WORKFLOW_CONFIG, !($this-&gt;uberAdmin)); ?&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>This generates HTML with the structure below: 
  <a href="https://i.stack.imgur.com/fFfgn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fFfgn.png" alt="Code Structure"></a></p>
  
  <p>The highlighted div is the div in question. </p>
  
  <p>My AJAX call is done here: </p>
  
  <pre><code>    // Handle AJAX dynamic form creation results
      function updateProjectForm(resp) {
          $('div#project-config-elts').html(resp.html);
      }
  
      // Handle ajax error
      function projectFormError(req, status, err) {
          var errorString = '&lt;div class="row-fluid alert alert-error"&gt;' +
              'Error retrieving project form.' +
              '&lt;/div&gt;';
          $('div#project-config-elts').html(errorString);
      }
  
      // AJAX request to get dynamic Project config form
      function requestProjConfigForm() {
          var request = {project_type: $('select[name=project_types]').val(),
                  project_subtype: $('select[name=project_subtypes]').val()
          };
  
           var ajaxOptions = {
              url: 'projectform',
              type:'POST',
              dataType: 'json',
              success: updateProjectForm,
              error: projectFormError,
              data: request
          };
  
          // Initiate the request!
          $.ajax(ajaxOptions);
      }
  
      $('select[name=project_types]').change(function(){
          updateProjectSubtypes(); 
      }); 
  
      // Handle a change in the selection of the particular project
      $('select[name=project_subtypes]').change(function(){
          requestProjConfigForm();
      }); 
  
      $('select[name=workflow_types]').change(function(){
          updateWorkflowSubtypes(); 
      }); 
  
      $.validator.addMethod("validJSON", function(val, el) {
          try {
              JSON.parse(val);
              return true;
          } catch(e) {
              return false;
          }
      }, "*Not valid JSON");
  
      form.validate({
          errorPlacement: function(error, element) {
              $( element )
                  .closest( "form" )
                      .find( "label[for='" + element.attr( "id" ) + "']" )
                          .append( error );
          },
          rules: {
              project_config: { validJSON: true }
          }
      });
  </code></pre>
  
  <p>I'm thinking that here I can dynamically change the height, but I'm not quite sure how to do so. </p>