こんにちは!
将来ポルトガル語のフォーラムを作成するために Discourse について学んでいる最中ですが、いくつかのテーブルが親 div をはみ出していることに気づきました:
これらの例は「graceful」テーマで取得したものですが、デフォルトのテーマでも同様の現象が発生します。
これは以前に議論されたことがある問題でしょうか、それとも issue を立てるべきでしょうか?
ありがとうございます!![]()
こんにちは!
将来ポルトガル語のフォーラムを作成するために Discourse について学んでいる最中ですが、いくつかのテーブルが親 div をはみ出していることに気づきました:
これらの例は「graceful」テーマで取得したものですが、デフォルトのテーマでも同様の現象が発生します。
これは以前に議論されたことがある問題でしょうか、それとも issue を立てるべきでしょうか?
ありがとうございます!![]()
言語を変更してみてください。私の場合、英語に比べてテーブルのヘッダーが少し大きいため、この問題が発生します。
すべてのテーブルヘッダーを1単語に短縮すると、テーブル幅は親divの幅(私の場合は1110px)に戻りますが、私の場合、ヘッダーが少し大きいため、テーブルが親divよりも広くなってしまいます。
ちょうど試しましたが、問題はありませんでした。おそらく、あなたのテーマには大きなパディングやマージンがあるため、コンテナサイズが小さくなっているためだと思います。私のテーマでは max-width を 1250px に設定しています。コンテナサイズを大きくするには、以下のように追加してください。
.wrap {
max-width: 1250px;
}
または、これらのマージンを減らすことも試してみてください。
今日は気分がいいので、ボードのリンクを送ってくださいね。よろしければ、さっと見てあげますよ ![]()
それは別のページです——/users ページのようですが、最初の投稿のスクリーンショットは管理者ユーザー一覧です。最初の投稿を編集して明確にします。
Jeff、2 枚目の画像は /users ページからのものです。
申し訳ありません、デフォルトのテーマで新しいスクリーンショットを撮るべきでした。
デフォルトのテーマのボードへのリンクはこちらです:
https://abreojogo.flying-ape.com/u
見つかったと思います。私のテーマでは最大幅が 1250px なので、それより大きくなるため表示されませんでした。
「Desktop」タブに以下を追加してください。
body .directory table th.sortable {
white-space: initial;
}
ここで言う「Desktop」タブとは、ここを指します。
追記: @codinghorror はい、Jeff さん、デフォルトテーマにも white-space: nowrap; が discourse.scss の 312 行目に存在するため、同じ問題が発生しています。
Cosさん、ありがとうございます!これで解決しましたね ![]()
同じ問題を /admin/users ページでも修正するために、これも追加しました:
body .admin-contents table th.sortable {
white-space: initial;
}
これは、無限スクロールと幅広のテーブルにおけるある種の課題を浮き彫りにしています。ここで実演します。
現在の挙動では、こうしたケースではアプリケーション全体を水平方向にスクロールさせています……通常はそれを避けるようにしていますが、動画の後半をご覧いただくと、解決策を講じると状況が悪化する場合があります。オーバーフローを非表示にして、テーブルのオーバーフロー部分だけを水平スクロールさせるためにスクロールバーを追加すると、そのスクロールバーはテーブルの下部にあり、ビューポートの下部に固定されません……そのため、新しい結果を読み込む際に、スクロールバーに到達するのが非常に困難になります。
最善の選択肢は、おそらく JavaScript を使用して、オーバーフローするテーブルの上部に別のスクロールバーを追加することだと考えます。
はい、解決策が載っている後半部分の方が問題です。
私にとって、幅広のテーブルがはみ出すことによる問題は、ページ全体のデザインが崩れてしまう点です。ページ内の他の要素は適切に収まり、整列しているのに、それだけがおかしいのです。
しかし、これに対する簡単な解決策はないようですし、現時点で最善の対策は、そもそも幅広のテーブルを使わないようにすることでしょう。