I am creating a new Blazor web assembly pwa app. I have bought a theme from themeforest and trying to integrate it in my Blazor web assembly app. I am using visual studio and .net core 3.1.202. I was able to get the layout UI to work but my side navigation is not working. I am unable to collapse or expand any menu option or even clicking on the hamburger icon doesn't work. I couldn't figure out what I have missed. There are no errors in the console window of the browser. Hence, I request help in this matter. Thanks in advance.
This is what my index.razor page looks like:
This is my wwwroot folder:
Screenshot of console window:
This is my index.html
<!DOCTYPE html>
<html class="fixed sidebar-light" data-style-switcher-options="{'sidebarColor': 'light'}">
<head>
<!-- Basic -->
<meta charset="UTF-8">
<title>Light Sidebar Layout | Porto Admin - Responsive HTML5 Template</title>
<meta name="keywords" content="HTML5 Admin Template" />
<meta name="description" content="Porto Admin - Responsive HTML5 Template">
<meta name="author" content="okler.net">
<!-- Mobile Metas -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!-- Web Fonts -->
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800|Shadows+Into+Light" rel="stylesheet" type="text/css">
<!-- Vendor CSS -->
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="vendor/animate/animate.compat.css">
<link rel="stylesheet" href="vendor/font-awesome/css/all.min.css" />
<link rel="stylesheet" href="vendor/boxicons/css/boxicons.min.css" />
<link rel="stylesheet" href="vendor/magnific-popup/magnific-popup.css" />
<link rel="stylesheet" href="vendor/bootstrap-datepicker/css/bootstrap-datepicker3.css" />
<!-- Specific Page Vendor CSS -->
<link rel="stylesheet" href="vendor/jquery-ui/jquery-ui.css" />
<link rel="stylesheet" href="vendor/jquery-ui/jquery-ui.theme.css" />
<link rel="stylesheet" href="vendor/bootstrap-multiselect/css/bootstrap-multiselect.css" />
<link rel="stylesheet" href="vendor/morris/morris.css" />
<!--(remove-empty-lines-end)-->
<!-- Theme CSS -->
<link rel="stylesheet" href="css/theme.css" />
<!--(remove-empty-lines-end)-->
<!-- Theme Custom CSS -->
<link rel="stylesheet" href="css/custom.css">
<!-- Head Libs -->
<!--<script src="vendor/modernizr/modernizr.js"></script>-->
<!--<script src="master/style-switcher/style.switcher.localstorage.js"></script>-->
<link href="css/app.css" rel="stylesheet" />
<link href="manifest.json" rel="manifest" />
</head>
<body>
<app>Loading...</app>
<div id="blazor-error-ui">
An unhandled error has occurred.
Reload
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.webassembly.js"></script>
<script>navigator.serviceWorker.register('service-worker.js');</script>
<!-- Head Libs -->
<script src="vendor/modernizr/modernizr.js"></script>
<!-- Vendor -->
<script src="vendor/jquery/jquery.js"></script>
<script src="vendor/jquery-browser-mobile/jquery.browser.mobile.js"></script>
<script src="vendor/jquery-cookie/jquery.cookie.js"></script>
<!--<script src="master/style-switcher/style.switcher.js"></script>-->
<script src="vendor/popper/umd/popper.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.js"></script>
<script src="vendor/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script src="vendor/common/common.js"></script>
<script src="vendor/nanoscroller/nanoscroller.js"></script>
<script src="vendor/magnific-popup/jquery.magnific-popup.js"></script>
<script src="vendor/jquery-placeholder/jquery.placeholder.js"></script>
<!-- Specific Page Vendor -->
<script src="vendor/jquery-ui/jquery-ui.js"></script>
<script src="vendor/jqueryui-touch-punch/jquery.ui.touch-punch.js"></script>
<script src="vendor/jquery-appear/jquery.appear.js"></script>
<script src="vendor/bootstrap-multiselect/js/bootstrap-multiselect.js"></script>
<script src="vendor/jquery.easy-pie-chart/jquery.easypiechart.js"></script>
<script src="vendor/flot/jquery.flot.js"></script>
<script src="vendor/flot.tooltip/jquery.flot.tooltip.js"></script>
<script src="vendor/flot/jquery.flot.pie.js"></script>
<script src="vendor/flot/jquery.flot.categories.js"></script>
<script src="vendor/flot/jquery.flot.resize.js"></script>
<script src="vendor/jquery-sparkline/jquery.sparkline.js"></script>
<script src="vendor/raphael/raphael.js"></script>
<script src="vendor/morris/morris.js"></script>
<script src="vendor/gauge/gauge.js"></script>
<script src="vendor/snap.svg/snap.svg.js"></script>
<script src="vendor/liquid-meter/liquid.meter.js"></script>
<script src="vendor/jqvmap/jquery.vmap.js"></script>
<script src="vendor/jqvmap/data/jquery.vmap.sampledata.js"></script>
<script src="vendor/jqvmap/maps/jquery.vmap.world.js"></script>
<script src="vendor/jqvmap/maps/continents/jquery.vmap.africa.js"></script>
<script src="vendor/jqvmap/maps/continents/jquery.vmap.asia.js"></script>
<script src="vendor/jqvmap/maps/continents/jquery.vmap.australia.js"></script>
<script src="vendor/jqvmap/maps/continents/jquery.vmap.europe.js"></script>
<script src="vendor/jqvmap/maps/continents/jquery.vmap.north-america.js"></script>
<script src="vendor/jqvmap/maps/continents/jquery.vmap.south-america.js"></script>
<!--(remove-empty-lines-end)-->
<!-- Theme Base, Components and Settings -->
<script src="js/theme.js"></script>
<!-- Theme Custom -->
<script src="js/custom.js"></script>
<!-- Theme Initialization Files -->
<script src="js/theme.init.js"></script>
<!-- Analytics to Track Preview Website -->
<script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date(); a = s.createElement(o),
m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-42715764-8', 'auto');
ga('send', 'pageview');
</script>
<script>
// Maintain Scroll Position
if (typeof localStorage !== 'undefined') {
if (localStorage.getItem('sidebar-left-position') !== null) {
var initialPosition = localStorage.getItem('sidebar-left-position'),
sidebarLeft = document.querySelector('#sidebar-left .nano-content');
sidebarLeft.scrollTop = initialPosition;
}
}
</script>
<!-- Examples -->
<script src="js/examples/examples.dashboard.js"></script>
</body>
</html>
My MainLayout.razor
#inherits LayoutComponentBase
<section class="body">
<!-- start: header -->
<header class="header">
<div class="logo-container">
<a href="/" class="logo">
<img src="img/logo.png" width="75" height="35" alt="Porto Admin" />
</a>
<div class="d-md-none toggle-sidebar-left" data-toggle-class="sidebar-left-opened" data-target="html" data-fire-event="sidebar-left-opened">
<i class="fas fa-bars" aria-label="Toggle sidebar"></i>
</div>
</div>
<!-- start: search & user box -->
<div class="header-right">
<span class="separator"></span>
<div id="userbox" class="userbox">
<a href="#" data-toggle="dropdown">
<figure class="profile-picture">
<img src="img/!logged-user.jpg" alt="Joseph Doe" class="rounded-circle" data-lock-picture="img/!logged-user.jpg" />
</figure>
<div class="profile-info" data-lock-name="John Doe" data-lock-email="johndoe#okler.com">
<span class="name">John Doe Junior</span>
<span class="role">Administrator</span>
</div>
<i class="fa custom-caret"></i>
</a>
<div class="dropdown-menu">
<ul class="list-unstyled mb-2">
<li class="divider"></li>
<li>
<a role="menuitem" tabindex="-1" href="pages-user-profile.html"><i class="bx bx-user-circle"></i> My Profile</a>
</li>
<li>
<a role="menuitem" tabindex="-1" href="#" data-lock-screen="true"><i class="bx bx-lock"></i> Lock Screen</a>
</li>
<li>
<a role="menuitem" tabindex="-1" href="pages-signin.html"><i class="bx bx-power-off"></i> Logout</a>
</li>
</ul>
</div>
</div>
</div>
<!-- end: search & user box -->
</header>
<!-- end: header -->
<div class="inner-wrapper">
<NavMenu />
<section role="main" class="content-body">
<header class="page-header">
<h2>Light Sidebar Layout</h2>
<div class="right-wrapper text-right">
<ol class="breadcrumbs">
<li>
<a href="index.html">
<i class="bx bx-home-alt"></i>
</a>
</li>
<li><span>Layouts</span></li>
<li><span>Light Sidebar</span></li>
</ol>
<a class="sidebar-right-toggle disabled"><i class="fas fa-chevron-left"></i></a>
</div>
</header>
<!-- start: page -->
#Body
</section>
</div>
</section>
My NavMenu.razor
<!-- start: sidebar -->
<aside id="sidebar-left" class="sidebar-left">
<div class="sidebar-header">
<div class="sidebar-title">
Navigation
</div>
<div class="sidebar-toggle d-none d-md-block" data-toggle-class="sidebar-left-collapsed" data-target="html" data-fire-event="sidebar-left-toggle">
<i class="fas fa-bars" aria-label="Toggle sidebar"></i>
</div>
</div>
<div class="nano">
<div class="nano-content">
<nav id="menu" class="nav-main" role="navigation">
<ul class="nav nav-main">
<li>
<a class="nav-link" href="layouts-default.html">
<i class="bx bx-home-alt" aria-hidden="true"></i>
<span>Dashboard</span>
</a>
</li>
<li class="nav-parent">
<a class="nav-link" href="#">
<i class="bx bx-cart-alt" aria-hidden="true"></i>
<span>eCommerce</span>
</a>
<ul class="nav nav-children">
<li>
<a class="nav-link" href="ecommerce-dashboard.html">
Dashboard
</a>
</li>
<li>
<a class="nav-link" href="ecommerce-products-list.html">
Products List
</a>
</li>
<li>
<a class="nav-link" href="ecommerce-products-form.html">
Products Form
</a>
</li>
<li>
<a class="nav-link" href="ecommerce-category-list.html">
Categories List
</a>
</li>
<li>
<a class="nav-link" href="ecommerce-category-form.html">
Category Form
</a>
</li>
<li>
<a class="nav-link" href="ecommerce-coupons-list.html">
Coupons List
</a>
</li>
<li>
<a class="nav-link" href="ecommerce-coupons-form.html">
Coupons Form
</a>
</li>
<li>
<a class="nav-link" href="ecommerce-orders-list.html">
Orders List
</a>
</li>
<li>
<a class="nav-link" href="ecommerce-orders-detail.html">
Orders Detail
</a>
</li>
<li>
<a class="nav-link" href="ecommerce-customers-list.html">
Customers List
</a>
</li>
<li>
<a class="nav-link" href="ecommerce-customers-form.html">
Customers Form
</a>
</li>
</ul>
</li>
<li>
<a class="nav-link" href="mailbox-folder.html">
<span class="float-right badge badge-primary">182</span>
<i class="bx bx-envelope" aria-hidden="true"></i>
<span>Mailbox</span>
</a>
</li>
<li class="nav-parent nav-expanded nav-active">
<a class="nav-link" href="#">
<i class="bx bx-layout" aria-hidden="true"></i>
<span>Layouts</span>
</a>
<ul class="nav nav-children">
<li>
<a class="nav-link" href="index.html">
Landing Page
</a>
</li>
<li>
<a class="nav-link" href="layouts-default.html">
Default
</a>
</li>
<li>
<a class="nav-link" href="layouts-modern.html">
Modern
</a>
</li>
<li class="nav-parent">
<a>
Boxed
</a>
<ul class="nav nav-children">
<li>
<a class="nav-link" href="layouts-boxed.html">
Static Header
</a>
</li>
<li>
<a class="nav-link" href="layouts-boxed-fixed-header.html">
Fixed Header
</a>
</li>
</ul>
</li>
<li class="nav-parent">
<a>
Horizontal Menu Header
</a>
<ul class="nav nav-children">
<li>
<a class="nav-link" href="layouts-header-menu.html">
Pills
</a>
</li>
<li>
<a class="nav-link" href="layouts-header-menu-stripe.html">
Stripe
</a>
</li>
<li>
<a class="nav-link" href="layouts-header-menu-top-line.html">
Top Line
</a>
</li>
</ul>
</li>
<li>
<a class="nav-link" href="layouts-dark.html">
Dark
</a>
</li>
<li>
<a class="nav-link" href="layouts-dark-header.html">
Dark Header
</a>
</li>
<li>
<a class="nav-link" href="layouts-two-navigations.html">
Two Navigations
</a>
</li>
<li class="nav-parent">
<a>
Tab Navigation
</a>
<ul class="nav nav-children">
<li>
<a class="nav-link" href="layouts-tab-navigation-dark.html">
Tab Navigation Dark
</a>
</li>
<li>
<a class="nav-link" href="layouts-tab-navigation.html">
Tab Navigation Light
</a>
</li>
<li>
<a class="nav-link" href="layouts-tab-navigation-boxed.html">
Tab Navigation Boxed
</a>
</li>
</ul>
</li>
<li class="nav-active">
<a class="nav-link" href="layouts-light-sidebar.html">
Light Sidebar
</a>
</li>
<li>
<a class="nav-link" href="layouts-left-sidebar-collapsed.html">
Left Sidebar Collapsed
</a>
</li>
<li>
<a class="nav-link" href="layouts-left-sidebar-scroll.html">
Left Sidebar Scroll
</a>
</li>
<li class="nav-parent">
<a>
Left Sidebar Big Icons
</a>
<ul class="nav nav-children">
<li>
<a class="nav-link" href="layouts-left-sidebar-big-icons.html">
Left Sidebar Big Icons Dark
</a>
</li>
<li>
<a class="nav-link" href="layouts-left-sidebar-big-icons-light.html">
Left Sidebar Big Icons Light
</a>
</li>
</ul>
</li>
<li class="nav-parent">
<a>
Left Sidebar Panel
</a>
<ul class="nav nav-children">
<li>
<a class="nav-link" href="layouts-left-sidebar-panel.html">
Left Sidebar Panel Dark
</a>
</li>
<li>
<a class="nav-link" href="layouts-left-sidebar-panel-light.html">
Left Sidebar Panel Light
</a>
</li>
</ul>
</li>
<li>
<a class="nav-link" href="layouts-square-borders.html">
Square Borders
</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</aside>
<!-- end: sidebar -->
I had the same issue with a theme from themeforest. The problem was, that all event handlers defined in theme js file are not fired by the frontend.
My solution was to find out what css things changes for an event (for example collapse menu) and to write a java script function that does that DOM maniupulation. Then I'm using JS Interopt from Blazor to call that function. Basically I rewrite all needed JS handlers by hand and call it by for example #onclick handlers in razor components.
A lot of work to do, but it works.
UPDATE:
Most of my theme components are triggered by a DOMContentLoaded event, so a simple manual call of this event is enough. I created following JS function in my custom.js file
function triggerThemeJS() {
window.document.dispatchEvent(new Event("DOMContentLoaded", {
bubbles: true,
cancelable: true
}));
}
and call this with JS Interopt from Blazor Razor page (for example MainLayout):
#inject IJSRuntime javaScript
...
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if(firstRender)
{
await javaScript.InvokeVoidAsync("triggerThemeJS");
}
}
Related
As a relative newbee to Bootstrap I have been trying to code a menu with dropdowns. Code is listed below, but I find some issues:
The menu code was copied from GetBootstrap.com docs. Looked at other sites to see where the problem may be, tried alternatives but no luck.
bootstrap.min.css and bootstrap.bundle.min.js, both version 5, have been linked in to the code. Have tried these files directly on site and via links. Also tried popper.js plus bootstrap.min.js; same result.
Direct links do work, but the dropdown part does not. Clicking on the dropdown item produces nothing. It would be great if it would show on hover and stay in place so that sub-items can be clicked.
The menu should be on the righthand side of the screen; looking at answers, ms-auto should do this. It does not.
When the screen is collapsed to tablet or phone size, the menu goes to the expected compressed symbol, but does not function at all; it will not show anything when clicked.
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e6e6e6;">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="img/text835.png" width="160" height="48" alt="">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarResponsive" aria-controls="navbarResponsive"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item" dropdown>
<a class="nav-link dropdown-toggle" href="#"
id="navbarConsultants" role="button" data-bs-toggle="dropdown"
aria-expanded="false">Consultants</a>
<ul class="dropdown-menu" aria-labelledby="navbarConsultants">
<li><a class="dropdown-item" href="#">Consultants</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="#">Andy</a></li>
<li><a class="dropdown-item" href="#">Bill</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
dropdown should be a class .. not an attribute:
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e6e6e6;">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="//via.placeholder.com/160x48" width="160" height="48" alt="">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarResponsive" aria-controls="navbarResponsive"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#"
id="navbarConsultants" role="button" data-bs-toggle="dropdown"
aria-expanded="false">Consultants</a>
<ul class="dropdown-menu" aria-labelledby="navbarConsultants">
<li><a class="dropdown-item" href="#">Consultants</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="#">Andy</a></li>
<li><a class="dropdown-item" href="#">Bill</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
Everything works as expected
Using CDN to integrate Bootstrap 5.0.0-beta3 resources, following should work.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<title>Custom Navbar with <strong>Bootstrap 5.0.0-beta3</strong></title>
</head>
<body>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.1/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>
-->
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e6e6e6;">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="img/text835.png" width="160" height="48" alt="">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarResponsive" aria-controls="navbarResponsive"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#"
id="navbarConsultants" role="button" data-bs-toggle="dropdown"
aria-expanded="false">Consultants</a>
<ul class="dropdown-menu" aria-labelledby="navbarConsultants">
<li><a class="dropdown-item" href="#">Consultants</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="#">Andy</a></li>
<li><a class="dropdown-item" href="#">Bill</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</body>
</html>
I hope, this will help you out!
Feel free to Upvote the answer
Thank you both to Manifest Man and Zim. I was using an earlier version of bootstrap 5 and when the latest version of bootstrap.min.css and bootstrap.bundle.min.js were used it started to work.
In addition, yes, dropdown is a class, not an attribute.
I'm currently making a website using bootstrap 4 and CodeIgniter as backend. But the navigation bar went weird for some reason.
enter image description here (I still don't have enough point to post picture)
There's no navbar color and not to mention, the list is vertical, not horizontal.
This is my code:
<html>
<head>
<title>Code Igniter Blog</title>
<link rel="stylesheet" href="https://bootswatch.com/4/flatly/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="<?php echo base_url(); ?>">CI Blog</a>
</div>
<div id="navbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
</ul>
</div>
</div>
</nav>
Edit:
I was following a CodeIgniter tutorial by Traversy Media on youtube. I have followed all the steps, except the navbar went weird.
https://www.youtube.com/watch?v=I752ofYu7ag
just go to this link https://bootswatch.com/flatly/
copy source code from this link
Here Your Solution:-
<html>
<head>
<title>Code Igniter Blog</title>
<link rel="stylesheet" href="https://bootswatch.com/4/flatly/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" ></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="<?php echo base_url(); ?>">CI Blog</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor02">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="<?php echo base_url(); ?>">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo base_url(); ?>/about">About</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
am new to laravel...this is the first project that I am doing...while following a tutorial, I was trying to put Navbar from bootstrap and put the following code into my header.blade page...
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</head>
<body>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<script
src="http://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
</html>
But while checking in the browser it looks like the following... Could not actually figure out whether any new library of bootstrap to be added in the header or not...
I think You have an conflict in placing your bootstrap asset in html. just add this bootstrap assets inside element
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
in your codes just Look at this.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
</html>
I have the following html that works beautifully. The drawer works as expected.
<html>
<head>
<style>
html {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.mobile.all.min.css" />
<script src="//kendo.cdn.telerik.com/2016.1.112/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
</head>
<body>
<div data-role="view" id="drawer-content" data-layout="drawer-layout" data-title="Content" data-use-native-scrolling="true">
Welcome to the Jungle
</div>
<div data-role="drawer" id="my-drawer" style="width: 20em" data-views="['drawer-content', 'views/inbox.html', 'views/starred.html', 'views/deleted.html', 'views/drafts.html', 'views/sentItems.html']" data-use-native-scrolling="true">
<header data-role="header">
<div data-role="navbar">
<a data-align="left" data-role="button" class="nav-button" data-icon="contacts"></a>
<span data-role="view-title">My Mail</span>
<a data-align="right" data-role="button" class="nav-button" data-icon="settings"></a>
</div>
</header>
<ul data-role="listview" class="km-listview-icons">
<li data-icon="source-code">Dashboard </li>
<li data-icon="downloads">Inbox <span class="km-badge">6</span></li>
<li data-icon="favorites">Starred Items <span class="km-badge">5</span></li>
<li data-icon="edit">Drafts <span class="km-badge">8</span></li>
<li data-icon="reply">Sent Items</li>
<li data-icon="trash">Deleted Items</li>
</ul>
<ul data-role="listview" data-type="group" class="km-listview-icons">
<li>
Setup
<ul>
<li data-icon="favorites">Penns</li>
<li data-icon="favorites">Animal Types</li>
<li data-icon="favorites">Feeding Types</li>
<li data-icon="favorites">Treatment Types</li>
</ul>
</li>
<li>
Account
<ul>
<li data-icon="settings">Settings</li>
<li data-icon="action">Log Out</li>
</ul>
</li>
</ul>
</div>
<div data-role="layout" data-id="drawer-layout">
<header data-role="header">
<div data-role="navbar">
<a data-role="button" data-rel="drawer" href="#my-drawer" data-icon="drawer-icon" data-align="left"></a>
<span data-role="view-title"></span>
<a data-align="right" data-icon="source-code" data-click="goToSourceCode" data-role="button" title="Show this demo source code"></a>
<a data-align="right" data-role="button" class="nav-button" data-icon="home" href="#/"></a>
</div>
</header>
</div>
<script>
var app = new kendo.mobile.Application(document.body, { skin: "nova" });
</script>
</body>
</html>
I'm now trying to convert it to an Angular app, using Kendo mobile directives:
<html>
<head>
<style>
html {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.mobile.all.min.css" />
<script src="//kendo.cdn.telerik.com/2016.1.112/js/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
</head>
<body kendo-mobile-application k-skin="nova" ng-app="cattleApp">
<kendo-mobile-view id="drawer-content" k-layout="'drawer-layout'" k-title="Content" k-use-native-scrolling="true">
Welcome to the Jungle
</kendo-mobile-view>
<kendo-mobile-drawer id="my-drawer" style="width: 20em" k-views="['drawer-content', 'views/inbox.html', 'views/starred.html', 'views/deleted.html', 'views/drafts.html', 'views/sentItems.html']" k-use-native-scrolling="true">
<kendo-mobile-header>
<div data-role="navbar">
<a data-align="left" data-role="button" class="nav-button" data-icon="contacts"></a>
<span data-role="view-title">My Mail</span>
<a data-align="right" data-role="button" class="nav-button" data-icon="settings"></a>
</div>
</kendo-mobile-header>
<ul data-role="listview" class="km-listview-icons">
<li data-icon="source-code">Dashboard </li>
<li data-icon="downloads">Inbox <span class="km-badge">6</span></li>
<li data-icon="favorites">Starred Items <span class="km-badge">5</span></li>
<li data-icon="edit">Drafts <span class="km-badge">8</span></li>
<li data-icon="reply">Sent Items</li>
<li data-icon="trash">Deleted Items</li>
</ul>
<ul data-role="listview" data-type="group" class="km-listview-icons">
<li>
Setup
<ul>
<li data-icon="favorites">Penns</li>
<li data-icon="favorites">Animal Types</li>
<li data-icon="favorites">Feeding Types</li>
<li data-icon="favorites">Treatment Types</li>
</ul>
</li>
<li>
Account
<ul>
<li data-icon="settings">Settings</li>
<li data-icon="action">Log Out</li>
</ul>
</li>
</ul>
</kendo-mobile-drawer>
<kendo-mobile-layout k-id="'drawer-layout'">
<kendo-mobile-header>
<kendo-mobile-nav-bar>
<kendo-mobile-button k-rel="'drawer'" href="#my-drawer" k-icon="drawer-icon" k-align="left"></kendo-mobile-button>
<kendo-view-title></kendo-view-title>
</kendo-mobile-nav-bar>
</kendo-mobile-header>
</kendo-mobile-layout>
<script>
angular.module('cattleApp', ['kendo.directives']);
</script>
</body>
</html>
I get no errors at runtime (in the browser dev tools), but it shows up as a blank page in my browser, and I have NO idea why.
Please advise what I am missing?
I noticed you need to put "http:" before your references. When I tried your code with "http:" it worked much better.
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.mobile.all.min.css" />
<script src="http://kendo.cdn.telerik.com/2016.1.112/js/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
Also, I noticed that the following reference did not work right:
<script src="http://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
However, when I plugged in the reference from the Telerik demo documentation it worked much better:
<script src="http://kendo.cdn.telerik.com/2014.3.1029/js/kendo.all.min.js"></script>
In your mobile drawer use "kendo-mobile-list-view" such as:
<kendo-mobile-list-view class="km-listview-icons">
<li data-icon="source-code">Dashboard </li>
<li data-icon="downloads">Inbox <span class="km-badge">6</span></li>
<li data-icon="favorites">Starred Items <span class="km-badge">5</span></li>
<li data-icon="edit">Drafts <span class="km-badge">8</span></li>
<li data-icon="reply">Sent Items</li>
<li data-icon="trash">Deleted Items</li>
</kendo-mobile-list-view>
instead of
<ul data-role="listview" class="km-listview-icons">
I use angular-ui-router for routing pages. The problem is like the title of this. The first ui-view displays the page normally. the second ui-view display
the first loaded page and unchanged. I don't want to display second one.
'use strict';
angular.module('test').config(['$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
// For unmatched routes
$urlRouterProvider.otherwise('/');
// Application routes
$stateProvider
.state('index', {
url: '/',
templateUrl: 'templates/dashboard.html'
})
<html lang="en" ng-app="RedCA">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>RedCA Admin</title>
<link rel="stylesheet" href="css/main.min.css" />
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-animate.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-cookies.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-loader.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-sanitize.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-touch.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-resource.js"></script>
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css" rel="stylesheet">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script type="text/javascript" src="components/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="components/ng-table/dist/ng-table.min.js"></script>
<script type="text/javascript" src="components/bootstrap-3.0.3/js/bootstrap.min.js"></script>
<!-- <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> -->
<script src="http://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=false"></script>
<!-- Ace settings handler -->
<script type="text/javascript" src="components/ace.min/js/ace-extra.min.js"></script>
<!-- Ace Script -->
<script src="components/ace.min/js/ace-elements.min.js"></script>
<script src="components/ace.min/js/ace.min.js"></script>
<!-- Ace Styles -->
<!-- <link rel="stylesheet" type="text/css" href="components/ace.min/css/ace-fonts.css"/>
<link rel="stylesheet" type="text/css" href="components/ace.min/css/ace.min.css"/>
<link rel="stylesheet" type="text/css" href="components/ace.min/css/ace-rtl.min.css"/>
<link rel="stylesheet" type="text/css" href="components/ace.min/css/ace-skins.min.css"/> -->
<script type="text/javascript" src="components/angular-1.2.5/angular.min.js"></script>
<script type="text/javascript" src="components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="components/angular-cookies/angular-cookies.min.js"></script>
<script type="text/javascript" src="components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script type="text/javascript" src="js/routingConfig-thirdparty.js"></script> <!-- app controller side -->
<script type="text/javascript" src="js/st-openpms.concat.js"></script> <!-- app controller side -->
<script type="text/javascript" src="js/dashboard.min.js"></script> <!-- rdash augular ui -->
<script type="text/javascript" src="openpms-st-test.templates.js"></script> <!-- openpms st -->
</head>
<body ng-controller="redcaCtrl">
<div id="page-wrapper" ng-class="{'open': toggle}" ng-cloak>
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar">
<li class="sidebar-main">
<a ng-click="toggleSidebar()">
Dashboard
<span class="menu-icon glyphicon glyphicon-transfer"></span>
</a>
</li>
<li class="sidebar-title"><span>NAVIGATION</span></li>
<li class="sidebar-list">
Dashboard <span class="menu-icon fa fa-tachometer"></span>
</li>
<li class="sidebar-list">
Tables <span class="menu-icon fa fa-table"></span>
</li>
<!-- <li class="sidebar-list">
Test <span class="menu-icon fa fa-tachometer"></span>
</li> -->
<li class="sidebar-title"><span>Demonstration</span></li>
<li data-access-level="accessLevels.admin" active-nav>Demo Page</li>
<!-- ///smart town
{{DOC_BASE}} -> # -->
<li class="sidebar-title"><span>SmartTown Sample</span></li>
<br>
<li data-access-level="accessLevels.user" active-nav>Home</li>
<!--<li>Select Project </li>-->
<li data-access-level="accessLevels.user" active-nav>Main Menu</li>
<!--<li data-access-level="accessLevels.user" active-nav>Chat</li>-->
<li data-access-level="accessLevels.user" active-nav>ChatMulti</li>
<li data-access-level="accessLevels.user" active-nav>Noti</li>
<!--<li data-access-level="accessLevels.anon" active-nav>Log in</li>-->
<li data-access-level="accessLevels.anon" active-nav>Register</li>
<li data-access-level="accessLevels.admin" active-nav>Comm Pic</li>
<!--<li data-access-level="accessLevels.admin" active-nav>CRUD sample</li>-->
<li data-access-level="accessLevels.admin" active-nav>Comm</li>
<li data-access-level="accessLevels.admin" active-nav>Punch</li>
<li data-access-level="accessLevels.admin" active-nav>Register</li>
<!--<li data-access-level="accessLevels.user" active-nav>Private</li>-->
<li data-access-level="accessLevels.admin" active-nav>Admin</li>
<li data-access-level="accessLevels.user">Log out</li>
<!-- ///smart town -->
</ul>
<div class="sidebar-footer">
<div class="col-xs-4">
<a href="https://github.com/rdash/rdash-angular" target="_blank">
Github
</a>
</div>
<div class="col-xs-4">
<a href="https://github.com/rdash/rdash-angular/README.md" target="_blank">
About
</a>
</div>
<div class="col-xs-4">
<a href="#">
Support
</a>
</div>
</div>
</div>
<!-- End Sidebar -->
<div id="content-wrapper">
<div class="page-content">
<!-- Header Bar -->
<div class="row header">
<div class="col-xs-12">
<div class="user pull-right">
<div class="item dropdown">
<a href="#" class="dropdown-toggle">
<img src="img/avatar.jpg">
</a>
<ul class="dropdown-menu dropdown-menu-right">
<li class="dropdown-header">
Joe Bloggs
</li>
<li class="divider"></li>
<li class="link">
<a href="#">
Profile
</a>
</li>
<li class="link">
<a href="#">
Menu Item
</a>
</li>
<li class="link">
<a href="#">
Menu Item
</a>
</li>
<li class="divider"></li>
<li class="link">
<a href="#">
Logout
</a>
</li>
</ul>
</div>
<div class="item dropdown">
<a href="#" class="dropdown-toggle">
<i class="fa fa-bell-o"></i>
</a>
<ul class="dropdown-menu dropdown-menu-right">
<li class="dropdown-header">
Notifications
</li>
<li class="divider"></li>
<li>
Server Down!
</li>
</ul>
</div>
</div>
<div class="meta">
<div class="page">
Dashboard
</div>
<div class="breadcrumb-links">
Redca Administration
</div>
</div>
</div>
</div>
<!-- End Header Bar -->
<!-- Main Content -->
<div ui-view></div>
</div><!-- End Page Content -->
</div><!-- End Content Wrapper -->
</div><!-- End Page Wrapper -->
</body>
</html>
try to call .otherwise on $routeProvider:
app.config(function($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/', {
templateUrl: '/a.html',
controller: 'ctrlA'
})
.when('/b/:tagId', {
templateUrl: '/b.html',
controller: 'ctrlB'
})
.when('/another', {
templateUrl: '/another.html',
controller: 'ctrlC'
})
.otherwise({ redirectTo: '/' });
});