UI-Bootsrap dropdown stop working with adding ng-if on the drop-down content - angular-ui-bootstrap

I'm using ui-boostrap dropdown directive, and want to add my own ng-if to prevent showing it on some cases.
When adding this ng-if, even when it always returns "true" - the dropdown stop working (doesn't pop up). It seems the drop-down button stops receiving ng-click events (therefore not changing the isOpen state..).
HTML:
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.2.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="DropdownCtrl">
<!-- Single button -->
<div class="btn-group" uib-dropdown is-open="status.isopen">
<!-- When putting this ng-if, the drop down stops working -->
<div ng-if="isAllowed()">
<button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul class="uib-dropdown-menu" role="menu" aria-labelledby="single-button">
<li role="menuitem">Action</li>
<li role="menuitem">Another action</li>
<li role="menuitem">Something else here</li>
<li class="divider"></li>
<li role="menuitem">Separated link</li>
</ul>
</div>
</div>
<script type="text/ng-template" id="dropdown.html">
<ul class="uib-dropdown-menu" role="menu" aria-labelledby="button-template-url">
<li role="menuitem">Action in Template</li>
<li role="menuitem">Another action in Template</li>
<li role="menuitem">Something else here</li>
<li class="divider"></li>
<li role="menuitem">Separated link in Template</li>
</ul>
</script>
</div>
</body>
</html>
JS:
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DropdownCtrl', function ($scope, $log) {
$scope.items = [
'The first choice!',
'And another choice for you.',
'but wait! A third!'
];
$scope.status = {
isopen: false
};
$scope.toggled = function(open) {
$log.log('Dropdown is now: ', open);
};
$scope.toggleDropdown = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.status.isopen = !$scope.status.isopen;
console.log('isOpen = ' + $scope.status.isopen);
};
$scope.isAllowed = function() {
return true;
}
});
Here is a plunker reproduce the problem:
http://plnkr.co/edit/8K9MUsDfFcjyiZvFdv5x?p=preview
Any ideas?

Take out the div with the ng-if on it and put the ng-if on the enclosing div, i.e.
<div class="btn-group" uib-dropdown is-open="status.isopen" ng-if="isAllowed()">
<button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul class="uib-dropdown-menu" role="menu" aria-labelledby="single-button">
<li role="menuitem">Action</li>
<li role="menuitem">Another action</li>
<li role="menuitem">Something else here</li>
<li class="divider"></li>
<li role="menuitem">Separated link</li>
</ul>
</div>

Related

Making a navbar with 2 rows collapsible

I am using bootstrap5 to make a navbar with 2 rows that is collapsible when it goes into mobile/smaller window.
Its all working but I don't think its the best way to achieve it and on top of that I have a bug when I forget to toggle it off and resize the window the menu stay.
See this GIF for what it looks like right now:
I had to create a secondary hidden menu in order to show/hide after it collapse past certain screen size, which does not look ideal.
Is there a proper way to achieve this navbar with bootstrap without having all these hacks I had to use or a proper way to achieve it?
With exception to the bug of the menu staying if u don't toggle it off it all looks the way I want it to.
I believe there is a better way to do this, but I am not experienced enough to figure it out by myself.
This is my current code:
<header>
<nav class="navbar navbar-expand-md navbar-dark bg-dark container container flex-column">
<div class="container">
My LOGO HERE
<button id="navbarCollapseBtn" type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-expanded="true">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse show" id="navbarCollapse" style="visibility: hidden;">
<div class="navbar-nav">
Home
Categories
Tags
Contact Us
<i class="fa-solid fa-user"></i> Sign Up
<i class="fa-sharp fa-solid fa-arrow-right-to-bracket"></i> Login
</div>
</div>
<form class="d-flex justify-content-between">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<button type="button" class="btn btn-secondary"><i class="fas fa-search"></i></button>
</div>
</form>
</div>
<div class="navbar-collapse container mt-2 d-none d-md-block">
<div class="navbar-nav">
Home
Categories
Tags
Contact Us
</div>
<div class="navbar-nav">
<i class="fa-solid fa-user"></i> Sign Up
<i class="fa-sharp fa-solid fa-arrow-right-to-bracket"></i> Login
</div>
</div>
</nav>
</header>
I had to further add this javascript to make it all work
$(document).ready(function()
{
$('#navbarCollapseBtn').click(function ()
{
if ($('#navbarCollapse').css('visibility') === 'hidden')
{
$('#navbarCollapse').css('visibility', 'visible', 'important');
$("#navbarCollapse").collapse("show");
}
else
{
$('#navbarCollapse').css('visibility', 'hidden', 'important');
$("#navbarCollapse").collapse("hide");
}
return false;
});
});
Here you go...
.navbar-nav {
width: calc(100vw - 24px);
}
.navbar-brand {
position: absolute;
top: calc(0px + 8px);
padding: 8px;
}
#media screen and (max-width: 767px) {
.navbar-brand {
position: relative;
top: 0;
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<nav class="navbar navbar-light navbar-expand-md">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar">
<span class="visually-hidden">Toggle navigation</span>
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbar" class="collapse navbar-collapse">
<div class="row ms-auto">
<div class="col-12 ps-0">
<ul class="navbar-nav float-none float-md-end d-flex justify-content-start">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Categories</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tags</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa-solid fa-user"></i> Sign Up
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fa-sharp fa-solid fa-arrow-right-to-bracket"></i> Login
</a>
</li>
</ul>
</div>
<div class="col-12 ps-0 order-md-first">
<ul class="navbar-nav d-flex justify-content-end">
<li class="nav-item">
<div class="input-group">
<input type="text" class="form-control" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Search</button>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
EDIT
.navbar-nav {
width: calc(100vw - 24px);
}
.navbar-brand {
position: absolute;
top: calc(0px + 8px);
padding: 8px;
}
.move-right a {
display: inline-block;
}
#media screen and (max-width: 767px) {
.navbar-brand {
position: relative;
top: 0;
}
.move-right a {
display: block;
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<nav class="navbar navbar-light navbar-expand-md">
<div class="container-fluid">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar">
<span class="visually-hidden">Toggle navigation</span>
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbar" class="collapse navbar-collapse">
<div class="row ms-auto">
<div class="col-12 ps-0">
<ul class="navbar-nav float-none float-md-end d-flex justify-content-start">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Categories</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tags</a>
</li>
<li class="nav-item ms-md-auto move-right">
<a class="nav-link" href="#">
<i class="fa-solid fa-user"></i> Sign Up
</a>
<a class="nav-link" href="#">
<i class="fa-sharp fa-solid fa-arrow-right-to-bracket"></i> Login
</a>
</li>
</ul>
</div>
<div class="col-12 ps-0 order-md-first">
<ul class="navbar-nav d-flex justify-content-end">
<li class="nav-item">
<div class="input-group">
<input type="text" class="form-control" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Search</button>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>

Vertically align image and nav item in navbar in Bootstrap 5

I am trying to align an image and a nav-link vertically centre in Bootstrap 5. But the nav-link with button never aligns to the navbar and the other links.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="/css/site.css?v=47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU" />
</head>
<body class="d-flex flex-column min-vh-100 bg-dark">
<header>
<nav b-kcycjqi1p7 class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-primary box-shadow mb-3 py-2">
<div b-kcycjqi1p7 class="container-fluid">
<a class="navbar-brand" href="/">
Logo
</a>
<button b-kcycjqi1p7 class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span b-kcycjqi1p7 class="navbar-toggler-icon"></span>
</button>
<div b-kcycjqi1p7 class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul b-kcycjqi1p7 class="navbar-nav flex-grow-1">
<li b-kcycjqi1p7 class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
<li b-kcycjqi1p7 class="nav-item">
<a class="nav-link" href="/home/privacy">Privacy</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item d-inline-block">
<a class="nav-link btn btn-danger" href="#" role="button" >
hello
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<img src="data:image/png;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAwADADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDBtdJ1tdTF5EbpVV2Cgxsw687vTiori+ntddEk8rQ+W+TbgbyT6Y9PrU+r6p4nlc6PBHcRJJzvLEu4+v8ASsuDS9Re582WCSacH5pQ+cN0Oaw5fd1PPa6s2n1uSS9SMiaGAkHL8DntxXe22i2F0IPPnmnW5+aN9m0EjqPwrzvT08Ua2ZhpHkQw2r+QGdQCWB5NbkWu+JPBt3HbeIXje3nUrDOhzg/iO9ZvBU+ZNPX+vM2+pStzI07jTJooZLSzHm3UcuXmJJH+6p6YxSRW3lzgSyupEe90wQRXR2sMTeRcPPdRs2NixyjbIG5Hy/5xTrsxm5NuSYxKxSQsOee2eta00o+6iKdRw0PL2vYZvEUumzSyt9ptlmS5jc+bHcYyCp9M9qoalHd+INIF7G6jU7Xi9WE7HkA/iK+o7kVgx3sbatM+HEgZo0cnuOlJb389r4ka6RnSdlbaB3OK6dC3CzO48OQ3+yzdNeTT4b2R3uEyOfVvT6fWtWPSBrdhd6dqOvNqUofdAH5CEc5ViTjI4yOOa47RvPvtJmkvbGQ2ce5knZSFBJwVDEY684rtPB/h99dlmFgpt7VoWSScnIDFCowccnpwPSsJuSdkerTlH2abL1uy6lodxLbzyGWFifLjILxoD1APXgdRUK+KJdQWOQRLKU/dvOASA3QfjjvU2qQ32j6ZZajcRNaaqluLe9ixwSDgSAjgjIBz71zFlLPPJJ9jm8ieeTLozBEYdyB0yawlGNOyvY8Rx1OIsdDvtb1waVaxyG8urzbGNnCJyWcn0A5r6o0bQdD0iGODTtOt1aNApm8ob392bGSTjmuN+Fnh8obzXLhNpZmt7fI+YqD8zHI4yeOPSu3gnX7bdxiTgFVPI54yK6m+h2Ju1yzf2sd/CbaVVMLDBUgEflS2FhbWSbYVwe4z/TpTBdD7WlqBhxEZcD0zgf1pt1ctJlIJBGVI3MRSdtxpjtTtdM1awe1v4EuYX/5Zkcn6d/xFcPL4W0vS9ZjuGkzY3EbR+XIAwjccgbsemfyrtbeF5lF7udQ4yEGBlR0yeuD1wMda5/xxNHb6RbGeVoke5AQqM/wMeQc5FK13cVSKav1P/9k=" alt="Akshay Gollahalli" width="40" height="40" class="rounded-circle">
</a>
<ul class="dropdown-menu dropdown-menu-dark dropdown-menu-end">
<li><a class="dropdown-item bg-danger" href="/microsoftidentity/account/signout">Sign out</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
</body>
</html>
That's the hello button. Is there a way to make then vertically aligned to other links? Any help on this is appreciated.
navbar-nav has display: flex; so you can use the align-items-center utility class to the <ul> element.
<ul class="navbar-nav align-items-center">
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="/css/site.css?v=47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU" />
</head>
<body class="d-flex flex-column min-vh-100 bg-dark">
<header>
<nav b-kcycjqi1p7 class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-primary box-shadow mb-3 py-2">
<div b-kcycjqi1p7 class="container-fluid">
<a class="navbar-brand" href="/">
Logo
</a>
<button b-kcycjqi1p7 class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span b-kcycjqi1p7 class="navbar-toggler-icon"></span>
</button>
<div b-kcycjqi1p7 class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul b-kcycjqi1p7 class="navbar-nav flex-grow-1">
<li b-kcycjqi1p7 class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
<li b-kcycjqi1p7 class="nav-item">
<a class="nav-link" href="/home/privacy">Privacy</a>
</li>
</ul>
<ul class="navbar-nav align-items-center">
<li class="nav-item">
<a class="nav-link btn btn-danger" href="#" role="button" >
hello
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<img src="data:image/png;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAAwADADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDBtdJ1tdTF5EbpVV2Cgxsw687vTiori+ntddEk8rQ+W+TbgbyT6Y9PrU+r6p4nlc6PBHcRJJzvLEu4+v8ASsuDS9Re582WCSacH5pQ+cN0Oaw5fd1PPa6s2n1uSS9SMiaGAkHL8DntxXe22i2F0IPPnmnW5+aN9m0EjqPwrzvT08Ua2ZhpHkQw2r+QGdQCWB5NbkWu+JPBt3HbeIXje3nUrDOhzg/iO9ZvBU+ZNPX+vM2+pStzI07jTJooZLSzHm3UcuXmJJH+6p6YxSRW3lzgSyupEe90wQRXR2sMTeRcPPdRs2NixyjbIG5Hy/5xTrsxm5NuSYxKxSQsOee2eta00o+6iKdRw0PL2vYZvEUumzSyt9ptlmS5jc+bHcYyCp9M9qoalHd+INIF7G6jU7Xi9WE7HkA/iK+o7kVgx3sbatM+HEgZo0cnuOlJb389r4ka6RnSdlbaB3OK6dC3CzO48OQ3+yzdNeTT4b2R3uEyOfVvT6fWtWPSBrdhd6dqOvNqUofdAH5CEc5ViTjI4yOOa47RvPvtJmkvbGQ2ce5knZSFBJwVDEY684rtPB/h99dlmFgpt7VoWSScnIDFCowccnpwPSsJuSdkerTlH2abL1uy6lodxLbzyGWFifLjILxoD1APXgdRUK+KJdQWOQRLKU/dvOASA3QfjjvU2qQ32j6ZZajcRNaaqluLe9ixwSDgSAjgjIBz71zFlLPPJJ9jm8ieeTLozBEYdyB0yawlGNOyvY8Rx1OIsdDvtb1waVaxyG8urzbGNnCJyWcn0A5r6o0bQdD0iGODTtOt1aNApm8ob392bGSTjmuN+Fnh8obzXLhNpZmt7fI+YqD8zHI4yeOPSu3gnX7bdxiTgFVPI54yK6m+h2Ju1yzf2sd/CbaVVMLDBUgEflS2FhbWSbYVwe4z/TpTBdD7WlqBhxEZcD0zgf1pt1ctJlIJBGVI3MRSdtxpjtTtdM1awe1v4EuYX/5Zkcn6d/xFcPL4W0vS9ZjuGkzY3EbR+XIAwjccgbsemfyrtbeF5lF7udQ4yEGBlR0yeuD1wMda5/xxNHb6RbGeVoke5AQqM/wMeQc5FK13cVSKav1P/9k=" alt="Akshay Gollahalli" width="40" height="40" class="rounded-circle">
</a>
<ul class="dropdown-menu dropdown-menu-dark dropdown-menu-end">
<li><a class="dropdown-item bg-danger" href="/microsoftidentity/account/signout">Sign out</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
</body>
</html>

problem with integration of bootstrap in mvc 5

I have started a new project in MVC 5 and i have downloaded a bootstrap template. the template works okay as a normal website.. But when I try to integrate it on the .net project it doesn't works. I have attached picture for better understatement.
Normal HTML image.
MVC Project Image
Here is my MVC code in _Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" href="../../Content/img/favicon.png" type="image/png">
<title>Fashiop</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="#Url.Content("../../Content/bootstrap.css")">
<link rel="stylesheet" href="#Url.Content("../../Content/vendors/linericon/style.css")">
<link rel="stylesheet" href="#Url.Content("../../Content/css/font-awesome.min.css")">
<link rel="stylesheet" href="#Url.Content("../../Content/vendors/owl-carousel/owl.carousel.min.css")">
<link rel="stylesheet" href="#Url.Content("../../Content/vendors/lightbox/simpleLightbox.css")">
<link rel="stylesheet" href="#Url.Content("../../Content/vendors/nice-select/css/nice-select.css")">
<link rel="stylesheet" href="#Url.Content("../../Content/vendors/animate-css/animate.css")">
<link rel="stylesheet" href="#Url.Content("../../Content/vendors/jquery-ui/jquery-ui.css")">
<!-- main css -->
<link rel="stylesheet" href="#Url.Content("../../Content/css/style.css")">
<link rel="stylesheet" href="#Url.Content("../../Content/css/responsive.css")">
</head>
<body>
<!--================Header Menu Area =================-->
<header class="header_area">
<div class="top_menu row m0">
<div class="container-fluid">
<div class="float-left">
<p>Call Us: 012 44 5698 7456 896</p>
</div>
<div class="float-right">
<ul class="right_side">
<li>
<a href="login.html">
Login/Register
</a>
</li>
<li>
<a href="#">
My Account
</a>
</li>
<li>
<a href="contact.html">
Contact Us
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="main_menu">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<a class="navbar-brand logo_h" href="index.html">
<img src="img/logo.png" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse offset" id="navbarSupportedContent">
<div class="row w-100">
<div class="col-lg-7 pr-0">
<ul class="nav navbar-nav center_nav pull-right">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item submenu dropdown">
Shop
<ul class="dropdown-menu">
<li class="nav-item">
<a class="nav-link" href="category.html">Shop Category</a>
<li class="nav-item">
<a class="nav-link" href="single-product.html">Product Details</a>
<li class="nav-item">
<a class="nav-link" href="checkout.html">Product Checkout</a>
<li class="nav-item">
<a class="nav-link" href="cart.html">Shopping Cart</a>
</li>
<li class="nav-item">
<a class="nav-link" href="confirmation.html">Confirmation</a>
</li>
</ul>
</li>
<li class="nav-item submenu dropdown">
Blog
<ul class="dropdown-menu">
<li class="nav-item">
<a class="nav-link" href="blog.html">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="single-blog.html">Blog Details</a>
</li>
</ul>
</li>
<li class="nav-item submenu dropdown">
Pages
<ul class="dropdown-menu">
<li class="nav-item">
<a class="nav-link" href="login.html">Login</a>
<li class="nav-item">
<a class="nav-link" href="tracking.html">Tracking</a>
<li class="nav-item">
<a class="nav-link" href="elements.html">Elements</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
<div class="col-lg-5">
<ul class="nav navbar-nav navbar-right right_nav pull-right">
<hr>
<li class="nav-item">
<a href="#" class="icons">
<i class="fa fa-search" aria-hidden="true"></i>
</a>
</li>
<hr>
<li class="nav-item">
<a href="#" class="icons">
<i class="fa fa-user" aria-hidden="true"></i>
</a>
</li>
<hr>
<li class="nav-item">
<a href="#" class="icons">
<i class="fa fa-heart-o" aria-hidden="true"></i>
</a>
</li>
<hr>
<li class="nav-item">
<a href="#" class="icons">
<i class="lnr lnr lnr-cart"></i>
</a>
</li>
<hr>
</ul>
</div>
</div>
</div>
</div>
</nav>
</div>
</header>
<!--================Header Menu Area =================-->
#*<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</div>
</div>
</div>*#
#*<div class="container body-content">*#
#RenderBody()
#*<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>*#
<script src="#Url.Content("../../Scripts/jquery-3.2.1.min.js")"></script>
<script src="#Url.Content("../../Scripts/popper.js")"></script>
<script src="#Url.Content("../../Scripts/bootstrap.min.js")"></script>
<script src="#Url.Content("../../Scripts/stellar.js")"></script>
<script src="#Url.Content("../../Content/vendors/lightbox/simpleLightbox.min.js")"></script>
<script src="#Url.Content("../../Content/vendors/nice-select/js/jquery.nice-select.min.js")"></script>
<script src="#Url.Content("../../Content/vendors/isotope/imagesloaded.pkgd.min.js")"></script>
<script src="#Url.Content("../../Content/vendors/isotope/isotope-min.js")"></script>
<script src="#Url.Content("../../Content/vendors/owl-carousel/owl.carousel.min.js")"></script>
<script src="#Url.Content("../../Scripts/jquery.ajaxchimp.min.js")"></script>
<script src="#Url.Content("../../Content/vendors/counter-up/jquery.waypoints.min.js")"></script>
<script src="#Url.Content("../../Content/vendors/flipclock/timer.js")"></script>
<script src="#Url.Content("../../Content/vendors/counter-up/jquery.counterup.js")"></script>
<script src="#Url.Content("../../Scripts/mail-script.js")"></script>
<script src="#Url.Content("../../Scripts/theme.js")"></script>
</body>
</html>

Calling partial view from _Layout.cshtml

I have a main category and main category has its subcategory list in database. So its a relational database. For better understanding .edmx map picture is attached. Now my goal is a partial view called _GuestNav.cshtml will contain category and subcategory list display then this _GuestNav.cshtml will be called from _Layout.cshtml. So i am calling a partial view from _Layout.cshtml and that partial view contains dynamic data with foreach loop. So i want to know how can i loop properly to display Main Category and sub Category on _GuestNav.cshtml? I have tried my best to give you better understanding however ask me any question you may have.
Controller:
[ChildActionOnly]
public PartialViewResult _GuestNav()
{
using (var db = new MyAppWebEntities())
{
return PartialView("_GuestNav", db.Categories.ToList());
}
}
_Layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
<link href="~/Content/font-awesome.min.css" rel="stylesheet" />
<script src="~/Content/sweetalert.min.js"></script>
<script src='https://www.google.com/recaptcha/api.js'></script>
#RenderSection("scripts", required: false)
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#Url.Action("Index", "Home")">My App <i class="fa fa-refresh" aria-hidden="true"></i></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
#Html.Partial("_GuestNav"); #* here i am calling partial view *#
</div>
</div>
</div>
</nav>
<div class="container body-content">
#RenderBody()
<hr />
#Html.Partial("_Footer")
</div>
</body>
</html>
_GuestNav.cshtml:
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Plans", "Plans", "Home")</li>
#* Example of loop bellow *#
#*#foreach (var allcat in allcats)
{
<li class="dropdown">
#allcat.MainCatName<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
#foreach (var subcat in allcat.subcat)
{
<li>subcat.SubcatName</li>
}
</ul>
</li>
}*#
#* Wanted output like bellow from database---> *#
<li class="dropdown">
Main Cat 1<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Subcat</li>
<li>Subcat</li>
<li>Subcat</li>
<li>Subcat</li>
</ul>
</li>
<li class="dropdown">
Main Cat 2<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Subcat</li>
<li>Subcat</li>
<li>Subcat</li>
<li>Subcat</li>
</ul>
</li>
</ul>
1.Change #Html.Partial("_GuestNav") to #{Html.RenderAction("_GuestNav", "YourControlerName");}
2.Add #Model TypeofYourViewModel on top of your partial view.
3.Change the looping as follows:
#foreach (var item in Model)
{
<li class="dropdown">
#item.MainCatName<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
#foreach (var subcat in item.subcat)
{
<li>subcat.SubcatName</li>
}
</ul>
</li>
}
Note: Change TypeofYourViewModel to whatever ViewModel you are passing into the partial view

How to use resources file in Asp.net MVC layout

I implemented a multi-language website by using resources files in Asp.net MVC.
All works fine, but my problem is in the layout. How I can use dynamic resources in my layout using view-bag?
I need to write something like this somewhere in my layout but I dont know what is the correct way to do this:
#{ var langu = ViewBag.lang;}
#Resources.langu.App_Name;
it has Error of course.
here is my layout page if needed:
<!DOCTYPE html>
<html>
<head>
.....
</head>
<body>
<div class="preloader">
<div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</div>
<!-- Header
============================================ -->
<div class="header">
<div class="container relativesaz">
<div class="row">
<div class="col-sm-12">
<!-- Navbar Header -->
<div class="navbar-header">
<!-- Menu Toggle -->
<button class="menu-toggle"><i class="fa fa-navicon"></i></button>
<!-- Logo -->
<a class="iconvrf logo navbar-brand relativesaz" href="" target="_blank">
<img src="" alt="" />
<span class="fontsmall">
</span>
</a>
</div>
<!-- Menu -->
<div class="menu">
<nav>
<ul>
<li class="active">Home</li>
<li>About</li>
<li>Feature</li>
<li>Description</li>
<li>Screenshot</li>
<li>AW </li>
<li>
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
#ViewBag.ActiveMenu
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<ul>
<li><a class="colorblack" href="#Url.Action("ru", "Home")">Russian</a></li>
<li><a class="colorblack" href="#Url.Action("cn", "Home")">Chinese</a></li>
<li><a class="colorblack" href="#Url.Action("jp", "Home")">Japanese</a></li>
<li><a class="colorblack" href="#Url.Action("nl", "Home")">Dutch</a></li>
<li><a class="colorblack" href="#Url.Action("dk", "Home")">Danish</a></li>
<li><a class="colorblack" href="#Url.Action("de", "Home")">German</a></li>
<li><a class="colorblack" href="#Url.Action("fr", "Home")">French</a></li>
<li><a class="colorblack" href="#Url.Action("en", "Home")">English </a></li>
</ul>
</li>
<li>
<ul>
<li><a class="colorblack" href="#Url.Action("tr", "Home")">Turkish</a></li>
<li><a class="colorblack" href="#Url.Action("th", "Home")">Tahi</a></li>
<li><a class="colorblack" href="#Url.Action("sv", "Home")">Swedish</a></li>
<li><a class="colorblack" href="#Url.Action("pt", "Home")">Portuguese</a></li>
<li><a class="colorblack" href="#Url.Action("no", "Home")">Norwegian</a></li>
<li><a class="colorblack" href="#Url.Action("kr", "Home")">Korean</a></li>
<li><a class="colorblack" href="#Url.Action("es", "Home")">Spanish</a></li>
<li><a class="colorblack" href="#Url.Action("it", "Home")">Italian </a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
#RenderBody()
<script src="~/Scripts/plugins.js"></script>
<script src="~/Scripts/main.js"></script>
</body>
</html>
You can directly use resx without viewbag like this:
Solution
A layout and two resx.
_Layout.cshtml
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">
#if (System.Globalization.CultureInfo.CurrentCulture.ToString() == "fa-IR")
{
#Resource_fa_IR.App_Name
}
else
{
#Resource.App_Name
}
</p>
</div>
</div>
</header>
Resource.Designer.cs and Resource.fa.IR.Designer.cs
public static string App_Name {
get {
return ResourceManager.GetString("App_Name", resourceCulture);
}
}
You should change internal to public in there classes.

Resources