Width checking issue in sidebar navigation

Topic: Width checking issue in sidebar navigation

hockchuan free asked 6 years ago


    <script>
        $(window).resize(function () {
            window.innerWidth = $(window).width();
        });
    </script>

When viewing the page with certain width (width between 1425p and 1440x), the sidebar navigation will disappear. I suppose 15px is scrollbar width. Can help to update mdb.min.js to take vertical scrollbar into account? Thanks.

Add comment

Adrian Sawicki free answered 6 years ago

0 0 Best answer

Thanks for showing this issue in so good manner. I've added this to our bugs list and I hope we will fix it asap.

Add comment

hockchuan free answered 6 years ago

0 0 Best answer

There's a bug where the navigation sidebar will disappear exactly between 1440 and 1455 pixels in width. It's due to width calculation being different in Javascript and media query.

<a href="http://imgur.com/a/bLozU" rel="nofollow">Album of images to view the display issues.</a>

To simulate the issue, here's the whole html page.
<pre><code>
<!DOCTYPE html>
<html lang="en">

new WOW().init();

$(document).ready(function () {
            $('.mdb-select').material_select();
        });

$(window).resize(function () {
            window.innerWidth = $(window).width();
        });
    </script>
</body>
</html>
</code></pre>

Please insert min. 20 characters.

There's a bug where the navigation sidebar will disappear exactly between 1440 and 1455 pixels in width. It's due to width calculation being different in Javascript and media query. Album of images to view the display issues. To simulate the issue, here's the whole html page.


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
    <link href="../../../css/bootstrap.min.css" rel="stylesheet">
    <link href="../../../css/mdb.min.css" rel="stylesheet">
</head>

<body class="fixed-sn mdb-skin">

    <header>
        <ul id="slide-out" class="side-nav fixed sn-bg-1 custom-scrollbar">
            </li>
            <li>
                <ul class="collapsible collapsible-accordion"></ul>
            </li>
            <div class="sidenav-bg mask-strong"></div>
        </ul>
        <nav class="navbar fixed-top navbar-toggleable-md navbar-dark scrolling-navbar double-nav">
            <div class="float-left">
                <a href="#" data-activates="slide-out" class="button-collapse"><i class="fa fa-bars"></i></a>
            </div>
        </nav>
    </header>
    <main>
        <div class="container-fluid">
		    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        </div>
    </main>
    <script type="text/javascript" src="../../../js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="../../../js/tether.min.js"></script>
    <script type="text/javascript" src="../../../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../../../js/mdb.min.js"></script>

    <script>
        $(".button-collapse").sideNav();
        var el = document.querySelector('.custom-scrollbar');
        Ps.initialize(el);

        new WOW().init();

        $(document).ready(function () {
            $('.mdb-select').material_select();
        });

        $(window).resize(function () {
            window.innerWidth = $(window).width();
        });
    </script>
</body>
</html>

Add comment

Adrian Sawicki free answered 6 years ago

0 0 Best answer

Hello, First of all, what would you like to create? What do you mean by disappear? From what I see navigation(navbar + scrollbar) works properly. At some lower resolution sidebar is hidden and there is a button to activate it.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

User: Free
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

hockchuan

27Support score
4Questions 4Answers 0Snippets