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

warlof · September 8, 2018, 8:40am

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.

sam · September 10, 2018, 6:47am

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.

warlof · September 10, 2018, 7:26pm

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 ?

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>

warlof · September 15, 2018, 7:12am

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

warlof · October 12, 2018, 4:19pm

anybody can give me some inputs about this ?

Mittineague · October 12, 2018, 11:15pm

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?

warlof · October 13, 2018, 8:52am

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;

Mittineague · October 13, 2018, 5:10pm

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;

warlof · October 13, 2018, 6:47pm

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 :

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>

Johani · October 14, 2018, 3:51am

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

Topic		Replies	Views
Slight CSS bug when using a custom global navigation bar Bug	18	2439	June 4, 2016
Header Submenus Theme component official , header-submenus	87	36024	November 14, 2024
Header Categories Navbar Theme component official , categories-navbar	31	3304	July 26, 2024
CSS problem with discourse search window after latest update Support	5	798	December 8, 2018
Embedding a list of Discourse Topics in another site Announcements embedding	91	20577	February 25, 2024

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

Related topics