Reputation: 37
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
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;
}
Upvotes: 4