# User list tables overflowing parent div?

**URL:** https://meta.discourse.org/t/user-list-tables-overflowing-parent-div/179600
**Category:** UX
**Created:** [February 13, 2021, 8:19pm UTC](https://meta.discourse.org/t/user-list-tables-overflowing-parent-div/179600 "2021-02-13T20:19:18Z")
**Posts on this page:** 12
**Page:** 1

<div class="post-metadata">

### Author: ![dmc](https://avatars.discourse-cdn.com/v4/letter/d/839c29/32.png) [@dmc](https://meta.discourse.org/u/dmc)
#### Post date: [February 13, 2021, 8:19pm UTC](https://meta.discourse.org/t/user-list-tables-overflowing-parent-div/179600/1 "2021-02-13T20:19:18Z")

</div>

Hi there!

I’m currently learning about Discourse for a future forum in portuguese and noticed that some tables are overflowing its parent div:

 ![image](https://global.discourse-cdn.com/meta/original/3X/e/a/eadfae20cd7814ae1442bbfcd64a72750af222fe.jpeg)  
 ![image](https://global.discourse-cdn.com/meta/original/3X/d/9/d997315993e19089f0cc4c9914d4f272d7cc2e0f.jpeg)

These examples were taken with the graceful theme, but this also happens with the default theme.  
Is this something that has been talked about before or should I open an issue about it?  
Thanks! 😃

---

<div class="post-metadata">

### Author: ![cosdesign](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cosdesign/32/208585_2.png) [@cosdesign](https://meta.discourse.org/u/cosdesign)
#### Post date: [February 13, 2021, 9:28pm UTC](https://meta.discourse.org/t/user-list-tables-overflowing-parent-div/179600/2 "2021-02-13T21:28:37Z")

</div>

I think it’s a theme specific issue, I don’t see it on my theme.

 ![image](https://global.discourse-cdn.com/meta/original/3X/c/5/c5f4a2fe9680dc8a6fce285269515923bb2b2f7c.png)

---

<div class="post-metadata">

### Author: ![dmc](https://avatars.discourse-cdn.com/v4/letter/d/839c29/32.png) [@dmc](https://meta.discourse.org/u/dmc)
#### Post date: [February 13, 2021, 9:31pm UTC](https://meta.discourse.org/t/user-list-tables-overflowing-parent-div/179600/3 "2021-02-13T21:31:38Z")

</div>

Try to change the language, in my case this happens because the table headers are a bit large in comparison to english.  
If I trim the all those table headers to only one word the table width goes back to its parent div width (1110px in my case), but in my case the headers are a bit large so the table gets wider than its parent div.

---

<div class="post-metadata">

### Author: ![cosdesign](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cosdesign/32/208585_2.png) [@cosdesign](https://meta.discourse.org/u/cosdesign)
#### Post date: [February 13, 2021, 9:53pm UTC](https://meta.discourse.org/t/user-list-tables-overflowing-parent-div/179600/4 "2021-02-13T21:53:36Z")

</div>

I just did, still no issue. I think it’s because your theme has a smaller container size because of that big padding/margins I see. I have on my theme a max-width of 1250px. Either increase the container size by adding

```
.wrap {
max-width: 1250px;
}

```

or try to decrease those margins.

 ![image](https://global.discourse-cdn.com/meta/original/3X/1/c/1c4eed855c87b308e95156cd2ce17b2bce44d713.png)

---

<div class="post-metadata">

### Author: ![dmc](https://avatars.discourse-cdn.com/v4/letter/d/839c29/32.png) [@dmc](https://meta.discourse.org/u/dmc)
#### Post date: [February 13, 2021, 10:14pm UTC](https://meta.discourse.org/t/user-list-tables-overflowing-parent-div/179600/5 "2021-02-13T22:14:25Z")

</div>

This is on a brand new local install without any customizations, just changed the language and opened the users table:

 ![image](https://global.discourse-cdn.com/meta/original/3X/6/9/692c9d53d3b939b1d9192e9072f66b82671f9a29.png)

---

<div class="post-metadata">

### Author: ![cosdesign](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cosdesign/32/208585_2.png) [@cosdesign](https://meta.discourse.org/u/cosdesign)
#### Post date: [February 13, 2021, 10:17pm UTC](https://meta.discourse.org/t/user-list-tables-overflowing-parent-div/179600/6 "2021-02-13T22:17:31Z")

</div>

I’m in a good mood today, send me the link of your board and I’ll take a quick look for you if you want 🙂

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [February 13, 2021, 10:27pm UTC](https://meta.discourse.org/t/user-list-tables-overflowing-parent-div/179600/7 "2021-02-13T22:27:37Z")

</div>

That’s a different page – looks like the `/users` page, whereas the screenshot in the first post is the admin users list. I’ll clarify by editing the first post.

---

<div class="post-metadata">

### Author: ![dmc](https://avatars.discourse-cdn.com/v4/letter/d/839c29/32.png) [@dmc](https://meta.discourse.org/u/dmc)
#### Post date: [February 13, 2021, 10:28pm UTC](https://meta.discourse.org/t/user-list-tables-overflowing-parent-div/179600/8 "2021-02-13T22:28:23Z")

</div>

Jeff, the second image is from the `/users` page.  
Sorry, I should’ve taken new screenshots with the default theme.

Here’s the link of the board with the default theme:  
[https://abreojogo.flying-ape.com/u](https://abreojogo.flying-ape.com/u)

---

<div class="post-metadata">

### Author: ![cosdesign](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cosdesign/32/208585_2.png) [@cosdesign](https://meta.discourse.org/u/cosdesign)
#### Post date: [February 13, 2021, 10:34pm UTC](https://meta.discourse.org/t/user-list-tables-overflowing-parent-div/179600/9 "2021-02-13T22:34:14Z")

</div>

I think i found it. I wasn’t able to see it on my theme cause I have 1250px max-width so it’s bigger.  
Add this in your Desktop tab:

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

```

By desktop tab I mean here:

 ![image](https://global.discourse-cdn.com/meta/original/3X/f/d/fdc257ca2bb070a03df67a34b938c95186b46847.png)

Edit: @codinghorror Yes Jeff it’s present in the default theme also because of that  
`white-space: nowrap;` on discourse.scss line 312.

---

<div class="post-metadata">

### Author: ![dmc](https://avatars.discourse-cdn.com/v4/letter/d/839c29/32.png) [@dmc](https://meta.discourse.org/u/dmc)
#### Post date: [February 13, 2021, 10:51pm UTC](https://meta.discourse.org/t/user-list-tables-overflowing-parent-div/179600/10 "2021-02-13T22:51:56Z")

</div>

Thank you Cos, that fixes it! 🤩  
I also added this to fix the same issue in the `/admin/users` page:

```plaintext
body .admin-contents table th.sortable {
    white-space: initial;
}

```

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [February 19, 2021, 11:49pm UTC](https://meta.discourse.org/t/user-list-tables-overflowing-parent-div/179600/11 "2021-02-19T23:49:02Z")

</div>

This highlights a bit of a problem with infinite scroll and wide tables… I demonstrate it here:

The current behavior is that we scroll the entire application horizontally in these cases… we usually try to avoid that, but if you check out the second half of the video you see the where solving it can make things worse. If we hide the overflow and add a horizontal scrollbar to only scroll the table overflow, the scrollbar is at the _bottom_ of the table and not fixed to the bottom of the viewport… so it’s really hard to reach when we’re loading new results as you go.

I think the best option is to probably add another scrollbar at the top of overflowing tables with some JS?

---

<div class="post-metadata">

### Author: ![dmc](https://avatars.discourse-cdn.com/v4/letter/d/839c29/32.png) [@dmc](https://meta.discourse.org/u/dmc)
#### Post date: [February 20, 2021, 5:13pm UTC](https://meta.discourse.org/t/user-list-tables-overflowing-parent-div/179600/12 "2021-02-20T17:13:27Z")

</div>

Yes, the second part with the solution is worse.  
To me the problem with the wide tables overflowing is that it breaks the design of the page, with everything else in the page properly contained and aligned.

But I guess there’s no easy solution for this and the best fix for now is to avoid having these wide tables in the first place.
