사용자 목록 테이블이 부모 div를 벗어나나요?

안녕하세요!

앞으로 포르투갈어로 진행할 포럼을 위해 현재 Discourse를 공부하고 있는데, 일부 테이블이 부모 div를 벗어나는 것을 발견했습니다:


이 예시들은 graceful 테마에서 촬영한 것이지만, 기본 테마에서도 동일한 문제가 발생합니다.
이전에 이에 대해 논의된 적이 있는지, 아니면 이슈를 제기해야 하는지 궁금합니다.
감사합니다! :smiley:

테마와 관련된 문제인 것 같습니다. 제 테마에서는 해당 문제가 보이지 않습니다.

언어를 변경해 보세요. 제 경우, 영어에 비해 테이블 헤더가 약간 큰 때문에 이런 문제가 발생합니다.
모든 테이블 헤더를 한 단어로만 줄이면 테이블 너비가 부모 div 너비(제 경우 1110px)로 돌아오지만, 제 경우 헤더가 약간 크기 때문에 테이블이 부모 div보다 넓어집니다.

방금 해봤는데 여전히 문제가 없어요. 제가 보는 바로는, 테마에 패딩/마진이 크기 때문에 컨테이너 크기가 더 작은 것 같아요. 제 테마에는 max-width가 1250px로 설정되어 있습니다. 아래 코드를 추가하여 컨테이너 크기를 늘리거나, 해당 마진을 줄여보세요.

.wrap {
max-width: 1250px;
}

1개의 좋아요

아무 커스터마이징도 없는 완전히 새로운 로컬 설치 환경에서, 언어만 변경하고 사용자 테이블을 열었습니다:

오늘 기분 좋아요. 보드 링크 보내주시면 원하시면 간단히 한번 봐드릴게요 :slight_smile:

1개의 좋아요

다른 페이지네요. 첫 번째 게시물의 스크린샷은 관리자 사용자 목록인데, 여기서는 /users 페이지인 것 같습니다. 첫 번째 게시물을 수정해서 명확히 하겠습니다.

Jeff, 두 번째 이미지는 /users 페이지에서 가져온 것입니다.
기본 테마로 새로운 스크린샷을 찍었어야 했는데 죄송합니다.

기본 테마가 적용된 보드의 링크입니다:
https://abreojogo.flying-ape.com/u

찾은 것 같습니다. 제 테마는 max-width가 1250px이라 더 넓게 표시되어서 확인이 안 됐습니다.
데스크톱 탭에 아래 내용을 추가해 보세요:

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

여기서 말하는 데스크톱 탭은 다음을 의미합니다:

수정: @codinghorror 네, Jeff. discourse.scss 312번째 줄에 있는 white-space: nowrap; 때문에 기본 테마에도 존재합니다.

2개의 좋아요

Cos님, 고맙습니다! 이제 해결되었습니다! :star_struck:
/admin/users 페이지에서 같은 문제를 해결하기 위해 이것도 추가했습니다:

body .admin-contents table th.sortable {
    white-space: initial;
}
1개의 좋아요

이는 무한 스크롤과 넓은 테이블에서 발생하는 일부 문제를 보여줍니다… 여기서 시연해 보겠습니다:

현재 동작 방식은 이러한 경우 애플리케이션 전체가 가로로 스크롤되도록 되어 있습니다… 보통 이를 피하려 하지만, 영상의 후반부를 보면 이 문제를 해결하는 것이 오히려 상황을 악화시킬 수 있는 경우가 있음을 알 수 있습니다. 오버플로우를 숨기고 테이블 오버플로우만 가로 스크롤할 수 있도록 가로 스크롤바를 추가하면, 스크롤바가 테이블의 아래에 위치하며 뷰포트 하단에 고정되지 않습니다… 따라서 새로고침을 통해 새 결과를 로드하는 동안 스크롤바에 도달하기가 매우 어렵습니다.

오버플로우가 발생하는 테이블 상단에 일부 JavaScript를 사용하여 별도의 스크롤바를 추가하는 것이 가장 좋은 옵션이 될 것 같습니다.

1개의 좋아요

네, 해답이 포함된 두 번째 부분이 더 나빠 보입니다.
저에게 폭이 넓은 테이블이 넘치는 문제는, 페이지의 다른 요소들이 모두 적절하게 정렬되고 포함되어 있는데도 불구하고 페이지의 디자인을 깨뜨린다는 점입니다.

하지만 이 문제에 대해 쉬운 해결책은 없을 것 같고, 당장 최선의 방법은 아예 이런 폭이 넓은 테이블을 사용하지 않는 것 같습니다.

1개의 좋아요