web-dev-qa-db-ja.com

各ステップのコンテンツに動的な高さを設定するにはどうすればよいですか？

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

Min-heightプロパティとoverflowプロパティを微調整しましたが、それでも達成したいことはできません。私が欲しいのは、各ステップのコンテンツを収容するのに十分な高さだけにすることです。

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

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

ありがとうございました

jquery-steps
12
sfuptown

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

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

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

17
krb

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

基本的に、これらのブロックは検証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());
        }
    }

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

9
Eric

たった1行のcssでうまくいきます。セクションごとに身長を自動的に調整します

.wizard> .content> .body {position：relative！important;}

7
Arman Hakim Sagar

何年も経って誰かがこれを見つけたとしても、問題はまだここにあります。 cssのみを使用して、JavaScriptを更新せずに修正する方法は次のとおりです。

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

src： https://github.com/rstaib/jquery-steps/issues/8#issuecomment-36811476

6
Oussama