Get UI Kit Filter with multiple containers - getuikit

Is it possible to have two containers for the filter and only one controller?
Right now it's only filtering the first container, can't do much as my layout is a masonry grid in a loop so i need the headers and the separate containers...
Here's what I'm trying to do.
<div uk-filter="target: .js-filter">
<ul class="uk-subnav uk-subnav-pill">
<li uk-filter-control>All</li>
<li uk-filter-control="[data-tags*='city']">City</li>
<li uk-filter-control="[data-tags*='coast']">Coast</li>
</ul>
<ul class="js-filter uk-text-center" uk-grid>
<div class="uk-width-1-1" data-tags="city coast"><h2>header</h2></div>
<li class="uk-width-1-3" data-tags="city">
<div class="uk-card uk-card-secondary uk-card-body">City</div>
</li>
<li class="uk-width-1-3" data-tags="coast">
<div class="uk-card uk-card-primary uk-card-body">Coast</div>
</li>
<li class="uk-width-1-3" data-tags="city">
<div class="uk-card uk-card-secondary uk-card-body">City</div>
</li>
</ul>
<ul class="js-filter uk-text-center" uk-grid>
<div class="uk-width-1-1" data-tags="city coast"><h2>header 2</h2></div>
<li class="uk-width-1-3" data-tags="city">
<div class="uk-card uk-card-secondary uk-card-body">City</div>
</li>
<li class="uk-width-1-3" data-tags="coast">
<div class="uk-card uk-card-primary uk-card-body">Coast</div>
</li>
<li class="uk-width-1-3" data-tags="city">
<div class="uk-card uk-card-secondary uk-card-body">City</div>
</li>
</ul>
</div>


If you haven't figured it out yet, and if I am understanding correctly, all you need to do is use one ul tag instead of two.
<div uk-filter="target: .js-filter">
<ul class="uk-subnav uk-subnav-pill">
<li uk-filter-control>All</li>
<li uk-filter-control="[data-tags*='city']">City</li>
<li uk-filter-control="[data-tags*='coast']">Coast</li>
</ul>
<ul class="js-filter uk-text-center" uk-grid>
<div class="uk-width-1-1" data-tags="city coast"><h2>header</h2></div>
<li class="uk-width-1-3" data-tags="city">
<div class="uk-card uk-card-secondary uk-card-body">City</div>
</li>
<li class="uk-width-1-3" data-tags="coast">
<div class="uk-card uk-card-primary uk-card-body">Coast</div>
</li>
<li class="uk-width-1-3" data-tags="city">
<div class="uk-card uk-card-secondary uk-card-body">City</div>
</li>
<div class="uk-width-1-1" data-tags="city coast"><h2>header 2</h2></div>
<li class="uk-width-1-3" data-tags="city">
<div class="uk-card uk-card-secondary uk-card-body">City</div>
</li>
<li class="uk-width-1-3" data-tags="coast">
<div class="uk-card uk-card-primary uk-card-body">Coast</div>
</li>
<li class="uk-width-1-3" data-tags="city">
<div class="uk-card uk-card-secondary uk-card-body">City</div>
</li>
</ul>
</div>


<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.6.20/css/uikit.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.6.20/js/uikit.min.js"></script>
<div class="uk-container">
<div uk-filter="target: .js-filter">
<ul class="uk-subnav uk-subnav-pill">
<li uk-filter-control>All</li>
<li uk-filter-control="[data-tags*='city']">City</li>
<li uk-filter-control="[data-tags*='coast']">Coast</li>
</ul>
<div class="uk-width-1-1 uk-text-center"><h2>Header 1</h2></div>
<ul class="js-filter uk-text-center" uk-grid>
<li class="uk-width-1-3" data-tags="city">
<div class="uk-card uk-card-secondary uk-card-body">City</div>
</li>
<li class="uk-width-1-3" data-tags="coast">
<div class="uk-card uk-card-primary uk-card-body">Coast</div>
</li>
<li class="uk-width-1-3" data-tags="city">
<div class="uk-card uk-card-secondary uk-card-body">City</div>
</li>
</ul>
<div class="uk-width-1-1 uk-text-center" ><h2>Header 2</h2></div>
<ul class="js-filter uk-text-center" uk-grid>
<li class="uk-width-1-3" data-tags="city">
<div class="uk-card uk-card-secondary uk-card-body">City</div>
</li>
<li class="uk-width-1-3" data-tags="coast">
<div class="uk-card uk-card-primary uk-card-body">Coast</div>
</li>
<li class="uk-width-1-3" data-tags="city">
<div class="uk-card uk-card-secondary uk-card-body">City</div>
</li>
</ul>
</div>
</div>
Headers should not be in filter container to avoid affect them.

Related

How to make scrollable menu with flexbox column in bootstrap

I created a menu using Bootstrap. I don't want the content to overflow in the column mode and be automatically moved down after reaching the end of the menu. The submenus of this megamenu have variable heights, which is why I want to use the column flex property.
enter image description here
i want the output to be like below image :
enter image description here
this is my megamenu code :
.dropdown-menu.show {
left: 0 !important;
right: 0 !important;
max-height: 260px;
flex-direction: column;
display: flex;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<ul class="nav nav-pills">
<li class="nav-item dropdown position-static">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="border dropdown-menu dropdown-menu-md-right py-2 shadow" aria-labelledby="bd-versions2">
<div class="row mx-0">
<div class="col-12">
<div class="align-content-between align-items-center flex-column row" style="max-height: 288px;">
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">JAVA</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory">Language Fundamentals</li>
<li class="mega-menu-subcategory">Window Form</li>
<li class="mega-menu-subcategory">.Net Framework</li>
<li class="mega-menu-subcategory">LINQ</li>
<li class="mega-menu-subcategory">ADO.NET</li>
<li class="mega-menu-subcategory">Refrence</li>
</ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">JAVA</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory">Language Fundamentals</li>
<li class="mega-menu-subcategory">Window Form</li>
<li class="mega-menu-subcategory">.Net Framework</li>
<li class="mega-menu-subcategory">LINQ</li>
<li class="mega-menu-subcategory">ADO.NET</li>
<li class="mega-menu-subcategory">Refrence</li>
</ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">JAVA</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory">Language Fundamentals</li>
<li class="mega-menu-subcategory">Window Form</li>
<li class="mega-menu-subcategory">.Net Framework</li>
<li class="mega-menu-subcategory">LINQ</li>
<li class="mega-menu-subcategory">ADO.NET</li>
<li class="mega-menu-subcategory">Refrence</li>
</ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">JAVA</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory">Language Fundamentals</li>
<li class="mega-menu-subcategory">Window Form</li>
<li class="mega-menu-subcategory">.Net Framework</li>
<li class="mega-menu-subcategory">LINQ</li>
<li class="mega-menu-subcategory">ADO.NET</li>
<li class="mega-menu-subcategory">Refrence</li>
</ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">JAVA</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory">Language Fundamentals</li>
<li class="mega-menu-subcategory">Window Form</li>
<li class="mega-menu-subcategory">.Net Framework</li>
<li class="mega-menu-subcategory">LINQ</li>
<li class="mega-menu-subcategory">ADO.NET</li>
<li class="mega-menu-subcategory">Refrence</li>
</ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">++C</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory">Language Fundamentals</li>
<li class="mega-menu-subcategory">String and Date</li>
<li class="mega-menu-subcategory">Language Fundamentals</li></ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">PHP</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory">Language Fundamentals</li>
<li class="mega-menu-subcategory">Cookie & Session</li>
<li class="mega-menu-subcategory">Date And Time</li>
</ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">Python</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory">Language Fundamentals</li>
<li class="mega-menu-subcategory">Tkinter</li>
<li class="mega-menu-subcategory">Databse</li>
</ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">Kotlin</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory">Language Fundamentals</li>
</ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">Kotlin</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory">Language Fundamentals</li>
</ul>
</div><div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">Kotlin</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory">Language Fundamentals</li>
</ul>
</div><div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">Kotlin</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory">Language Fundamentals</li>
</ul>
</div></div>
</div>
</div>
</div>
</li>
</ul>

I have made the following code changes to make the scrollable menu.
<!-- Remove align-content-between align-items-center flex-column -->
<!-- Add overflow-y: auto; overflow-x: hidden; -->
<!-- Change "max-height: 288px;" to "max-height: 250px;"-->
<div class="row" style="max-height: 250px; overflow-y: auto; overflow-x: hidden;">
.dropdown-menu.show {
left: 0 !important;
right: 0 !important;
max-height: 260px;
flex-direction: column;
display: flex;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<ul class="nav nav-pills">
<li class="nav-item dropdown position-static">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="border dropdown-menu dropdown-menu-md-right py-2 shadow" aria-labelledby="bd-versions2">
<div class="row mx-0">
<div class="col-12">
<!-- Remove align-content-between align-items-center flex-column -->
<!-- Add overflow-y: auto; overflow-x: hidden; -->
<!-- Change "max-height: 288px;" to "max-height: 250px;"-->
<div class="row" style="max-height: 250px; overflow-y: auto; overflow-x: hidden;">
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">JAVA</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory">Language Fundamentals</li>
<li class="mega-menu-subcategory">Window Form</li>
<li class="mega-menu-subcategory">.Net Framework</li>
<li class="mega-menu-subcategory">LINQ</li>
<li class="mega-menu-subcategory">ADO.NET</li>
<li class="mega-menu-subcategory">Refrence</li>
</ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">JAVA</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory">Language Fundamentals</li>
<li class="mega-menu-subcategory">Window Form</li>
<li class="mega-menu-subcategory">.Net Framework</li>
<li class="mega-menu-subcategory">LINQ</li>
<li class="mega-menu-subcategory">ADO.NET</li>
<li class="mega-menu-subcategory">Refrence</li>
</ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">JAVA</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory">Language Fundamentals</li>
<li class="mega-menu-subcategory">Window Form</li>
<li class="mega-menu-subcategory">.Net Framework</li>
<li class="mega-menu-subcategory">LINQ</li>
<li class="mega-menu-subcategory">ADO.NET</li>
<li class="mega-menu-subcategory">Refrence</li>
</ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">JAVA</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory">Language Fundamentals</li>
<li class="mega-menu-subcategory">Window Form</li>
<li class="mega-menu-subcategory">.Net Framework</li>
<li class="mega-menu-subcategory">LINQ</li>
<li class="mega-menu-subcategory">ADO.NET</li>
<li class="mega-menu-subcategory">Refrence</li>
</ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">JAVA</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory">Language Fundamentals</li>
<li class="mega-menu-subcategory">Window Form</li>
<li class="mega-menu-subcategory">.Net Framework</li>
<li class="mega-menu-subcategory">LINQ</li>
<li class="mega-menu-subcategory">ADO.NET</li>
<li class="mega-menu-subcategory">Refrence</li>
</ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">++C</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory">Language Fundamentals</li>
<li class="mega-menu-subcategory">String and Date</li>
<li class="mega-menu-subcategory">Language Fundamentals</li>
</ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">PHP</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory">Language Fundamentals</li>
<li class="mega-menu-subcategory">Cookie & Session</li>
<li class="mega-menu-subcategory">Date And Time</li>
</ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">Python</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory">Language Fundamentals</li>
<li class="mega-menu-subcategory">Tkinter</li>
<li class="mega-menu-subcategory">Databse</li>
</ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">Kotlin</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory">Language Fundamentals</li>
</ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">Kotlin</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory">Language Fundamentals</li>
</ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">Kotlin</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory">Language Fundamentals</li>
</ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">Kotlin</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory">Language Fundamentals</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
EDIT 1: Remove overflow-x, overflow-y and max-height: 250px; styles and remove the max-height in .dropdown-menu.show
<!-- Remove align-content-between align-items-center flex-column -->
<!-- Remove overflow-y: auto; overflow-x: hidden; -->
<!-- Remove "max-height: 250px;"-->
<div class="row">
.dropdown-menu.show {
left: 0 !important;
right: 0 !important;
/* max-height: 260px; */
flex-direction: column;
display: flex;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<ul class="nav nav-pills">
<li class="nav-item dropdown position-static">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="border dropdown-menu dropdown-menu-md-right py-2 shadow" aria-labelledby="bd-versions2">
<div class="row mx-0">
<div class="col-12">
<!-- Remove align-content-between align-items-center flex-column -->
<!-- Remove overflow-y: auto; overflow-x: hidden; -->
<!-- Remove "max-height: 250px;"-->
<div class="row">
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">JAVA</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory">Language Fundamentals</li>
<li class="mega-menu-subcategory">Window Form</li>
<li class="mega-menu-subcategory">.Net Framework</li>
<li class="mega-menu-subcategory">LINQ</li>
<li class="mega-menu-subcategory">ADO.NET</li>
<li class="mega-menu-subcategory">Refrence</li>
</ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">JAVA</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory">Language Fundamentals</li>
<li class="mega-menu-subcategory">Window Form</li>
<li class="mega-menu-subcategory">.Net Framework</li>
<li class="mega-menu-subcategory">LINQ</li>
<li class="mega-menu-subcategory">ADO.NET</li>
<li class="mega-menu-subcategory">Refrence</li>
</ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">JAVA</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory">Language Fundamentals</li>
<li class="mega-menu-subcategory">Window Form</li>
<li class="mega-menu-subcategory">.Net Framework</li>
<li class="mega-menu-subcategory">LINQ</li>
<li class="mega-menu-subcategory">ADO.NET</li>
<li class="mega-menu-subcategory">Refrence</li>
</ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">JAVA</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory">Language Fundamentals</li>
<li class="mega-menu-subcategory">Window Form</li>
<li class="mega-menu-subcategory">.Net Framework</li>
<li class="mega-menu-subcategory">LINQ</li>
<li class="mega-menu-subcategory">ADO.NET</li>
<li class="mega-menu-subcategory">Refrence</li>
</ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">JAVA</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory">Language Fundamentals</li>
<li class="mega-menu-subcategory">Window Form</li>
<li class="mega-menu-subcategory">.Net Framework</li>
<li class="mega-menu-subcategory">LINQ</li>
<li class="mega-menu-subcategory">ADO.NET</li>
<li class="mega-menu-subcategory">Refrence</li>
</ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">++C</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory">Language Fundamentals</li>
<li class="mega-menu-subcategory">String and Date</li>
<li class="mega-menu-subcategory">Language Fundamentals</li>
</ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">PHP</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory">Language Fundamentals</li>
<li class="mega-menu-subcategory">Cookie & Session</li>
<li class="mega-menu-subcategory">Date And Time</li>
</ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">Python</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory">Language Fundamentals</li>
<li class="mega-menu-subcategory">Tkinter</li>
<li class="mega-menu-subcategory">Databse</li>
</ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">Kotlin</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory">Language Fundamentals</li>
</ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">Kotlin</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory">Language Fundamentals</li>
</ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">Kotlin</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory">Language Fundamentals</li>
</ul>
</div>
<div class="col-sm-2">
<ul class="tpcategory px-0">
<li class="dropdown-header p-2">Kotlin</li>
<li class="dropdown-divider m-0"></li>
<li class="mega-menu-subcategory">Language Fundamentals</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>

i have edited your code you can see it or copy it maybe it can help
<div class="nav-item dropdown tuts mega-menu static">
<!-- <div class="dropdown dropright"> -->
<a class="nav-link dropdown-toggle" href="#" id="bd-versions2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Mega Menu
</a>
<div class="border dropdown-menu dropdown-menu-md-right shadow" aria-labelledby="bd-versions2">
<div class=" d-md-flex flex-wrap" >
<div style="margin-right: 2%; margin-left: 10px;">
<!-- <ul class="tpcategory px-0"> -->
<div class="dropdown-header p-2">JAVA</div>
<div class="dropdown-divider m-0"></div>
<div class="mega-menu-subcategory dropdown-item">Language Fundamentals</div>
<div class="mega-menu-subcategory dropdown-item">Window Form</div>
<div class="mega-menu-subcategory dropdown-item">.Net Framework</div>
<div class="mega-menu-subcategory dropdown-item">LINQ</div>
<div class="mega-menu-subcategory dropdown-item">ADO.NET</div>
<div class="mega-menu-subcategory dropdown-item">Refrence</div>
<!-- </ul> -->
</div>
<div style="margin-right: auto;">
<!-- <ul class="tpcategory px-0"> -->
<div class="dropdown-header p-2">JAVA</div>
<div class="dropdown-divider m-0"></div>
<div class="mega-menu-subcategory dropdown-item">Language Fundamentals</div>
<div class="mega-menu-subcategory dropdown-item">Window Form</div>
<div class="mega-menu-subcategory dropdown-item">.Net Framework</div>
<div class="mega-menu-subcategory dropdown-item">LINQ</div>
<div class="mega-menu-subcategory dropdown-item">ADO.NET</div>
<div class="mega-menu-subcategory dropdown-item">Refrence</div>
<!-- </ul> -->
</div>
<div style="margin-right: auto;">
<!-- <ul class="tpcategory px-0"> -->
<div class="dropdown-header p-2">JAVA</div>
<div class="dropdown-divider m-0"></div>
<div class="mega-menu-subcategory dropdown-item">Language Fundamentals</div>
<div class="mega-menu-subcategory dropdown-item">Window Form</div>
<div class="mega-menu-subcategory dropdown-item">.Net Framework</div>
<div class="mega-menu-subcategory dropdown-item">LINQ</div>
<div class="mega-menu-subcategory dropdown-item">ADO.NET</div>
<div class="mega-menu-subcategory dropdown-item">Refrence</div>
<!-- </ul> -->
</div>
<div style="margin-right: auto;">
<!-- <ul class="tpcategory px-0"> -->
<div class="dropdown-header p-2">JAVA</div>
<div class="dropdown-divider m-0"></div>
<div class="mega-menu-subcategory dropdown-item">Language Fundamentals</div>
<div class="mega-menu-subcategory dropdown-item">Window Form</div>
<div class="mega-menu-subcategory dropdown-item">.Net Framework</div>
<div class="mega-menu-subcategory dropdown-item">LINQ</div>
<div class="mega-menu-subcategory dropdown-item">ADO.NET</div>
<div class="mega-menu-subcategory dropdown-item">Refrence</div>
<!-- </ul> -->
</div>
<div style="margin-right: auto;">
<!-- <ul class="tpcategory px-0"> -->
<div class="dropdown-header p-2">JAVA</div>
<div class="dropdown-divider m-0"></div>
<div class="mega-menu-subcategory dropdown-item">Language Fundamentals</div>
<div class="mega-menu-subcategory dropdown-item">Window Form</div>
<div class="mega-menu-subcategory dropdown-item">.Net Framework</div>
<div class="mega-menu-subcategory dropdown-item">LINQ</div>
<div class="mega-menu-subcategory dropdown-item">ADO.NET</div>
<div class="mega-menu-subcategory dropdown-item">Refrence</div>
<!-- </ul> -->
</div>
<div style="margin-right: auto;">
<!-- <ul class="tpcategory px-0"> -->
<div class="dropdown-header p-2">++C</div>
<div class="dropdown-divider m-0"></div>
<div class="mega-menu-subcategory dropdown-item">Language Fundamentals</div>
<div class="mega-menu-subcategory dropdown-item">String and Date</div>
<div class="mega-menu-subcategory">Language Fundamentals</div>
<!-- </ul> -->
</div>
<div style="margin-right: auto;">
<!-- <ul class="tpcategory px-0"> -->
<div class="dropdown-header p-2">PHP</div>
<div class="dropdown-divider m-0"></div>
<div class="mega-menu-subcategory dropdown-item">Language Fundamentals</div>
<div class="mega-menu-subcategory dropdown-item">Cookie & Session</div>
<div class="mega-menu-subcategory dropdown-item">Date And Time</div>
<!-- </ul> -->
</div>
<div style="margin-right: auto;">
<!-- <ul class="tpcategory px-0"> -->
<div class="dropdown-header p-2">Python</div>
<div class="dropdown-divider m-0"></div>
<div class="mega-menu-subcategory dropdown-item">Language Fundamentals</div>
<div class="mega-menu-subcategory dropdown-item">Tkinter</div>
<div class="mega-menu-subcategory dropdown-item">Databse</div>
<!-- </ul> -->
</div>
<div style="margin-right: auto;">
<!-- <ul class="tpcategory px-0"> -->
<div class="dropdown-header p-2">Kotlin</div>
<div class="dropdown-divider m-0"></div>
<div class="mega-menu-subcategory dropdown-item">Language Fundamentals</div>
<!-- </ul> -->
</div>
<div style="margin-right: auto;">
<!-- <ul class="tpcategory px-0"> -->
<div class="dropdown-header p-2">Kotlin</div>
<div class="dropdown-divider m-0"></div>
<div class="mega-menu-subcategory dropdown-item">Language Fundamentals</div>
<!-- </ul> -->
</div><div style="margin-right: auto;">
<!-- <ul class="tpcategory px-0"> -->
<div class="dropdown-header p-2">Kotlin</div>
<div class="dropdown-divider m-0"></div>
<div class="mega-menu-subcategory dropdown-item">Language Fundamentals</div>
<!-- </ul> -->
</div><div style="margin-right: auto;">
<!-- <ul class="tpcategory px-0"> -->
<div class="dropdown-header p-2">Kotlin</div>
<div class="dropdown-divider m-0"></div>
<div class="mega-menu-subcategory dropdown-item">Language Fundamentals</div>
<!-- </ul> -->
</div></div>
</div>
<!-- </div> -->
</div>
if you face any problem please tell

Responsive Navbar in Uikit 3.1.6

I have been trying to create a responsive Navbar that works on both mobile and pc. but it does not seems to work.
<nav class="uk-container uk-navbar">
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li class="uk-active">
UIKit<strong>Nav</strong>
</li
</ul>
</div>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav uk-visible#s">
<li><a class="uk-text-large" #">about</a></li>
<li><a class="uk-text-large" href="#">blog</a></li>
</ul>
<a href="#" class="uk-navbar-toggle uk-hidden#s" uk-navbar-
toggle-icon uk-toggle="target: #sidenav">MENU</a>
</div>
</nav>
<div id="sidenav" uk-offcanvas="overlay: true; mode: push; flip: true"
class="uk-offcanvas">
<div class="uk-offcanvas-bar">
<ul class="uk-nav">
<li><a class="uk-text-large" #">about</a></li>
<li><a class="uk-text-large" href="#">blog</a></li>
</ul>
</div>
</div>
the menu icon does not seems to open mobile nav

Maybe it's just invalid HTML markup? In my example code snippet it works just fine
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.6/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.6/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.6/js/uikit-icons.min.js"></script>
<nav class="uk-container uk-navbar">
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li class="uk-active">
UIKit<strong>Nav</strong>
</li>
</ul>
</div>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav uk-visible#s">
<li><a class="uk-text-large" href="#">about</a></li>
<li><a class="uk-text-large" href="#">blog</a></li>
</ul>
MENU
</div>
</nav>
<div id="sidenav" uk-offcanvas="overlay: true; mode: push; flip: true" class="uk-offcanvas">
<div class="uk-offcanvas-bar">
<ul class="uk-nav">
<li><a class="uk-text-large" href="#">about</a></li>
<li><a class="uk-text-large" href="#">blog</a></li>
</ul>
</div>
</div>

Bootstrap 4.1 flex 50%-high scroll list

Trying to create a full-screen layout with a top and bottom half. Top half should contain a list of items that should have a scroll-bar if it exceeds half of the screen height.
After some searching, I was able to get a workable solution using following markup:
<div id="app">
<main role="main" class="container-fluid d-flex">
<div class="row flex-fill bg-primary" style="min-height:100vh;">
<div class="col-sm h-100">
<div class="row h-50 bg-warning" style="overflow:scroll;">
<div class="col-sm">
<div>
<ul class="">
<li class="">Series 100</li>
<li class="">Series 200</li>
<li class="">Series 300</li>
<li class="">Series 400</li>
<li class="">Series 500</li>
<li class="">Series 600</li>
<li class="">Series 700</li>
<li class="">Series 800</li>
<li class="">Series 900</li>
<li class="">Series 1000</li>
</ul>
</div>
</div>
</div>
<div class="row h-50 bg-success">
<div class="col-sm">
<div>
test
</div>
</div>
</div>
</div>
</div>
</main>
</div>
http://jsfiddle.net/0zbcr7mg/4/ (make sure output window is reduced to the point where whole list doesn't fit in)
However, once I added more items to the list, the layout broke down - list still had a scrollbar, but it was taking more than 50% of the output window's heigh:
http://jsfiddle.net/0zbcr7mg/3/
What changes should I make in the mark-up to behave consistently regardless of the amount of elements in the list?

You just need to change the row min-height:100vh to height:100vh...
http://jsfiddle.net/tokep2gn/
<div id="app">
<main role="main" class="container-fluid d-flex">
<div class="row flex-fill bg-primary" style="height: 100vh;">
<div class="col-sm h-100">
<div class="row h-50 bg-warning" style="overflow:scroll;">
<div class="col-sm">
<div>
<ul class="">
<li class="">Series 100</li>
<li class="">Series 200</li>
<li class="">Series 300</li>
<li class="">Series 400</li>
<li class="">Series 500</li>
<li class="">Series 600</li>
<li class="">Series 700</li>
<li class="">Series 800</li>
<li class="">Series 900</li>
<li class="">Series 1000</li>
<li class="">Series 100</li>
<li class="">Series 200</li>
<li class="">Series 300</li>
<li class="">Series 400</li>
<li class="">Series 500</li>
<li class="">Series 600</li>
<li class="">Series 700</li>
<li class="">Series 800</li>
<li class="">Series 900</li>
<li class="">Series 1000</li>
</ul>
</div>
</div>
</div>
<div class="row h-50 bg-success">
<div class="col-sm">
<div>
test
</div>
</div>
</div>
</div>
</div>
</main>
</div>

You should be able to simplify your code a bit by utilizing 2x sections with a viewport height of 50% like this
HTML
<section id="top">
<ul>
<li class="">Series 100</li>
<li class="">Series 200</li>
<li class="">Series 300</li>
<li class="">Series 400</li>
<li class="">Series 500</li>
<li class="">Series 600</li>
<li class="">Series 700</li>
<li class="">Series 800</li>
<li class="">Series 900</li>
<li class="">Series 1000</li>
</ul>
</section>
<section id="bottom">
<ul>
<li class="">Series 100</li>
<li class="">Series 200</li>
<li class="">Series 300</li>
<li class="">Series 400</li>
<li class="">Series 500</li>
<li class="">Series 600</li>
<li class="">Series 700</li>
<li class="">Series 800</li>
<li class="">Series 900</li>
<li class="">Series 1000</li>
</ul>
</section>
CSS
* {
margin: 0;
padding: 0;
}
#top {
height: 50vh;
background-color: dodgerblue;
overflow: auto; /* Allows for scroll without scrollbars created by overflow: scroll; */
}
#bottom {
height: 50vh;
background-color: tomato;
overflow: auto;
}
Hope this helps 👍

You can check next approach for what you are looking:
1) The root div should always have assigned a 100vh value.
2) The main layout is one row using a setup of two col-12 and each one of they having exactly 50% of the height.
I also filled the ul list from Javascript for keep the markup cleaner.
$(document).ready(function()
{
for (var i = 100; i <= 2000; i += 100)
{
$(".custom-list").append("<li>Series " + i + "</li>");
}
});
#app {
height: 100vh;
}
#bottom-section, #top-section {
overflow-y: scroll;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div id="app">
<main role="main" class="container-fluid h-100">
<div class="row bg-primary h-100">
<div id="top-section" class="col-12 h-50 bg-warning">
<ul class="custom-list"></ul>
</div>
<div id="bottom-section" class="col-12 h-50 bg-success">
<div>test</div>
</div>
</div>
</main>
</div>

MVC dynamic menu

This is my Shared Layout where I have this menu layout but IO want it to be an Dynamic menu with scrolling effect when I hover over an menu it wil scroll out and show the menu entries that are correspondig with that top menu.
<div>
<div id="LHS">
<div id="leftNavBox">
<div class="leftNavBoxTop">
</div>
<div class="leftNavBoxCenter">
#if (Model.MainMenu.ShowMaintenanceMenu)
{
<div class="mainmenu">
<ul>
<li><a title="Maintenance" class="mainmenulinks_Sublinks" href="#">Maintenance</a></li>
</ul>
<div id="ViewSubMenu1">
<div class="submenu">
<ul>
<li>
#Html.ActionLink("Business Partners", "Index", "BP")
</li>
</ul>
</div>
<div class="submenu">
<ul>
<li>
#Html.ActionLink("Services", "Index", "Service")
</li>
</ul>
</div>
<div class="submenu">
<ul>
<li>
#Html.ActionLink("Tariffs", "Index", "Tariff")
</li>
</ul>
</div>
<div class="submenu">
<ul>
<li>
#Html.ActionLink("Users", "Index", "User")
</li>
</ul>
</div>
<div class="submenu">
<ul>
<li>
#Html.ActionLink("Monthly Reports", "Index", "MonthlyReportFile")
</li>
</ul>
</div>
</div>
</div>
}
<div class="LHS_Spacer">
</div>
#if (Model.MainMenu.ShowMaintenanceMenu)
{
<div class="mainmenu">
<ul>
<li><a title="Analyses and Reports" class="mainmenulinks_Sublinks" href="#">Analyses and Reports</a></li>
</ul>
<div id="ViewSubMenu1">
<div class="submenu">
<ul>
<li>
#Html.ActionLink("Finance Report", "Index", "FinanceReport")
</li>
</ul>
</div>
</div>
</div>
}
</div>
<div class="leftNavBoxBottom">
</div>
</div>
</div>
<div id="contentArea">
#RenderBody()
</div>

How to build bottom part of bootstrap nav tab?

To build nav tabs via Bootstrap, it's simple, I just add code:
<ul class="nav nav-tabs">
<li class="active">
Home
</li>
<li>Tab1</li>
<li>Tab2</li>
</ul>
http://jsfiddle.net/M4YZ6/
but it's only top part of the tabs, who knows how to build bottom part using bootstrap like on picture below:
Thanks a lot!

try this
http://jsfiddle.net/M4YZ6/5/
HTML
<div class="tabbable">
<ul class="nav nav-tabs" id="myTab">
<li class="active">
<a data-original-title="" rel="tooltip" href="#tab1" data-toggle="tab">Home</a>
</li>
<li><a data-original-title="" rel="tooltip" href="#tab2" data-toggle="tab">Profile</a></li>
<li><a data-original-title="" rel="tooltip" href="#tab3" data-toggle="tab">Message</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="tab1">
Home
</div>
<div class="tab-pane" id="tab2">
Profile
</div>
<div class="tab-pane" id="tab3">
Message
</div>
</div>
</div>

I believe Tabbable nav is what you are looking for,
<div class="tabbable"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I'm in Section 2.</p>
</div>
</div>
</div>
Markup taken from the nav component documentation
===Edit===
Js fiddle

Resources