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

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

    【お使いの 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
    アバター画像キタジマ タカシ
    参加者
    2421

    うを、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:エス
    参加者
    136

    横からすみません。

    私の環境では、キタジマさんのコードでは反対に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
    参加者
    841

    @キタジマ さん

    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:エス
    参加者
    136

    GONSYさん

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

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

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

    2
    いいねをした人:
    #107491
    アバター画像キタジマ タカシ
    参加者
    2421

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

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

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

    1
    いいねをした人:
    #107636
    アバター画像キタジマ タカシ
    参加者
    2421

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

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

    @キタジマ さん

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

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

    1
    いいねをした人:
    #110825
    アバター画像キタジマ タカシ
    参加者
    2421

    下記のトピックで、position: fixed だとスライダーブロックを入れたときに不具合が発生してしまうことがわかりました。

    なので absolute でなんとかする方法が必要そうです…。今のところ、absolute に戻した上で、.smb-tabs{ overflow: hidden } にすると良いのではないかなと試してみています。

    1
    いいねをした人:
    #110849
    アバター画像キタジマ タカシ
    参加者
    2421

    v16.0.8 で↑の変更を入れました。

    1
    いいねをした人:
    #110860
    es:エス
    参加者
    136

    GONCYさんをおいてお答えするのは恐縮ですが、一部関与したものとして失礼いたします。
    私の環境ではv16.0.8で問題なく表示されました。

    ただ上記に示されているトピックの問題は解決していないように見えますので、そちらのトピックの方で状況をご報告しますね。

    1
    いいねをした人:
    #110862
    アバター画像キタジマ タカシ
    参加者
    2421

    確認ありがとうございます!

    ただ上記に示されているトピックの問題は解決していないように見えますので、そちらのトピックの方で状況をご報告しますね。

    ぐえ、まじですか!再度確認してみます…!

    1
    いいねをした人:
    #110865
    es:エス
    参加者
    136

    そうなんですよ。。今アップしましたー

    1
    いいねをした人:
    #111063
    GONSY
    参加者
    841

    @キタジマ さん
    タブブロックですが、スライダーブロックを入れたら、それ以降のタブにも表示されてしまいました。
    また、別の問題で恐縮ですが、編集時にタブを「複製」すると新しい タブパネル ができず、複製元の下に複製されました。

    使うケースはそれほど多くありませんがご検証をお願いします。
    WordPress 6.0.2
    Snow Monkey 17.2.6
    Snow Monkey Blocks 16.0.9

    @es さん
    いろいろとフォローありがとうございます。
    複数名の方がコメントを入れてくれるほうがフォーラムとしてはいいかたちだと思います。
    また何かありましたらフォローをお願いします。

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

ドキュメント

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

ドキュメント

フォーラム

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

サポートフォーラム

よくあるご質問

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

よくあるご質問

お問い合わせ

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

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。