# Overlays Misplaced When Wrapping Discourse

**URL:** https://meta.discourse.org/t/overlays-misplaced-when-wrapping-discourse/130115
**Category:** Development
**Created:** [October 3, 2019, 9:26am UTC](https://meta.discourse.org/t/overlays-misplaced-when-wrapping-discourse/130115 "2019-10-03T09:26:18Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![p0fi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/p0fi/32/261315_2.png) [@p0fi](https://meta.discourse.org/u/p0fi)
#### Post date: [October 3, 2019, 9:26am UTC](https://meta.discourse.org/t/overlays-misplaced-when-wrapping-discourse/130115/1 "2019-10-03T09:26:18Z")

</div>

Hello 👋

When I try to wrap the complete discourse to enable differently colored sides I get a misplacement problem with overlays like the user card for example.

 ![17](https://global.discourse-cdn.com/meta/original/3X/4/9/49926275ff658000190713b461784a7ca5fd9390.png)

The user card is supposed to be opened right next to the user which got clicked. But in fact its horizontally misplaced by exactly the width of my sides. Thus the question how is the positioning of this overlays realized and how could I avoid such misplacements while still achieving the side bars?

Thanks a lot 🍻

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [October 3, 2019, 9:54am UTC](https://meta.discourse.org/t/overlays-misplaced-when-wrapping-discourse/130115/2 "2019-10-03T09:54:23Z")

</div>

Yeah, I’ve hit this when adding an extra large banner whilst developing a big plugin for a client. In my case the offset was completely ridiculous (it was off screen!)

There may be a simpler solution, but it turns out this is a little involved and requires you to override a function, e.g. for user card:

```plaintext
          api.modifyClass('component:user-card-contents', {
            _positionCard(target) {

```

That comes from a mixin, located here: [discourse/app/assets/javascripts/discourse/mixins/card-contents-base.js.es6 at b3eb67976dd0c0129736fe0b86167d7e512b51f4 · discourse/discourse · GitHub](https://github.com/discourse/discourse/blob/b3eb67976dd0c0129736fe0b86167d7e512b51f4/app/assets/javascripts/discourse/mixins/card-contents-base.js.es6)

I used jquery to determine whether or not to apply the modification depending on the visibility of the banner: on some pages I had the big ‘banner’, on others I did not. You could use a similar strategy.

tbh, your example doesn’t look that bad - I’d consider letting it be?

---

<div class="post-metadata">

### Author: ![p0fi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/p0fi/32/261315_2.png) [@p0fi](https://meta.discourse.org/u/p0fi)
#### Post date: [October 3, 2019, 9:57am UTC](https://meta.discourse.org/t/overlays-misplaced-when-wrapping-discourse/130115/3 "2019-10-03T09:57:06Z")

</div>

The problem is that basically all overlays are misplaced. I don’t really want to override every positioning method of all overlays that may exist.

It looks passable on the example image since the browser window was not full sized. The sides are usually bigger and therefore the misplacement is worse. Some overlays are almost off screen.

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [October 3, 2019, 9:59am UTC](https://meta.discourse.org/t/overlays-misplaced-when-wrapping-discourse/130115/4 "2019-10-03T09:59:09Z")

</div>

Yeah, it’s annoying. Perhaps restrict customisations to Topic List and try and leave the Topic view alone as much as possible and don’t have too many ‘variants’ to make your life simple.

---

<div class="post-metadata">

### Author: ![p0fi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/p0fi/32/261315_2.png) [@p0fi](https://meta.discourse.org/u/p0fi)
#### Post date: [October 3, 2019, 12:13pm UTC](https://meta.discourse.org/t/overlays-misplaced-when-wrapping-discourse/130115/5 "2019-10-03T12:13:38Z")

</div>

I did not customize any particular view. I want to put the entire forum into an container in order to color the sides differently.

---

<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: [October 3, 2019, 7:40pm UTC](https://meta.discourse.org/t/overlays-misplaced-when-wrapping-discourse/130115/6 "2019-10-03T19:40:44Z")

</div>

> [@p0fi](#):
>
> I want to put the entire forum into an container in order to color the sides differently.

How are you accomplishing this? are you adding a new container around the `#main` div?

It might be easier if you instead add a background color to `#main-outlet` and then add your background color for the sides on `body`.

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [October 3, 2019, 7:51pm UTC](https://meta.discourse.org/t/overlays-misplaced-when-wrapping-discourse/130115/7 "2019-10-03T19:51:32Z")

</div>

Yes, later on I was thinking that! So:

```plaintext
body {
   background-color: red;
}

#main-outlet {
    background-color: white;
}

```

There’s still the issue of the chunky banner though, but it’s not that big.