Question

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

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

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

CODE： 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表单，因此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;
}

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

在Ajax调用后改变Div的高度

1 个答案: