قوائم المستخدم تتجاوز div الأب؟

مرحباً بك!

أنا أتعلم حالياً عن Discourse لاستخدامه في منتدى مستقبلي باللغة العربية، ولاحظت أن بعض الجداول تتجاوز حدود العنصر div الأب:


تم أخذ هذه الأمثلة باستخدام سمة Graceful، لكن هذه المشكلة تحدث أيضاً مع السمة الافتراضية.
هل تم مناقشة هذا الأمر من قبل، أم يجب أن أفتح تقرير مشكلة بخصوصه؟
شكراً لك! :smiley:

أعتقد أن المشكلة محددة في السمة، ولا أراها في سمتي.

حاول تغيير اللغة؛ في حالتي يحدث هذا لأن عناوين الجدول كبيرة بعض الشيء مقارنةً بالإنجليزية.
إذا قمت بتقصير جميع عناوين الجدول إلى كلمة واحدة فقط، يعود عرض الجدول إلى عرض العنصر الأب (1110 بكسل في حالتي)، لكن في حالتي تكون العناوين كبيرة بعض الشيء، مما يجعل الجدول أعرض من العنصر الأب.

لقد قمت بذلك للتو، ولا توجد مشكلة حتى الآن. أعتقد أن السبب هو أن قالبك يحتوي على حجم حاوية أصغر بسبب تلك الحواشي الكبيرة التي أراها. في قوالي، حددت العرض الأقصى بـ 1250 بكسل. إما أن تزيد من حجم الحاوية بإضافة:

.wrap {
max-width: 1250px;
}

أو حاول تقليل تلك الحواشي.

إعجاب واحد (1)

هذا على تثبيت محلي جديد تمامًا بدون أي تعديلات، تم فقط تغيير اللغة وفتح جدول المستخدمين:

أنا في مزاج جيد اليوم، أرسل لي رابط لوحتك وسألقِ نظرة سريعة لك إذا أردت :slight_smile:

إعجاب واحد (1)

هذه صفحة مختلفة — يبدو أنها صفحة /users، بينما لقطة الشاشة في المنشور الأول هي قائمة المستخدمين للمسؤول. سأقوم بالتوضيح عن طريق تعديل المنشور الأول.

جيف، الصورة الثانية مأخوذة من صفحة /users.
عذراً، كان يجب أن أقوم بتصوير لقطات شاشة جديدة باستخدام السمة الافتراضية.

إليك رابط اللوحة باستخدام السمة الافتراضية:
https://abreojogo.flying-ape.com/u

أعتقد أنني وجدتها. لم أتمكن من رؤيتها في سميثي لأنني أستخدم عرضًا أقصى 1250px، لذا فهي أكبر.
أضف هذا في تبويب سطح المكتب:

body .directory table th.sortable {
    white-space: initial;
}

بمقصود بـ “تبويب سطح المكتب” هنا:

تعديل: @codinghorror نعم، جيف، إنها موجودة أيضًا في السمة الافتراضية بسبب
white-space: nowrap; في ملف discourse.scss السطر 312.

إعجابَين (2)

شكرًا لك يا كوس، هذا يحل المشكلة! :star_struck:
لقد أضفت هذا أيضًا لحل نفس المشكلة في صفحة /admin/users:

body .admin-contents table th.sortable {
    white-space: initial;
}
إعجاب واحد (1)

هذا يسلط الضوء على مشكلة معينة تتعلق بالتمرير اللانهائي والجداول العريضة… أقدم مثالًا عليها هنا:

السلوك الحالي هو أننا نمرر التطبيق بأكمله أفقيًا في هذه الحالات… نحن عادةً ما نحاول تجنب ذلك، ولكن إذا نظرت إلى النصف الثاني من الفيديو، ستلاحظ أن محاولة حل المشكلة قد تجعل الأمور أسوأ. إذا قمنا بإخفاء الزيادة وأضفنا شريط تمرير أفقيًا لتمرير محتوى الجدول الزائد فقط، فإن شريط التمرير سيظهر في أسفل الجدول وليس مثبتًا في أسفل نافذة العرض… مما يجعل الوصول إليه صعبًا للغاية عند تحميل النتائج الجديدة أثناء التمرير.

أعتقد أن الخيار الأفضل هو إضافة شريط تمرير آخر في أعلى الجداول التي تحتوي على محتوى زائد باستخدام بعض أكواد JavaScript.

إعجاب واحد (1)

نعم، الجزء الثاني مع الحل أسوأ.
بالنسبة لي، مشكلة الجداول العريضة التي تخرج عن الحدود تكمن في أنها تعطل تصميم الصفحة، بينما كل شيء آخر فيها محصور ومحاذاة بشكل صحيح.

لكنني أظن أنه لا يوجد حل سهل لهذه المشكلة، وأفضل إصلاح مؤقت هو تجنب وجود هذه الجداول العريضة من الأساس.

إعجاب واحد (1)