BootStrap 3 - NavBar with Dropdown, Extension of a Dropdown is out of max height

Question

I'm trying to use a dropdown in a navbar collapse. The issue is that when I don't open the dropdown, everything is fine, meaning that I don't need a scrollbar to see the contents. But when the dropdown is toggled, the height is not changed, thus the contents of the dropdown is not visible.

If I don't open the dropdown:

Everything is fine, but when I open the dropdown: I lose 3 menus which can only be scrolled, which are: Add, Edit, Remove

You will need to scroll up and down.

This is my CSS Code:

/*
 * Base structure
 */

/* Move down content because we have a fixed navbar that is 50px tall */
body 
{
    overflow-y: scroll;
}

/*
 * Global add-ons
 */

.custom-button-length
{
    width: 100px;
}

.sub-header 
{
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

/*
 * Top navigation
 * Hide default border to remove 1px line.
 */
@media (max-width: 767px) 
{
    .navbar-fixed-top
    {
        position: relative;
        top: auto;
    }

    .navbar-collapse 
    {
        max-height: none;
    }

    body 
    {
        margin: 0;
    }

    .navbar-default 
    {
        max-height: none;
    }
}

/*
 * Sidebar
 */

/* Hide for mobile, show later */
.wrapper 
{
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.wrapper.toggled 
{
    padding-left: 250px;
}

.wrapper.toggled .sidebar 
{
    width: 0px;
    padding-left: 0px;
    padding: 0px;
}

.sidebar 
{
    position: fixed;
    top: 51px;
    bottom: 0;
    left: 0px;
    z-index: 1000;
    display: block;
    padding: 20px;
    padding-right: 100px;
    overflow-x: hidden;
    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
    background-color: #f5f5f5;
    border-right: 1px solid #eee;
    -webkit-transition: all 1.0s ease;
    -moz-transition: all 1.0s ease;
    -o-transition: all 1.0s ease;
    transition: all 1.0s ease;
}

@media (max-width: 768px) 
{
    .sidebar 
    {
        width: 0px;
        padding-left: 0px;
        padding: 0px;
    }
}

/* Sidebar navigation */
.nav-sidebar 
{
    margin-right: -21px; /* 20px padding + 1px border */
    margin-bottom: 20px;
    margin-left: -20px;
}

.nav-sidebar > li > a 
{
    padding-right: 20px;
    padding-left: 20px;
    position: fixed-top;
}

.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus 
{
    color: #fff;
    background-color: #428bca;
}


/*
 * Main content
 */

.main 
{
    padding: 20px;
    margin-left: 210px;
    margin-top:50px;
    -webkit-transition: all 1.0s ease;
    -moz-transition: all 1.0s ease;
    -o-transition: all 1.0s ease;
    transition: all 1.0s ease;
}

@media (max-width: 768px) 
{
    .main 
    {
        margin-left: 0px;
        margin-top: -20px;
        padding-top: 20px;
        -webkit-transition: all 1.0s ease;
        -moz-transition: all 1.0s ease;
        -o-transition: all 1.0s ease;
        transition: all 1.0s ease;
    }
}

.main .page-header 
{
    margin-top: 0;
}

.main.toggled
{
    padding: 20px;
    margin-left: 0px;
    -webkit-transition: all 1.0s ease;
    -moz-transition: all 1.0s ease;
    -o-transition: all 1.0s ease;
    transition: all 1.0s ease;
}

/*
 * Placeholder dashboard ideas
 */

.placeholders 
{
    margin-bottom: 30px;
    text-align: center;
}
.placeholders h4 
{
    margin-bottom: 0;
}
.placeholder 
{
    margin-bottom: 20px;
}
.placeholder img 
{
    display: inline-block;
    border-radius: 50%;
}

.graph-container
{
    box-sizing: border-box;
    width: 850px;
    height: 450px;
    padding: 20px 15px 15px 15px;
    margin: 15px auto 30px auto;
    border: 1px solid #ddd;
    background: #fff;
    background: linear-gradient(#f6f6f6 0, #fff 50px);
    background: -o-linear-gradient(#f6f6f6 0, #fff 50px);
    background: -ms-linear-gradient(#f6f6f6 0, #fff 50px);
    background: -moz-linear-gradient(#f6f6f6 0, #fff 50px);
    background: -webkit-linear-gradient(#f6f6f6 0, #fff 50px);
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
    -o-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    -ms-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    -moz-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.graph-placeholder 
{
    width: 100%;
    height: 100%;
    font-size: 14px;
    line-height: 1.2em;
}

.legend table
{
    border-spacing: 5px;
}

This is my HTML code:

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#"> WebStats</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Dashboard</a></li>
                <li><a href="#">Settings</a></li>
                <li><a href="#">Profile</a></li>
                <li><a href="{% url 'WebApp:logout'%}">Logout</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-left">
                <li><a href="{% url 'WebApp:index'%}">Views</a></li>

                <li><a href="#toggleMenu">SideBar</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        Chart Options
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu" role="menu" data-no-collapse="true">
                        <li><a href="{% url 'WebApp:addChart'%}">Add</a></li>
                        <li><a href="{% url 'WebApp:editChart'%}">Edit</a></li>
                        <li><a href="#removeChart">Remove</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>

I've applied max height to None in mobile mode when pixels Is less than 768, however, it still requires a scroll down.

Answer 1

First of all there is no need to define your own css for mobile device. Twitter Bootstrap is mobile first, you just need to follow this Link

Hope it will help...

Answer 2

Add an important declaration to the max-height property in the mobile media query:

.navbar-collapse {
    max-height: none!important;
}