SWELLのタブブロック内にtablepressのテーブルを入れた時の不具合について - SWELLに関する質問

RE: SWELLのタブブロック内にtablepressのテーブルを入れた時の不具合について

chimaki — Mon, 02 Oct 2023 02:44:37 +0000

ありがとうございます。サブロさんの手法を試そうと昨日ページを開いたら、どういうわけか当問題が解決していました。

JavaScriptをいじったりCSSをいじったりしてたのですが、それらを初期に戻しておりて、唯一変更を残していたのが、ここのフォーラムで質問する前に、AIに答えてもらった

CSSの修正：タブ内容が隠れている間にページがロードされると、テーブルの幅や高さなどが正しく計算されない場合があります。以下のCSSを試してください。

.swl-tabPanel__body { 
   visibility: hidden; 
} 
.swl-tabPanel__body.is-show { 
   visibility: visible; 
}

これにより、非表示のタブが見えなくなりますが、ブラウザはその存在を認識します。これにより、タブを切り替えたときにテーブルが正しく表示される可能性があります。

というものです。

ただ、昨日は自分のパソコンで開いたので、Adobeの古いアプリを使う関係で、OSもChromeもかなり古いバージョンのため、古いからswellが対応できているのかと思い、今日会社の最新バージョンで試したらやはり治っておりました。swellが問題解決してくれていて、自動更新されていたのか、上記のcssがキャッシュ等の時間差で効いたのか、謎のままです。

いろいろご迷惑をおかけしました。サブロさんのおっしゃるように他にも同じような問題を抱えているケースがあるみたいなので、明確な解決法が紹介されるといいかなと思います。

RE: SWELLのタブブロック内にtablepressのテーブルを入れた時の不具合について

サブロ — Sat, 30 Sep 2023 05:10:25 +0000

サイトが見れないのでセレクタがあってるかわからないのですが、

私の環境では、tableタグ直前のwrapperに以下のCSSをあてると、

各幅の調整はされないですが、全体の幅は揃います。

.dataTables_scrollHeadInner {
width: 100%!important;
}

RE: SWELLのタブブロック内にtablepressのテーブルを入れた時の不具合について

chimaki — Sat, 30 Sep 2023 00:01:26 +0000

javascriptの追加ですか。リンク先を読んでみましたが、エレメンターを使っているケースで、解決に至っていないようです。。参考にして色々調べてみます。ありがとうございます。

RE: SWELLのタブブロック内にtablepressのテーブルを入れた時の不具合について

サブロ — Fri, 29 Sep 2023 17:29:39 +0000

よくある問題のようです。

こちらを参考にjavascriptを追加できれば解決できそうです。

https://wordpress.org/support/topic/tables-within-elementor-components-tabs/

SWELLのタブブロック内にtablepressのテーブルを入れた時の不具合について

chimaki — Fri, 29 Sep 2023 11:00:07 +0000

すみません。お聞きしたいのですが、swellのタブブロック内にTablepressのテーブルをタブ毎に設置したのですが、読み込み時に、最初に指定されているタブ以外のタブ内のテーブルの見出し部分が左に縮んでしまいます。ソート機能を入れているのでクリックすると治るのですが、再読み込みするとまた縮んでしまいます。添付のような状態です。解決法はありますでしょうか。

因みに指定のurlはパスワードがかかっていてパスワードは3284です。

2667
上記のように見出し（青い部分が端まで伸びていないといけないのに左隅に縮んでいます。）