Discordコミュニティを作りました! 参加する

フォーラム

トピックを立てる前にチェック
  1. フォーラムガイドライン」に必ず目を通してください。
  2. バージョンアップデート後に表示がおかしくなった場合は、
    「SWELL設定」>「リセット」からキャッシュクリアを先にお試しください。
  3. フォーラム内検索で過去に同じようなトピックがないか検索してみてください。
SWELLのタブブロック内にtable...
 
通知
すべてクリア

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

5 投稿
2 ユーザー
2 Likes
274 表示
chimaki
(@chimaki)
投稿: 3
メンバー
Topic starter
 

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

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

スクリーンショット 2023 09 29 19.30.51

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

確認項目
利用規約に同意します*, ガイドラインを読み、内容を把握しています*, よくある質問を先にチェック済みです*, 過去に同じようなトピックがないか検索済みです*, WordPress更新後、SWELLは最新版にしましたか?, Googleなどでも検索してみました, プラグインを停止しても同じことが起こることを確認しました
利用中のSWELL本体のバージョン
2.7.9
OS
Macos
利用中のWordPressバージョン
6.3.1
利用中のサーバー会社
さくらインターネット
ブラウザ
Chrome
利用中のプラグイン一覧

TablePress

 
投稿済 : 29/09/2023 8:00 pm
トピックタグ
サブロ
(@windorz)
投稿: 101
メンバー
 

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

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

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

 

 
投稿済 : 30/09/2023 2:29 am
chimaki
(@chimaki)
投稿: 3
メンバー
Topic starter
 

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

 
投稿済 : 30/09/2023 9:01 am
サブロ
(@windorz)
投稿: 101
メンバー
 

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

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

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

.dataTables_scrollHeadInner {
width: 100%!important;
}

 
投稿済 : 30/09/2023 2:10 pm
reacted
chimaki
(@chimaki)
投稿: 3
メンバー
Topic starter
 

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

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

 

 

  1. CSSの修正:タブ内容が隠れている間にページがロードされると、テーブルの幅や高さなどが正しく計算されない場合があります。以下のCSSを試してください。
.swl-tabPanel__body { 
   visibility: hidden; 
} 
.swl-tabPanel__body.is-show { 
   visibility: visible; 
}

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

 

というものです。

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

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

 
投稿済 : 02/10/2023 11:44 am
サブロ reacted
共有: