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


(Loïc Leuilliot) #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


(Sam Saffron) #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.


(Loïc Leuilliot) #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>

(Loïc Leuilliot) #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 ?!