Sidebar Height Hide Input Control With Discourse Header Set Up

[fearlessfrog]

Keen to use the new sidebar version, but as of 3.0.0 (14-Nov-2017 commits on sidebar branch) our site header (using the standard Discourse customization that most sites use I think) is causing a style/height issue.

In summary, the header region (set up through Customize / Edit CSS/HTML / Header) will push the sidebar down off the bottom of the browser window, so the chat text entry input is not reachable.

Also, if Discourse hides the header (as you scroll down on a topics page) then any fixed margin or adjustment we in CSS then leaves a top blank area, i.e. we are looking for a solution that works for both the normal header and the hidden header.

Just using CSS calculated height overrides does not seem to be working.

More info at: https://meta.discourse.org/t/babble-a-chat-plugin/31753/715

Thanks for any help.

[gdpelican]

Give a spin to the new 'babble_adaptive_height' site setting in the sidebar branch and let me know how that goes?

[fearlessfrog]

Thanks for the new setting. I had tried the CSS that the settings uses already.

On a test of latest discourse (tests-passed) and the sidebar branch with the new options set unfortunately no luck, as in the two problems still remain of:

1. The input textbox at the bottom of the sidebar is below the browser.
2. When the header disappears to a small version on topic scroll down a blank area appears above it.

Images for the above:

[gdpelican]

Hm, it seems like the setting hasn't been properly applied. Can you send me the custom html you're using for your header?

[fearlessfrog]

Of course - there are styles around the list elements but essentially it's just a fixed DIV set in the Customize/Edit HTML/Desktop/Header section in discourse:

<div width='100%' style='background: #3e4a57;color: #fff; padding:20px;height:136px;max-width: 1100px; margin-right: auto; margin-left: auto;'>
    <a href='http://www.mudspike.com' target='_blank'><img style='float: left;padding-bottom: 10px;' src='https://forums.mudspike.com/uploads/default/original/2X/7/7872d1dc9e737b8e14daf93ed26aced2225ba141.png'/></a>
<br/>
<nav id="NAV_1">
    <ul id="UL_2">
        <li id="LI_3">
            <a href="/" id="A_4">Home</a>
        </li>
        <li id="LI_5">
            <a href="http://www.mudspike.com/category/news/" id="A_6">News</a>
        </li>
        <li id="LI_7">
            <a href="http://www.mudspike.com/category/review/" id="A_8">Reviews</a>
        </li>
        <li id="LI_9">
            <a href="http://www.mudspike.com/category/after-action-report/" id="A_10">AARs</a>
        </li>
        <li id="LI_11">
            <a href="http://www.mudspike.com/category/tutorial/" id="A_12">Tutorials</a>
        </li>
        <li id="LI_13">
            <a href="https://forums.mudspike.com" id="A_14">Forums</a>
        </li>
        <li id="LI_15">
            <a style='width:110px;' href="http://www.mudspike.com/events/" id="A_16">Events</a>
        </li>
        <li style='width:115px;' id="LI_15">
            <a style='width:146px;' href="http://www.mudspike.com/about-us/" id="A_16">About Us</a>
        </li>
    </ul>
</nav>

</div>

[gdpelican]

Alright, I've updated this to be a bit smarter. Give it a go now?

[fearlessfrog]

That works great - thank you!