Smart Wizard插件内容动态尺寸调整失效问题求助

问题分析 #

你当前的代码能成功点击按钮添加输入框，但.tab-content容器高度无法随内容动态变化，仅切换步骤返回时才更新，核心原因有两点：

1. 初始设置的$('.tab-content').height('100%')把容器高度固定为父元素的100%，不会随内部新增元素自动扩展；
2. 你使用的步骤类插件仅在初始化或切换步骤时计算容器高度，动态添加DOM元素后没有触发插件的高度重新计算逻辑。

解决方案 #

针对问题给出两种可行处理方式：

方式1：移除固定高度，让容器自适应内容

直接去掉初始的固定高度设置，或在添加元素后重置容器高度为auto，让浏览器自动计算内容高度：

修改后的jQuery代码：

$(document).ready(function () {
    $('#add-product').click(function () {
        $("<div class='row'> <div class='col'> <div class='form-group'><input type='text' class='form-control products' placeholder='Product name'> </div> </div> </div>").appendTo($('.products'));
        // 添加元素后重置tab-content高度为自动
        $('.tab-content').css('height', 'auto');
    });
    // 注释或删除固定高度的设置
    // $('.tab-content').height('100%')
})

方式2：调用插件的刷新/更新方法（针对步骤类插件）

如果你使用的是带autoAdjustHeight这类参数的步骤插件（比如表单向导类插件），通常会提供刷新方法，在添加元素后手动触发插件重新计算高度。示例代码（需替换为你实际使用的插件调用方式）：

$(document).ready(function () {
    $('#add-product').click(function () {
        $("<div class='row'> <div class='col'> <div class='form-group'><input type='text' class='form-control products' placeholder='Product name'> </div> </div> </div>").appendTo($('.products'));
        // 调用插件的刷新方法，替换成你实际插件的调用语法
        $('.your-wizard-container').wizard('refresh');
    });
})

额外提示 #

如果上述方法无效，检查是否有其他CSS规则（比如overflow:hidden、position:absolute）限制了.tab-content或.products的高度扩展，确保容器的父元素没有设置固定高度或溢出隐藏属性。

内容的提问来源于stack exchange，提问作者user301908