# \[2.1.0b6\] New topic button is moving behind burger on click

**URL:** https://meta.discourse.org/t/2-1-0b6-new-topic-button-is-moving-behind-burger-on-click/96719
**Category:** Support
**Created:** [September 8, 2018, 8:40am UTC](https://meta.discourse.org/t/2-1-0b6-new-topic-button-is-moving-behind-burger-on-click/96719 "2018-09-08T08:40:39Z")
**Posts on this page:** 11
**Page:** 1

<div class="post-metadata">

### Author: ![warlof](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/warlof/32/110170_2.png) [@warlof](https://meta.discourse.org/u/warlof)
#### Post date: [September 8, 2018, 8:40am UTC](https://meta.discourse.org/t/2-1-0b6-new-topic-button-is-moving-behind-burger-on-click/96719/1 "2018-09-08T08:40:39Z")

</div>

Hello great team,

Since I’ve updated my installation to 2.1.0b6, I noticed a display bug on the category page as an administrator.  
When I’m clicking on the burger menu near to `New topic` button, the button is moving behind the burger.

I’ve compared with an early version and it seems due to some css property which have been modified.  
Apparently, with this version, the burger button get a fixed position whereas earlier version where using a simple float right.

2.1.0b3 css style was the following :

```plaintext
.list-controls .select-kit.categories-admin-dropdown, .list-controls .select-kit.category-notifications-button, .list-controls .select-kit.tag-notifications-button {
    float: right;
}

```

2.1.0b6 css style is the following :

```plaintext
{
    top: 129.25px;
    width: 62.0167px;
    left: 1444.48px;
    margin-left: 0px;
    margin-right: 0px;
    min-width: unset;
    min-height: unset;
    position: fixed;
}

```

I also must say that those properties are directly added to the node on click. Previous versions wasn’t impacted with any extra properties.

 ![image](https://global.discourse-cdn.com/meta/original/3X/0/6/06badb6436bce6939f25a7b269d2caf26e5ee6c9.png)

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [September 10, 2018, 6:47am UTC](https://meta.discourse.org/t/2-1-0b6-new-topic-button-is-moving-behind-burger-on-click/96719/2 "2018-09-10T06:47:35Z")

</div>

Does this happen in [safe mode](https://meta.discourse.org/t/53504?silent=true)? [Using Safe Mode to troubleshoot issues with themes and plugins](https://meta.discourse.org/t/how-to-use-discourse-safe-mode/53504)

Not seeing this issue in firefox here on meta, what browser are you using, can you update to latest.

---

<div class="post-metadata">

### Author: ![warlof](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/warlof/32/110170_2.png) [@warlof](https://meta.discourse.org/u/warlof)
#### Post date: [September 10, 2018, 7:26pm UTC](https://meta.discourse.org/t/2-1-0b6-new-topic-button-is-moving-behind-burger-on-click/96719/3 "2018-09-10T19:26:29Z")

</div>

After few tests, I’m able to reproduce only if I get something in the `</body>` from a component in the used template. I can’t understand why.

The content itself doesn’t matter. It may be a simple `<p>Something</p>`.

* * *

Once the [safe mode](https://meta.discourse.org/t/53504?silent=true) has been enabled, the issue does not append. Confirming it’s related to a customization. I don’t understand why It’s doing it when I’m putting html inside the `</body>` hook. Isn’t the purpose of it ? 😕

Furthermore, I did extra tests by putting alternatively the html in `</head>``Header` `After Header`, `</body>` and `Footer`. In all case, I’ve get this rendering issue.

Here is the html block

```plaintext
<div role="dialog" id="evesde-modal" class="modal d-modal fixed-modal" style="display: none; padding-right: 0px;">
    <div class="modal-outer-container" role="document">
        <div class="modal-middle-container">
            <div class="modal-inner-container">
                <div class="modal-header">
                    <div class="modal-close">
                        <a class="close" data-dismiss="modal">
                            <i class="fa fa-times d-icon d-icon-times"></i>
                        </a>
                    </div>
                    <div class="title">
                        <h3 id="evesde-modal-title"></h3>
                    </div>
                </div>
                <div id="evesde-modal-description" class="modal-body"></div>
            </div>
        </div>
    </div>
</div>

```

---

<div class="post-metadata">

### Author: ![warlof](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/warlof/32/110170_2.png) [@warlof](https://meta.discourse.org/u/warlof)
#### Post date: [September 15, 2018, 7:12am UTC](https://meta.discourse.org/t/2-1-0b6-new-topic-button-is-moving-behind-burger-on-click/96719/4 "2018-09-15T07:12:02Z")

</div>

Hi,

I make further tests and discover the following.

Code bellow is causing trouble with page rendering which will add listed extra css attributes on the burger menu.

```plaintext
<div role="dialog" id="evesde-modal" class="modal d-modal fixed-modal" style="display: none; padding-right: 0px;">
    <div class="modal-outer-container" role="document">
        <div class="modal-middle-container">
            <div class="modal-inner-container">
                <div class="modal-header">
                    <div class="modal-close">
                        <a class="close" data-dismiss="modal">
                            <i class="fa fa-times d-icon d-icon-times"></i>
                        </a>
                    </div>
                    <div class="title">
                        <h3 id="evesde-modal-title"></h3>
                    </div>
                </div>
                <div id="evesde-modal-description" class="modal-body"></div>
            </div>
        </div>
    </div>
</div>

```

But the one bellow isn’t :

```plaintext
<div role="dialog" id="evesde-modal" class="modal d-modal fixed-modal" style="display: none; padding-right: 0px;">
    <div class="modal-outer-container" role="document">
        <div class="modal-middle-container">
            <div class="modal-inner-container">
                <div class="modal-header">
                    <div class="modal-close">
                        <a class="close" data-dismiss="modal">
                            <i class="fa fa-times d-icon d-icon-times"></i>
                        </a>
                    </div>
                    <div class="title">
                        <h3 id="evesde-modal-title"></h3>
                    </div>
                </div>
                <div id="evesde-modal-description"></div>
            </div>
        </div>
    </div>
</div>

```

As you may notice, the only change applied is removing the `modal-body` class. So, what’s wrong with it in discourse ?!

---

<div class="post-metadata">

### Author: ![warlof](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/warlof/32/110170_2.png) [@warlof](https://meta.discourse.org/u/warlof)
#### Post date: [October 12, 2018, 4:19pm UTC](https://meta.discourse.org/t/2-1-0b6-new-topic-button-is-moving-behind-burger-on-click/96719/5 "2018-10-12T16:19:31Z")

</div>

anybody can give me some inputs about this ?

---

<div class="post-metadata">

### Author: ![Mittineague](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mittineague/32/114259_2.png) [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [October 12, 2018, 11:15pm UTC](https://meta.discourse.org/t/2-1-0b6-new-topic-button-is-moving-behind-burger-on-click/96719/7 "2018-10-12T23:15:51Z")

</div>

Well, it seems you’ve narrowed it down to the div with a class value of modal-body.

Using your browsers dev tools, what CSS is applied to that `<div>` when it has that and what when it doesn’t?

---

<div class="post-metadata">

### Author: ![warlof](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/warlof/32/110170_2.png) [@warlof](https://meta.discourse.org/u/warlof)
#### Post date: [October 13, 2018, 8:52am UTC](https://meta.discourse.org/t/2-1-0b6-new-topic-button-is-moving-behind-burger-on-click/96719/8 "2018-10-13T08:52:39Z")

</div>

Here is what I have on the description div while there is a `modal-body` class on it.

```plaintext
box-sizing: border-box;
color: rgb(221, 221, 221);
direction: ltr;
font-family: "Poppins";
font-size: 13px;
line-height: 22.1px;
max-height: none;
overflow: auto;
overflow-x: auto;
overflow-y: auto;
padding-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
padding-top: 15px;
width: 700px;

```

Here is what I have when the class is not on it :

```plaintext
color: rgb(221, 221, 221);
direction: ltr;
font-family: "Poppins";
font-size: 13px;
line-height: 22.1px;

```

Missing styles are the following :

```plaintext
box-sizing: border-box;
max-height: none;
overflow: auto;
overflow-x: auto;
overflow-y: auto;
padding-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
padding-top: 15px;
width: 700px;

```

---

<div class="post-metadata">

### Author: ![Mittineague](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mittineague/32/114259_2.png) [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [October 13, 2018, 5:10pm UTC](https://meta.discourse.org/t/2-1-0b6-new-topic-button-is-moving-behind-burger-on-click/96719/9 "2018-10-13T17:10:16Z")

</div>

Thanks. The padding may have something to do with it, but I suspect the main culprit is the `width: 700px`

I think it would be best to not mess with the CSS for `#evesde-modal-description` or `.modal-body` as most likely those styles are used elsewhere and you wouldn’t want to fix one problem and create others in the process.

A selector that uses both an id and a class has more specificity than those that use only the one or the other, so using both should allow you to target that `<div>` only. eg.

```plaintext
#evesde-modal-description.modal-body { 
  /* CSS rules here */ 
} 

```

If necessary try adding the element to the selector for even more specificity.

```plaintext
div#evesde-modal-description.modal-body { 
  /* CSS rules here */ 
} 

```

For a start I would try  
`width: auto;`

---

<div class="post-metadata">

### Author: ![warlof](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/warlof/32/110170_2.png) [@warlof](https://meta.discourse.org/u/warlof)
#### Post date: [October 13, 2018, 6:47pm UTC](https://meta.discourse.org/t/2-1-0b6-new-topic-button-is-moving-behind-burger-on-click/96719/10 "2018-10-13T18:47:06Z")

</div>

nope, it doesn’t work ☹

The think I don’t get is why in the hell, having the modal-body class on a modal is causing this burger button to get extra hardcoded css style stuff 😕

When I’m moving the css rules I’ve put on the div to the CSS stylesheet, the bug of the burger menu is back.  
But it does not appears while there is not the `modal-body` class on the modal body div.

Not working case :

```plaintext
CSS
div#evesde-modal-description.modal-body {
    padding: 15px;
    max-height: none !important;
    box-sizing: border-box;
    width: 100%;
    overflow-y: auto;
}

</body>
<div class="modal-body" id="evesde-modal-description"></div>

```

Working case :

```plaintext
CSS

div#evesde-modal-description {
    padding: 15px;
    max-height: none !important;
    box-sizing: border-box;
    width: 100%;
    overflow-y: auto;
}

</body>
<div id="evesde-modal-description"></div>

```

---

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [October 14, 2018, 3:51am UTC](https://meta.discourse.org/t/2-1-0b6-new-topic-button-is-moving-behind-burger-on-click/96719/11 "2018-10-14T03:51:06Z")

</div>

Your usage of the class `modal-body` is interfering with some logic in some select-kit helpers.

The _equivalent_ of `$(".modal-body").length`

> <https://github.com/discourse/discourse/blob/bfcf8ed61bebba6be3082507dafa6766024ddf3a/app/assets/javascripts/select-kit/mixins/dom-helpers.js.es6#L16>

is used in a few conditionals. In your case, it will always return true since you’re adding an element with that class in your theme which always exists.

> <https://github.com/discourse/discourse/blob/bfcf8ed61bebba6be3082507dafa6766024ddf3a/app/assets/javascripts/select-kit/mixins/dom-helpers.js.es6#L225>

I would advise against using that class. The simplest option is to add your own custom class and add the styles for `modal-body` to it.

So instead of

```plaintext
<div id="evesde-modal-description" class="modal-body"></div>

```

You would use

```plaintext
<div id="evesde-modal-description" class="modal-body-custom"></div>

```

And use that to add the missing styles from `modal-body`

---

<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: [October 14, 2018, 4:39am UTC](https://meta.discourse.org/t/2-1-0b6-new-topic-button-is-moving-behind-burger-on-click/96719/12 "2018-10-14T04:39:51Z")

</div>