I am using Django and I have bootstrap4 loaded with min.css/js files included in my stylesheet references that are properly linked and yet my mobile toggle menu refuses to toggle when clicked.
My browser source shows that it has loaded these files without any errors so I am assuming I am missing a file that is required to use bootstrap toggle menus in Django.
{% load static %}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Flash Stacks</title>
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'css/bootstrap.min.js' %}">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>
<!--NAVIGATION-->
<header class="main-head">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">EXAMPLE APP</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-nav" aria-controls="main-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!--COLLAPSIBLE CONTENT-->
<div class="collapse navbar-collapse" id="main-nav">
<!--LINKS-->
<ul class="nav navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href='#'>About</a>
</li>
<li class="nav-item">
<a class="nav-link" href='#'>Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href='#'>Products</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="page-header container-fluid">
<h1>Flash Card Stacks</h1>
</div>
</header>
<!--BODY CONTENT -->
<div class="content container-fluid">
{% block content%}
{% endblock %}
</div>
<!--FOOTER CONTENT-->
<div class="footer container-fluid">
<p>This is the footer of the webpage!</p>
</div>
</body>
</html>
first you have to check all html tags and other item;
Related
I'd like to have the flexbox cards view horizontally and vertically on any screen. I've done it like this and successfully figured out how to display the cards horizontally, but when you try viewing it on a mobile device or smaller screen, the cards remain horizontal. I tried using bootstrap card-deck that didn't help. When i used col d-flex justify-content-center, this allowed the cards to resize but they still don't stack vertically. In other instances i have just used card-deck like here and and its worked fine. Please any suggestions.
Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon"type="image/ico" href="/images/favicon/favicon.ico"/>
<meta name="viewport" content="width=device-width initial-scale=1" />
<environment include="Development">
<link href="~/lib/bootstrap//css/bootstrap.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</environment>
<environment exclude="Development">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
crossorigin="anonymous"
asp-fallback-href="~/lib/bootstrap/css/bootstrap.min.css"
asp-fallback-test-class="sr-only"
asp-fallback-test-property="position"
asp-fallback-test-value="absolute"
asp-suppress-fallback-integrity="true" >
</environment>
<link href="~/css/site.css" rel="stylesheet" />
<title>#ViewBag.Title</title>
</head>
<body>
<div class="container">
<nav class="navbar navbar-inverse">
<a class="navbar-brand" asp-action="index" asp-controller="home">
<img src="~/images/employees.png" height="30" width="30" />
</a>
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="navbar-toggler-icon"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="https://digitalconsulting.cc/" target="_blank" >Digital Consulting.cc</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="nav-item">
<a asp-action="index" asp-controller="home" class="nav-link">List</a>
</li>
<li class="nav-item">
<a asp-action="create" asp-controller="home" class="nav-link">Create</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Tools <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Software</li>
<li>Security</li>
<li>Mobile</li>
</ul>
</li>
<li>About Us</li>
</ul>
</div>
</div>
</nav>
<div>
#RenderBody()
</div>
#if (IsSectionDefined("Scripts"))
{
#RenderSection("Scripts", required: true)
}
</div>
</body>
</html>
Index.cshtml
#model IEnumerable<Employee>
#{
ViewBag.Title = "Employee List";
}
<!-- div class="col d-flex justify-content-center"> -->
<div class="card-deck">
#foreach (var employee in Model)
{
<div class="card m-3">
<div class="card-header">
<h3>#employee.Name</h3>
</div>
<img class="card-img-top" src="~/images/noimage.jpg"
asp-append-version="true" />
<div class="card-footer text-center">
<a asp-controller="home" asp-action="details" asp-route-id="#employee.Id"
class="btn btn-primary m-1">View</a>
Edit
Delete
</div>
</div>
}
</div>
Found this code on W3 Schools.
Swap out:
<div class="card-deck">
#foreach (var employee in Model)
{
<div class="card m-3">
With this code:
<div class="row row-cols-1 row-cols-md-3 g-4">
#foreach (var employee in Model)
{
<div class="card h-100">
I have been trying this for the past few hours and it for some reason, my title won't move in the center. Is it because I am using yield or something? Also I tried putting it in the head tag using title tag but nothing happen so I have to use a h3 tag, but it won't let me move center.
I have tried many different method but still doesn't work such as:
#center-text ul{
list-style-type:none;
display:flex;
justify-content: center;
}
padding-right
margin
Here is my code:
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link href="{{ asset('css/title.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#include('layouts.testSidebar')
<!-- Branding Image -->
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
<div id="center-text">
<ul class="nav navbar-nav navbar-center" id="nav-center">
<li>
<h3>#yield('title')</h3>
</li>
</ul>
</div>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
#guest
<li>Login</li>
<li>Register</li>
#else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true" style="background-color:blue" style="color:white">
<b>{{ Auth::user()->name }}</b> <span class="caret"></span>
</a>
<ul class="dropdown-menu" style="background-color: blue">
<li>
<a href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();" style="background-color: blue" style="color: white">
<b>Logout</b>
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
#endguest
</ul>
</div>
</div>
</nav>
#yield('content')
</div>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
On the h3 try using bootstraps built in class of text-center
Example:
<h3 class="text-center">#yield('title')</h3>
https://getbootstrap.com/docs/3.3/css/#type-alignment
I am trying make my navbar color blue but for some reason, there is this 2 parts which are white and when I try to use background: lightblue; I want to make them complete blue but for some reason it doesn't work. (see screenshot) Can anyone help me? Thanks in advance
Below is a screenshot of what happen:
This is where the navbar(app.blade.php) is:
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<html>
<head>
<title>SideBar Menu</title>
<link href="{{ asset('css/style.css') }}" rel="stylesheet">
</head>
<body>
<div id="sidebar">
<ul>
<li>Home</li>
<li>Deleted Records</li>
</ul>
<div id="sidebar-btn">
<span></span>
<span></span>
<span></span>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#sidebar-btn').click(function(){
$('#sidebar').toggleClass('visible');
});
});
</script>
</body>
</html>
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
#guest
<li>Login</li>
<li>Register</li>
#else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true">
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
<a href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Logout
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
#endguest
</ul>
</div>
</div>
</nav>
#yield('content')
</div>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
This is the style.css that I used
#navbar-toggle collapsed{
background:#ADD8E6;
}
#navbar-header{
background:#ADD8E6;
}
Instead of style #navbar-header add css in your .navbar
.navbar {
background:#ADD8E6;
}
Change #navbar-header by .navbar, and if it still not working, add !important clause on .navbar class
.navbar {
background-color: blue; !important;
}
I just can't figure out why my dropdown button is not working. I can't see any errors in the console, I have tried with calling css files in the head element and at the end of the body, that hasn't changed anything. This is my navigation menu with a dropdown button in it:
<!-- Navigation -->
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand page-scroll" href="#page-top">SLEEKER</a>
</div>
<!-- Theme option content -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<i class="fa fa-pencil" aria-hidden="true"></i>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a ng-click="changeTheme(1)">Flatly</a></li>
<li><a ng-click="changeTheme(2)">United</a></li>
<li><a ng-click="changeTheme(3)">Cerulean</a></li>
</ul>
</div>
</li>
</ul>
</div>
<!-- Theme option content -->
</div>
<!-- Container -->
</nav>
And I have included all the files needed at the bottom:
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="css/bootstrap.{{theme}}.css" />
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<link rel="stylesheet" href="css/spinner.css" />
<link rel="stylesheet" href="css/animate.css" />
<link rel="stylesheet" type="text/css" href="css/app.css" />
<!-- scripts -->
<script src="http://code.jquery.com/jquery.min.js"></script>
<!-- load angular libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-messages.min.js"></script>
<!-- APP scripts -->
<script src="app/hotels/hotels.js"></script>
Because you are missing the bootstrap.js
take a look with your nav
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<!-- Navigation -->
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand page-scroll" href="#page-top">SLEEKER</a>
</div>
<!-- Theme option content -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<i class="fa fa-pencil" aria-hidden="true"></i>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a ng-click="changeTheme(1)">Flatly</a>
</li>
<li><a ng-click="changeTheme(2)">United</a>
</li>
<li><a ng-click="changeTheme(3)">Cerulean</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
<!-- Theme option content -->
</div>
<!-- Container -->
</nav>
I have a metisMenu in my ASP.Net MVC app, what I am looking to do is hide some options based on the users AD Group membership.
The app is currently using windows integrated authentication (Intranet Application).
What is the best way to do this?
I am presuming I could do a viewbag option which then if true or flase either shows or hides, but that would mean I would have to code something for every action?
The menu is part of the shared layout which is below
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CCL Support System</title>
<link rel="shortcut icon" type="image/png" href="~/img/favicon.png" />
#*CSS Declerations*#
<link href="~/Content/bootstrap.min.css" rel="stylesheet">
<link href="~/Content/plugins/metisMenu/metisMenu.min.css" rel="stylesheet">
<link href="~/Content/ccl.less" rel="stylesheet" type="text/css">
<link href="~/Content/font-awesome.min.css" rel="stylesheet">
<link href="~/Content/themify-icons.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,800' rel='stylesheet' type='text/css'>
#*JavaScript Declerations*#
<script src="~/Scripts/less.min.js" type="text/javascript"></script>
<script src="~/scripts/jquery-2.1.1.js" type="text/javascript"></script>
<script src="~/scripts/bootstrap.min.js" type="text/javascript"></script>
<script src="~/scripts/plugins/metisMenu/metisMenu.min.js" type="text/javascript"></script>
<script src="~/scripts/sb-admin-2.js" type="text/javascript"></script>
<script src="~/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="~/Scripts/expand.js" type="text/javascript"></script>
</head>
<body class="ccl-body">
<div id="wrapper">
<nav class="navbar navbar-default navbar-fixed-top ccl-header" role="navigation">
<div>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown navbar-profile">
<a style="z-index: 1" href="#" class="dropdown-toggle navbar-profile-icon" data-toggle="dropdown"><span class="ti-settings menu-icon"></span><span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li>Edit User Details</li>
</ul>
</li>
</ul>
</div>
<div class="logo-box">
<button type="button" class="navbar-toggle" 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="ccl-logo" href="#Url.Action("index", "Home" )"><img src="~/img/logo.png" width="75" height="73" alt="" /></a>
</div>
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
<span class=" ti-info menu-icon"></span>Information<span class="ti-angle-right menu-carret pull-right"></span>
<ul class="nav nav-second-level">
<li>
About
</li>
<li>
Licenses
</li>
<li>
Bug Report
</li>
</ul>
</li>
<li>
<span class=" ti-key menu-icon"></span>Reset Passsword
</li>
</ul>
</div>
</div>
</nav>
<!-- Main Panel -->
<div id="page-wrapper" class="content">
#if (IsSectionDefined("title"))
{
<div id="page-block" class="page-block-header row">
<div class="col-lg-offset-1 col-lg-10">
#RenderSection("title", false)
</div>
</div>
}
#if (IsSectionDefined("subtitle"))
{
<div id="page-block" class="page-block-two row">
<div class="col-lg-offset-1 col-lg-10">
#RenderSection("subtitle", false)
</div>
</div>
}
#RenderBody()
</div>
</div>
<!-- Footer -->
<div class="navbar ccl-footer">
<div class="pull-right">
<p>© 2014 Computer Concepts Ltd</p>
</div>
</div>
</body>
</html>
If we look at the menu more closely (snippet below)
div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
<span class=" ti-info menu-icon"></span>Information<span class="ti-angle-right menu-carret pull-right"></span>
<ul class="nav nav-second-level">
<li>
About
</li>
<li>
Licenses
</li>
<li>
Bug Report
</li>
</ul>
</li>
<li>
<span class=" ti-key menu-icon"></span>Reset Passsword
</li>
</ul>
</div>
</div>
I am looking to hide certain options within this
What would be the best way, would I need to create a custom authentication class?? if so does anyone have any good links on how to do this?
So the end result would be if user is in XYZ AD Group then show
<li>
<span class=" ti-key menu-icon"></span>Reset Passsword
</li>
Otherwise hide it.
You can use MvcSiteMapProvider's security trimming feature to do this in a few steps.
Configure the AuthorizeAttribute on your action methods (which supports roles/users/AD/forms authentication).
Install MvcSiteMapProvider via NuGet.
Create an hierarchy of your site in the Mvc.sitemap XML file and/or using .NET attributes and/or using dynamic node providers.
Add the #Html.MvcSiteMap().Menu() HTML helper to your layout page (or create your own Menu HTML helper that has similar functionality if it doesn't suit your needs).
Customize the templates in the /Views/Shared/DisplayTemplates/ folder to conform to your page layout.
Documentation Wiki: https://github.com/maartenba/MvcSiteMapProvider/wiki
Blog with Downloadable Demos: http://www.shiningtreasures.com/?tag=/MvcSiteMapProvider
MvcSiteMapProvider Questions on SO: https://stackoverflow.com/questions/tagged/mvcsitemapprovider
Full Disclosure: I am a major project contributor of MvcSiteMapProvider.
If you don't want to add a 3rd party library, this will take a bit of work to do. You would have to create your own HTML helpers that respond to the authorize attribute (or something similar). You could cannibalize the AuthorizeAttributeAclModule to determine whether to show or hide your HTML helper nodes.