Gill
Gill

Reputation: 37

how to add scrollbar for a dropdown inside the fixed navbar

I am using navbar (bootstrap 3) as the main navigation menu in my website and I have couple of dropdown menus on it (some of them filled with the fixed data , some data is coming from database) , I want to have a Y-scrollbar for inside each dropdown , so without changing anything in my navigation bar when user click on drondown it show the limited data with ability to scroll to see the rest

All ideas are greatly appreciated. here is my code :

  <nav class="navbar navbar-inverse" role="navigation">
  <div class="collapse navbar-collapse navbar-ex1-collapse" >
        <ul class="nav navbar-nav">
            @if (Html.HasAssetContext())
            {
                <li><a href="@Url.Action("Index", Html.HasAssetContext() ? "Asset" : "Home")"><i class="icon-home"></i></a></li>
            }
            @if (Html.HasPermission(Category.SEARCH) && (Html.HasCompanyContext() || Html.IsClient()))
            {
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-search"></i>Search <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        @Html.MenuLink("Systems", "Index", "System")
                        @Html.MenuLink("Machines", "Index", "Machine")
                        @Html.MenuLink("Components", "Index", "Component")
                        @Html.MenuLink("Exceptions", "Index", "Exception")
                    </ul>
                </li>
            }
            @if (Html.HasPermission(Category.ORDER) && Html.OrderModuleEnabled())
            {
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-briefcase"></i>Order <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        @Html.MenuLink("Customers", "Customers", "Order")
                        @Html.MenuLink("Machine Orders", "MachineOrders", "Order")
                    </ul>
                </li>
            }
            @if (Html.HasAssetContext())
            {
                if (Html.HasPermission(Category.REPORT))
                {
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-file-text"></i>Report <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            @Html.MenuLink("Exception Charts", "Index", "Chart")
                            <li class="divider"></li>
                            @Html.MenuLink("PM Compliance By Machine", "MachinePmCompliance", "Report")
                            @Html.MenuLink("PM Compliance By Component", "ComponentPmCompliance", "Report")
                            <li class="divider"></li>
                            @Html.MenuLink("MTBE By Machine", "MachineMeanTimeBetweenException", "Report")
                            @Html.MenuLink("MTBE By Component", "ComponentMeanTimeBetweenException", "Report")
                            <li class="divider"></li>
                            @Html.MenuLink("Cost Benefit Analysis", "CostAnalysis", "Report")
                            @Html.MenuLink("Asset Hierarchy", "AssetHierarchy", "Report")
                        </ul>
                    </li>
                }
                if (Html.HasPermission(Category.DOCUMENT))
                {
                    <li><a href="@Url.Action("Documents", "Document")"><i class="icon-file"></i>Documents</a></li>
                }
                if (Html.HasPermission(Category.DATA_ENTRY))
                {
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-list"></i>Data <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            @Html.MenuLink("Identification Reports", "IdentificationReports", "Report")
                            @Html.MenuLink("Component Checklist", "ComponentChecklist", "Data")
                            @Html.MenuLink("Manage Engineers", "Engineers", "Data")
                        </ul>
                    </li>
                }
            }
            @if (Html.HasCompanyContext() || Html.IsClient())
            {
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-anchor"></i>Assets <b class="caret"></b></a>
                    @Html.AssetMenuLinks()
                </li>
            }
            @if (Html.HasPermission(Category.SELECT_COMPANY))
            {
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-building"></i>Companies <b class="caret"></b></a>
                    @Html.CompanyMenuLinks()
                </li>
            }
            @if (Html.HasPermission(Category.ADMINISTRATION))
            {
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-cog"></i>Admin <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        @Html.MenuLink("Companies", "Companies", "Administration")
                        @Html.MenuLink("Assets", "Assets", "Administration")
                        @Html.MenuLink("Users", "Users", "Administration")
                        <li class="divider"></li>
                        @Html.MenuLink("Applications", "Applications", "Administration")
                        @Html.MenuLink("Bearings", "Bearings", "Administration")
                        @Html.MenuLink("Departments", "Departments", "Administration")
                        @Html.MenuLink("Environments", "Environments", "Administration")
                        @Html.MenuLink("Faults", "Faults", "Administration")
                        @Html.MenuLink("Manufacturers", "Manufacturers", "Administration")
                        @Html.MenuLink("Severities", "Severities", "Administration")
                        @Html.MenuLink("Techniques", "Techniques", "Administration")
                        @Html.MenuLink("Templates", "Templates", "Administration")
                        @Html.MenuLink("Work Order Statuses", "WorkOrderStatuses", "Administration")
                        <li class="divider"></li>
                        @Html.MenuLink("Import Data", "ImportData", "Administration")
                        @Html.MenuLink("Audit History", "AuditHistory", "Administration")
                    </ul>
                </li>
            }
            @if (!Html.IsClient())
            {
                <li><a href="@Url.Action("Index", "Info")"><i class="icon-info"></i>Info</a></li>
            }
        </ul>
           </div>
</nav>

Upvotes: 2

Views: 4801

Answers (1)

Roy Prins
Roy Prins

Reputation: 3080

As I said in my comment, import a custom css file after the bootstrap one and try something like:

.dropdown-menu {
  max-height:150px;
  overflow-y:scroll;
}

enter image description here

Upvotes: 4

Related Questions