タブブロックでフッター下部に余白が発生します

0
いいねをした人: 居ません
  • このトピックには8件の返信、3人の参加者があり、最後にGONSYにより1ヶ月前に更新されました。
9件の投稿を表示中 - 1 - 9件目 (全9件中)
  • 投稿者
    投稿
  • #107374
    GONSY
    参加者
    602

    【お使いの Snow Monkey のバージョン】 17.2.1
    【お使いの Snow Monkey Blocks のバージョン】 16.0.1
    【お使いの Snow Monkey Editor のバージョン】 8.0.1
    【お使いのブラウザ】 Chrome
    【当該サイトのURL】 https://demo.gonsy.net/tabs/

    ### 発生している問題
    Snow Monkey Blocksの 【タブ】ブロックを使ったページのフッター下に余計な余白が発生。
    コピーライトで止まらずにスクロールできてしまいます。


    当該サイトのテストページ[ TAB1 ]は、4つの段落ブロックを入れ、[ TAB2 ]に1つの画像ブロックを入れていますが、[ TAB1 ]のフッター下部に余白が発生、[ TAB2 ]には出ません。

    ### 試したこと
    タブブロックの設定
    タブブロック選択時の右メニュー「各タブパネルの高さを揃える」をONにするとこの現象は出なくなります。
    しかし、タブの高さが揃ってしまうことにより、情報量の少ないタブの場合でも情報量の多いタブと同じ分だけスクロールできるためあまり好ましくない状態になってしまいます。

    CSS追記

    .smb-tabs[data-match-height=false]>.smb-tabs__body>.smb-tab-panel[aria-hidden=true] {
        display: none;
    }

    これで解消されるっぽいのですが、検証していただけると幸いに思います。
    なお、My Snow Monkey、Snow Monkey Blocks、Snow Monkey Editor以外のプラグインは無効化しています。

    1
    いいねをした人:
    #107388
    キタジマ タカシ
    参加者
    1629

    うを、absolute にしたら通常のフローから浮いて高さの影響はなくなると思っていたのですがそうではないのですね…。

    下記のトピックのようなことがあって、display: none; 以外の方法で対処するのが理想です。

    しっかり試せていませんが、こんな感じですかね?

    .smb-tabs[data-match-height=false]>.smb-tabs__body>.smb-tab-panel[aria-hidden=true] .smb-tab-panel__body {
        position: absolute;
    }
    2
    いいねをした人:
    #107416
    es
    参加者
    34

    横からすみません。

    私の環境では、キタジマさんのコードでは反対に2番目のタブ側のフッター下段の余白が
    大きく下に伸びてしまいましたが、下記のようにすると直ったように見えています。

    .smb-tabs[data-match-height=false]>.smb-tabs__body>.smb-tab-panel[aria-hidden=true] {
     position: fixed;
    }

    あるいはキタジマさんのコードのabsolutefixedに。

    .smb-tabs[data-match-height=false]>.smb-tabs__body>.smb-tab-panel[aria-hidden=true] .smb-tab-panel__body {
        position: fixed;
    }

    同じく詳しくはチェックできていませんが、ヒントになりましたら幸いです。

    3
    いいねをした人:
    #107429
    GONSY
    参加者
    602

    @キタジマ さん

    display: none; 以外の方法で対処するのが理想です。

    ご教示ありがとうございます。
    コードを試した感じ、今度は画像ブロックの入った別タブのフッターにかなりの余白が出現してしまいました。

    @es さん

    私の環境では、キタジマさんのコードでは反対に2番目のタブ側のフッター下段の余白が
    大きく下に伸びてしまいましたが、

    そうなんです。この現象が発生しました。
    ご提示のコード(以下)で解消されました。

    .smb-tabs[data-match-height=false]>.smb-tabs__body>.smb-tab-panel[aria-hidden=true] {
    	position: fixed;
    }

    タブ内に別のブロックを使うことで症状が発生するか検証していませんが、現状で解消されました。
    @es さんありがとうございます。
    @キタジマ さん。解消方法は得られましたが、引き続き試していただけると幸いです。
    トピックは@キタジマ さんの回答後に閉じようと思います。

    3
    いいねをした人:
    #107453
    es
    参加者
    34

    GONSYさん

    いつもGONSYさんにも勉強させていただいておりますので、少しでもお役に立てたなら何よりです。

    ただ、私の案が最適解かはSnow Monkey全体での兼ね合いもあると思いますので、
    キタジマさんの最終的な見解をお待ちしたいですね。

    お邪魔いたしました。これからもよろしくお願いいたします。

    2
    いいねをした人:
    #107491
    キタジマ タカシ
    参加者
    1629

    うむー、そうなんですね。僕の Chrome だと absolute でも問題なかったのですが、Firefox だと現象が確認できました。fixed にしちゃったほうが良さそうですね。次のアップデートでこの変更を入れようと思います。ご協力ありがとうございます!

    4
    いいねをした人:
    #107497
    GONSY
    参加者
    602

    @キタジマ さん、ありがとうございます。
    アップデートの際にお願いいたします。

    1
    いいねをした人:
    #107636
    キタジマ タカシ
    参加者
    1629

    Snow Monkey Blocks v16.0.2 で反映しました!

    1
    いいねをした人:
    #107642
    GONSY
    参加者
    602

    @キタジマ さん

    Snow Monkey Blocks v16.0.2 で反映しました!

    ご対応ありがとうございました!
    トピックを閉じます。

    1
    いいねをした人:
9件の投稿を表示中 - 1 - 9件目 (全9件中)
  • トピック「タブブロックでフッター下部に余白が発生します」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ