Ajax调用后改变div的高度

Question

问题： 我有一个动态表单，它使用 JQuery 步骤使其成为向导。现在，有一个步骤是下拉框选择触发 AJAX 调用，然后将表单字段添加到表单中。根据添加的字段数量，我需要该字段所在的 div 的高度变长。

图片： 表单以两个下拉列表开头： 一旦为第二个下拉列表选择了某些内容，就会进行 AJAX 调用并且表单会附加字段。

灰色框应调整大小以适应附加字段。

代码： div 的 CSS 如下：

.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;
}

我可以在这里添加一个永久高度，但它不是动态的。

表单是Zend Form，所以HTML如下：

 <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>
<section>
    <?php echo FormElementFactory::create($this, ProjectForm::KEY_PROJECT_NAME, false, true); ?>
    <?php echo FormElementFactory::create($this, ProjectForm::KEY_PROJECT_DUE_DTTM, !($this->uberAdmin)); ?>
    <?php echo FormElementFactory::create($this, ProjectForm::KEY_PROJECT_DESCRIPTION); ?>
</section>
<h3>Options</h3>
<section>
    <?php echo FormElementFactory::create($this, ProjectForm::KEY_REVIEW_PROJECT); ?>
    <?php echo FormElementFactory::create($this, ProjectForm::KEY_WTL_PROJECT); ?>
    <?php echo FormElementFactory::create($this, ProjectForm::KEY_JOB_TABLE); ?>
</section>
<h3>Project Configuration</h3>
<section>
    <?php echo FormElementFactory::create($this, ProjectForm::KEY_PROJECT_TYPES, !($this->uberAdmin), true); ?>
    <?php echo FormElementFactory::create($this, ProjectForm::KEY_PROJECT_SUBTYPES, !($this->uberAdmin)); ?>  
    <?php 
    echo $this->partial('project/project/dynamicFormElements.phtml', array('form' => $this->projectForm, 'div' => 'project-config-elts'));
    ?>
</section>

<h3>Workflow Configuration</h3>
<section>
    <?php echo FormElementFactory::create($this, ProjectForm::KEY_WORKFLOW_TYPES, !($this->uberAdmin)); ?>  
    <?php echo FormElementFactory::create($this, ProjectForm::KEY_WORKFLOW_SUBTYPES, !($this->uberAdmin), true); ?>
    <?php echo FormElementFactory::create($this, ProjectForm::KEY_PROJECT_WORKFLOW_CONFIG, !($this->uberAdmin)); ?>
</section>

这会生成具有以下结构的 HTML：

突出显示的 div 是有问题的 div。

我的 AJAX 调用在这里完成：

    // 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 = '<div class="row-fluid alert alert-error">' +
            'Error retrieving project form.' +
            '</div>';
        $('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 }
        }
    });

我想在这里我可以动态改变高度，但我不太确定如何做到这一点。

Answer 1

您似乎遇到了一个已在 jQuery Steps 插件 github 页面上讨论过的问题：https://github.com/rstaib/jquery-steps/issues/147

基本上，由于步骤内容的主体绝对以百分比高度定位，它的高度不再基于其中的内容。人们过去尝试解决此问题的一些方法是：

waqashsn:

.content > .body{
    /*position: absolute*/
    float:left;
    width:95%;
    height:95%;
    padding:2.5%
}

这是AneeshRS 的另一个替代方案，它会导致溢出的内容滚动：

.wizard.clearfix > .content.clearfix{
    min-height: 500px;
    overflow-y: auto;
}

查看问题页面的链接以获得对其中任何一个的更好解释。但请注意，任何涉及删除绝对定位的解决方案都可能导致转换不再起作用。