如何为每个步骤设置内容的动态高度? [英] How to set a dynamic height on content for each step?

问题描述

我正在使用Jquery步骤向导插件.我遇到的问题是向导的每个步骤都具有不同高度的内容.示例中包含的用于控制内容高度的css是

I'm using Jquery steps wizard plugin. The problem I am having is that each step of the wizard has content of a different height. The css included with the examples to control the height for the content is

.wizard > .content
{
    background: #eee;
    display: block;
    margin: 0.5em;
    min-height: 35em;
    overflow: hidden;
    position: relative;
    width: auto;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

我已经调整了最小高度和溢出属性，但是它仍然没有完成我想完成的工作.我要的是高度必须足够高以容纳每个步骤的内容.

I have tweaked the min-height and overflow properties, but it still doesn't do what I want to accomplish. What I want is the height to be only high enough to accommodate the content for each step.

例如，假设我有第1步的2个字段和第2步的10个字段.在示例中，内容都是相同的高度，因此看起来比这2个字段容纳该字段所需的高度大得多的高度看起来很糟糕.步骤2上的10个字段.

For example, say I have 2 fields for step 1 and 10 fields for step 2. In the examples the content is all the same height so it looks terrible having a much larger height than is necessary for the 2 fields to accommodate the 10 fields on step 2.

如果我删除min-height属性，则根本不会显示任何内容. jQuery步骤是否需要固定高度才能适用于所有步骤?我希望有一种方法可以使高度动态变化，以适应每个步骤的高度.

If I remove the min-height property, no content shows at all. Does Jquery steps require a fixed height to work for all steps? I'm hoping there is a way to make the height dynamic to accommodate the height of each individual step.

谢谢

推荐答案

删除jquery.steps.css中以下类的height属性:

Remove the height property for the below class in jquery.steps.css:

.wizard > .content > .body{height:95%;}

在-jquery.steps.js中搜索:

stepTitles.eq(state.currentIndex)
  .addClass("current").next(".body").addClass("current");

应该在844行附近.紧接着，添加:

Should be around line 844. Directly after, add:

stepTitles.eq(state.currentIndex).next(".body")
    .each(function () {
    var bodyHeight = $(this).height();
    var padding = $(this).innerHeight() - bodyHeight;
    bodyHeight += padding;
    $(this).after('<div class="' + options.clearFixCssClass + '"></div>');
    $(this).parent().animate({ height: bodyHeight }, "slow");
});

该问题一定会得到解决.

The issue will be surely resolved.

这篇关于如何为每个步骤设置内容的动态高度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！