Таблицы со списком пользователей выходят за пределы родительского div?

Привет!

Сейчас я изучаю Discourse для будущего форума на португальском и заметил, что некоторые таблицы выходят за пределы родительского div:


Эти примеры были взяты с темой Graceful, но это также происходит и с темой по умолчанию.
Обсуждалось ли это ранее, или мне стоит открыть тему с проблемой?
Спасибо! :smiley:

Думаю, это проблема, специфичная для темы; у меня в теме такого не наблюдается.

Попробуйте изменить язык: в моём случае это происходит из-за того, что заголовки таблицы немного велики по сравнению с английским. Если я сокращу все заголовки таблицы до одного слова, ширина таблицы вернётся к ширине родительского div-элемента (в моём случае 1110 пикселей), но так как заголовки немного велики, таблица становится шире своего родительского div-элемента.

Я только что проверил, всё в порядке. Думаю, это потому, что в вашей теме размер контейнера меньше из-за больших отступов, которые я вижу. В моей теме установлено максимальное значение ширины 1250 пикселей. Либо увеличьте размер контейнера, добавив:

.wrap {
max-width: 1250px;
}

либо попробуйте уменьшить эти отступы.

1 лайк

Это на новой локальной установке без каких-либо изменений, только изменён язык и открыта таблица пользователей:

Сегодня у меня прекрасное настроение! Если хочешь, пришли мне ссылку на свою доску — я быстро на неё гляну :slight_smile:

1 лайк

Это другая страница — похоже, страница /users, тогда как скриншот в первом сообщении — это список администраторов пользователей. Я уточню это, отредактировав первое сообщение.

Джефф, второе изображение со страницы /users.
Извини, мне следовало сделать новые скриншоты с темой по умолчанию.

Вот ссылка на доску с темой по умолчанию:
https://abreojogo.flying-ape.com/u

Кажется, я нашёл это. Я не мог увидеть это в своей теме, потому что у меня максимальная ширина 1250 пикселей, поэтому оно выглядит больше.
Добавьте это во вкладку «Desktop»:

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

Под вкладкой «Desktop» я имею в виду вот здесь:

Редактирование: @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 лайк