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

Support
1

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 :

.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 :

{
    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
image.png1174×161 68.1 KB

2 Likes
2

Does this happen in safe mode? How to use Discourse Safe Mode

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

3

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 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 ? :confused:

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

<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>
4

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.

<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 :

<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 ?!

5

anybody can give me some inputs about this ?

7

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?

2 Likes
8

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

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 :

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

Missing styles are the following :

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;
9

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.

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

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

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

For a start I would try
width: auto;

1 Like
10

nope, it doesn’t work :frowning:

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 :confused:

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 :

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 :

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>
11

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

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

You would use

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

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

4 Likes