I'm trying to use bootstrap.css with Angular. I referenced Twitter Bootstrap Navbar with AngularJS - Collapse Not Functioning but when I try to implement this code, my navbar doesn't collapse and the dropdown doesn't work either.
Code:
<nav id="navbar-example" class="navbar navbar-inverse navbar-static" role="navigation" ng-controller="NavBarCtrl">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" type="button" ng-click="isCollapsed = !isCollapsed">
<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="#">Title</a>
</div>
<div collapse="isCollapsed" class="navbar-collapse bs-js-navbar-collapse">
<ul class="nav navbar-nav">
<li>home</li>
<li class="dropdown">
<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li id="fat-menu" class="dropdown">
Dropdown 3 <b class="caret"></b>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container-fluid -->
</nav>
var myApp = angular.module('myApp', ['ui.bootstrap']);
function NavBarCtrl($scope) {
$scope.isCollapsed = true;
}
Why won't it collapse? Here's the JSFiddle.
Have you checked in the developer tool? It is showing
https://fiddle.jshell.net/code.angularjs.org/1.2.9/angular.js Failed to load resource: the server responded with a status of 404 (Not Found)
ui-bootstrap-tpls.js:7 Uncaught ReferenceError: angular is not defined
Because angular wasn't able to load hence angular bootstrap is not able to initial as well.
So please try to add another angular cdn and test.
I think you need to add the class show on this part
<div ng-class="collapse navbar-collapse" [ngClass]="{'show':!isCollapsed}">
Related
I have problem when I'm trying to access file from assets directory.
I'm trying to serve an image from navbar component which is located in components/navbar. Image is located in assets/img directory.
Browser throws an error http://localhost:4200/assets/img/test.png (404) not found
I'm using angular 5,Angular CLI 1.5 and Node: 6.10.3
Here you can see code and project structure.
Screenshot
navbar.component.html
<nav class="navbar navbar-default">
<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" 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" routerLink="/">No Name</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a routerLink="#">Pitanja<span class="sr-only">(current)</span></a></li>
<li><a routerLink="#">Oznake</a></li>
</ul>
<ul class="nav navbar-nav navbar-right" *ngIf="isLoggedIn == true">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{user.username}} <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a routerLink="/user/{{user.username}}">My profile</a></li>
<li><a routerLink="#">Settings</a></li>
<li role="separator" class="divider"></li>
<li><a routerLink="#" (click)="logout()">Logout</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right" *ngIf="isLoggedIn == false">
<li><a routerLink="/login">Login</a></li>
<li><a routerLink="/register">Register</a></li>
</ul>
</div>
</div>
</nav>
<img src="assets/img/test.png" />
try to play with the location.
I think it should work.
<img src="../../assets/img/test.png" />
app-|
|
-components-|(../)
| |-navbar-|(../)
| |-navbar.comp.html
|
-assets-|
| |-img-|
| |-test.png
I can't get a bootstrap vertical menu to collapse when using media queries.
There is too much code to put it all in here so I created a fiddle -
https://jsfiddle.net/DTcHh/
I don't mind re-writing the menu however it was the only way I could get this kind of menu. I am basing my technology off this website as this was the clients demand -
http://www.rhiwbeinaprm.co.uk/
I am trying to create their home page menu but in bootstrap so it is responsive. any help is greatly appreciated.
<div class="navbar">
<nav class="navbar navbar-default">
<div class="container-fluid"><div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="root">
</li><li class="dropdown-submenu"> <a tabindex="-1" href="#">Welcome</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Headteacher</a>
</li>
<li><a tabindex="-1" href="#">School Motto</a>
</li>
</ul>
</li>
</ul>
</div>
</div
The issue is, when scrolling below around 750px and below, the whole thing just disappears.
Where is the navigation button?
Add an id to: <div class="navbar-collapse collapse">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Bootstrap 3</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
...
</div>
Update fiddle: https://jsfiddle.net/wZVanG/DTcHh/8623/
you have the following issues with your code:
You are duplicating something here by using a div and a nav both
with class navbar. I don't know why but that's weird.
Your collapsing div doesn't have id. the id will allow the button to target it for dropdown
The button that is supposed to hold the toggle for dropdown isn't in your code.
Since your collapsing div doesn't have an Id, your dropdown button wouldn't be pointing to anything
Your jsFiddle is different from the code posted here.... The following code is based on the one from your jsfiddle.
Working bootply
Your website takes a lot of time to load, to improve the user experience you might consider loading the js files after or creating a loading screen. The following code is for the navbar.
<div class="container">
<div class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#">Bootstrap 3</a>
<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>
</div>
<div class="navbar-collapse collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown active">
Getting started <b class="caret"></b>
<ul class="dropdown-menu">
<li>Download Bootstrap</li>
<li class="divider"></li>
<li class="dropdown-header">Examples</li>
<li>Basic template</li>
<li>Starter template</li>
<li>Grids</li>
<li>Jumbotron</li>
<li>Navbar</li>
<li>Sign-in page</li>
<li>Sticky footer</li>
<li>Offcanvas</li>
<li>Carousel</li>
<li>Theme</li>
<li class="divider"></li>
<li class="dropdown-header">Compatibility</li>
<li>Migrating from 2.x to 3.0</li>
<li>Browser support</li>
<li>Third party support</li>
</ul>
</li>
<li>CSS</li>
<li>Components</li>
<li>JavaScript</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active">Customize</li>
</ul>
</div>
</div>
<div class="jumbotron">
<h1>Twitter Bootstrap 3.0</h1>
<p class="lead">Starter template with CSS and JS included.</p>
<p><a class="btn btn-lg btn-primary" href="#fork">Fork this fiddle</a></p>
</div>
</div>
I want have something like navbar-toggle. When user click on it the large div in width and height open open up just like when clicking on navbar-header containg button with class "navbar-toggle"
Any idea of how can I do this using bootstrap?
I have something like this for simple drop down menu but it's a navbar I hope you understand me.
<div class="bs-example">
<nav id="myNavbar" style="width:95%;" class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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="#">Category</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>Home</li>
<li>Profile</li>
<li class="dropdown">
Messages <b class="caret"></b>
<ul class="dropdown-menu">
<li>Inbox</li>
<li>Drafts</li>
<li>Sent Items</li>
<li class="divider"></li>
<li>Trash</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Admin <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li class="divider"></li>
<li>Settings</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
You can create it by jQuery click function. it's very simple.
jQuery(".classNameWhichWillShow").hide();
jQuery(".class_name_where_click").click(function(){
jQuery(".classNameWhichWillShow").slideToggle(100);
});
I have an external Bootstrap navbar header which I include in every page as
<?php include("header.html");?>
The external header html file is given below:
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="homepage.php" >Home</a></li>
<li >About Us</li>
<li>Events</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Members<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>4th Year</li>
<li>3rd Year</li>
<li>2nd Year</li>
<li>1st Year</li>
</ul>
</li>
<li>Gallery</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li id="register"><span class="glyphicon glyphicon-user"></span>Register</li>
<li><span class="glyphicon glyphicon-log-in"></span>Login</li>
</ul>
</div>
</div>
</nav>
The problem I am facing is changing the active menu. I tried various ways but no success yet.
Please help if you have any idea.
You can either send a variable through POST/GET using php and set the class accordingly, or you can try using jquery to find specific elements that exist in each page and add a class accordingly, for example
if ($('#specific-page-element-1').length) {
$('menuelement-1').addClass('active');
}
This is the core content of my index.html file:
<div role="navigation" class="navbar navbar-default navbar-static-top navbar-inverse " data-ng-contoller="NavController">
<div class="container">
<div class="navbar-header">
<button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Bootstrap theme
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li ng-class="{active: isHome()}">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>New Message</li>
<li>List Messages</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div data-ng-view="" id="main-container" class="container" role="main"></div>
This is how my app is bootstrapped:
define(['app', 'jquery', 'bootstrap', 'angular' ], function(app, jQuery, bootstrap, angular) {
jQuery('.dropdown-toggle').dropdown();
require(['domReady!'], function (document) {
angular.bootstrap(document, ['app']);
});
});
All of the other controllers work just fine. The only thing I can guess is that for some reason it's being ignored by the bootstrap.
All of the dependencies are loaded with requirejs, and I can see that the code is loaded fine with no errors in the console (including the controller that doesn't work). Any ideas on how to track this down?
It was a typo. I had contoller not controller.