-
投稿者投稿
-
2022年7月4日 3:36 PM #107374
【お使いの 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以外のプラグインは無効化しています。2022年7月4日 6:40 PM #107388うを、
absolute
にしたら通常のフローから浮いて高さの影響はなくなると思っていたのですがそうではないのですね…。下記のトピックのようなことがあって、
display: none;
以外の方法で対処するのが理想です。しっかり試せていませんが、こんな感じですかね?
.smb-tabs[data-match-height=false]>.smb-tabs__body>.smb-tab-panel[aria-hidden=true] .smb-tab-panel__body { position: absolute; }
2022年7月4日 11:09 PM #107416横からすみません。
私の環境では、キタジマさんのコードでは反対に2番目のタブ側のフッター下段の余白が
大きく下に伸びてしまいましたが、下記のようにすると直ったように見えています。.smb-tabs[data-match-height=false]>.smb-tabs__body>.smb-tab-panel[aria-hidden=true] { position: fixed; }
あるいはキタジマさんのコードの
absolute
をfixed
に。.smb-tabs[data-match-height=false]>.smb-tabs__body>.smb-tab-panel[aria-hidden=true] .smb-tab-panel__body { position: fixed; }
同じく詳しくはチェックできていませんが、ヒントになりましたら幸いです。
2022年7月5日 10:27 AM #107429@キタジマ さん
display: none; 以外の方法で対処するのが理想です。
ご教示ありがとうございます。
コードを試した感じ、今度は画像ブロックの入った別タブのフッターにかなりの余白が出現してしまいました。@es さん
私の環境では、キタジマさんのコードでは反対に2番目のタブ側のフッター下段の余白が
大きく下に伸びてしまいましたが、そうなんです。この現象が発生しました。
ご提示のコード(以下)で解消されました。.smb-tabs[data-match-height=false]>.smb-tabs__body>.smb-tab-panel[aria-hidden=true] { position: fixed; }
タブ内に別のブロックを使うことで症状が発生するか検証していませんが、現状で解消されました。
@es さんありがとうございます。
@キタジマ さん。解消方法は得られましたが、引き続き試していただけると幸いです。
トピックは@キタジマ さんの回答後に閉じようと思います。2022年7月5日 3:49 PM #1074532022年7月6日 10:59 AM #1074912022年7月6日 11:58 AM #1074972022年7月8日 2:13 PM #1076362022年7月8日 2:45 PM #1076422022年9月12日 10:10 AM #110825下記のトピックで、
position: fixed
だとスライダーブロックを入れたときに不具合が発生してしまうことがわかりました。なので
absolute
でなんとかする方法が必要そうです…。今のところ、absolute
に戻した上で、.smb-tabs{ overflow: hidden }
にすると良いのではないかなと試してみています。2022年9月12日 2:02 PM #1108492022年9月12日 3:59 PM #1108602022年9月12日 4:03 PM #1108622022年9月12日 4:05 PM #1108652022年9月16日 3:49 PM #111063@キタジマ さん
タブブロックですが、スライダーブロックを入れたら、それ以降のタブにも表示されてしまいました。
また、別の問題で恐縮ですが、編集時にタブを「複製」すると新しい タブパネル ができず、複製元の下に複製されました。使うケースはそれほど多くありませんがご検証をお願いします。
WordPress 6.0.2
Snow Monkey 17.2.6
Snow Monkey Blocks 16.0.9@es さん
いろいろとフォローありがとうございます。
複数名の方がコメントを入れてくれるほうがフォーラムとしてはいいかたちだと思います。
また何かありましたらフォローをお願いします。 -
投稿者投稿
- トピック「タブブロックでフッター下部に余白が発生します」には新しい返信をつけることはできません。