ISSUE: Currently, I have a dynamic form that utilizes JQuery steps to transform it into a wizard. At one of the steps, selecting an option from a drop-down menu triggers an AJAX call which adds additional form fields dynamically. The challenge lies in adjusting the height of the containing div based on the number of appended fields.
SCREENSHOTS: The initial form consists of two drop-down menus: https://i.sstatic.net/bxVSb.png Upon selecting an option in the second drop-down, the AJAX call is made and extra fields are added. https://i.sstatic.net/4Uxsc.png
The grey box housing the form should resize automatically to fit the newly added fields.
CODE: Below is the CSS for the div:
.wizard > .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;
}
I can hardcode a fixed height here, but I need a solution that dynamically adjusts the height.
This form is built using Zend Form, so the corresponding HTML structure looks like this:
<div class="container-fluid">
<?php if ($this->error) : ?>
<div class="row-fluid">
<?php echo $this->error; ?>
</div>
<?php else : ?>
<?php echo $this->form()->openTag($form); ?>
<h3>Details</h3>
...
...
<h3>Workflow Configuration</h3>
<section>
...
...
</section>
This generates the following HTML structure: https://i.sstatic.net/fFfgn.png
The highlighted div is the one needing adjustment.
For handling AJAX requests, the code snippet is as follows:
// Process AJAX response for dynamic form creation
function updateProjectForm(resp) {
$('div#project-config-elts').html(resp.html);
}
...
...
// Validation rules for the form
$.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 }
}
});
Perhaps within this section, there might be a way to dynamically adjust the height based on the dynamically added elements, although the exact method remains unclear.