15

Jquery ステップ ウィザード プラグインを使用しています。私が抱えている問題は、ウィザードの各ステップのコンテンツの高さが異なることです。コンテンツの高さを制御するために例に含まれている css は次のとおりです。

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

最小高さとオーバーフローのプロパティを微調整しましたが、まだ達成したいことができません。私が望むのは、各ステップのコンテンツを収容するのに十分な高さにすることです。

たとえば、ステップ 1 に 2 つのフィールドがあり、ステップ 2 に 10 フィールドがあるとします。例では、コンテンツはすべて同じ高さであるため、2 つのフィールドが 10 フィールドに対応するのに必要な高さよりもはるかに大きな高さを持っているとひどく見えます。ステップ2。

min-height プロパティを削除すると、コンテンツがまったく表示されなくなります。Jquery ステップは、すべてのステップで機能するために固定の高さが必要ですか? 個々のステップの高さに対応するために、高さを動的にする方法があることを願っています。

ありがとうございました

4

6 に答える 6

20

の以下のクラスの高さプロパティを削除しますjquery.steps.css。

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

-jquery.steps.jsで次を検索します。

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

行 844 あたりにあるはずです。その直後に、次を追加します。

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");
});

問題は確実に解決されます。

于 2014-05-27T20:18:48.020 に答える
11

これらの既存の回答は少し古いと思います。css ファイルはかなり異なって見えます。他のコメントに投稿されたリンクは、私にとってはうまくいくようでした。

基本的に、validate css でこれらのブロックを見つけて、次のようにします。

.wizard .content {
    min-height: 100px;
}
.wizard .content > .body {
    width: 100%;
    height: auto;
    padding: 15px;
    position: relative;
}

そして、これをあなたのJavaScriptに合わせてください：

$(document).ready(function() {
    function adjustIframeHeight() {
        var $body   = $('body'),
            $iframe = $body.data('iframe.fv');
        if ($iframe) {
            // Adjust the height of iframe
            $iframe.height($body.height());
        }
    }

私にとってチャンピオンのように働きました。これが拡張機能の一部ではないことに非常に驚いています。

于 2015-12-06T08:37:43.353 に答える