I'm trying to include two submenu inside a sidebar. However, I have not been getting consistent result for the dropdown. On my 10 attempts of loading/refreshing, the sub-menu drop down only works 4/10 times. Does anyone have an idea why it is producing such results?
There's no error on console either.
Also, I'm using AngularJS to include this sidebar into my main html code.
Code for Sidebar, sidebar.html
<div class="col-md-2"><!--grid 2 for bootstrap -->
<div class="sidebar content-box" style="display: block;">
<ul class="nav">
<!-- Main menu -->
<li class="current"><i class="glyphicon glyphicon-home"></i> Dashboard</li>
<br>
<li><i class="glyphicon glyphicon-calendar"></i> Calendar</li>
<br>
<li><i class="glyphicon glyphicon-stats"></i> Stats</li>
<br>
<li class="submenu">
<a href="">
<i class="glyphicon glyphicon-list"></i> List
<span class="caret pull-right"></span>
</a>
<!-- Sub menu -->
<ul>
<li>Sub Function 1</li>
<li>Sub Function 2</li>
<li>Sub Function 3</li>
<li>Sub Function 4</li>
</ul>
</li>
<br>
<li class="submenu">
<a href="">
<i class="glyphicon glyphicon-list"></i> Function 5
<span class="caret pull-right"></span>
</a>
<!-- Sub menu -->
<ul>
<li>Sub Function 5</li>
<li>Sub Function 6</li>
<li>Sub Function 7</li>
</ul>
</li>
</ul>
</div>
</div>
AngularJS part to incldue sidebar
<!--Include header-->
<div ng-include src="'views/templates/header.html'"></div>
<!--end of header-->
<div class="page-content">
<div class="row">
<!-- Insert Side bar-->
<div ng-include src="'views/templates/sidebar.html'"></div>
<div class="col-md-10"><!--Main content -->
<div class="row">
<!-- to display content here -->
</div>
</div>
</div>
</div>
Not sure what went wrong.
Related
In my index.html code is:
i have written ng-include directive as
and my menu.html file is
<div class="container">
<div class="row row-content" ng-controller="MenuController">
<div class="col-xs-12">
<button ng-click="toggleDetails()" class="btn btn-xs btn-primary pull-right" type="button">
{{showDetails ? 'Hide Details':'Show Details'}}
</button>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation"
ng-class="{active:isSelected(1)}">
<a ng-click="select(1)"
aria-controls="all menu"
role="tab">The Menu</a></li>
<li role="presentation"
ng-class="{active:isSelected(2)}">
<a ng-click="select(2)"
aria-controls="appetizers"
role="tab">Appetizers</a></li>
<li role="presentation"
ng-class="{active:isSelected(3)}">
<a ng-click="select(3)"
aria-controls="mains"
role="tab">Mains</a></li>
<li role="presentation"
ng-class="{active:isSelected(4)}">
<a ng-click="select(4)"
aria-controls="desserts"
role="tab">Desserts</a></li>
</ul>
<div class="tab-content">
<ul class="media tab-pane fade in active">
<li class="media" ng-repeat = "dish in dishes | filter:filtText">
<div class="media-left media-middle">
<a href="#">
<img class="media-object img-thumbnail"
ng-src={{dish.image}} alt="Uthappizza">
</a>
</div>
<div class="media-body">
<h2 class="media-heading">{{dish.name}}
<span class="label label-danger">{{dish.label}}</span>
<span class="badge">{{dish.price | currency}}</span></h2>
<p ng-show="showDetails">{{dish.description}}</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
but i am not able to get expected result from ng-include directive and i am not able to see menu.html output in my index.html file after opening it in any browser.
The following is the partial view that I'm using. Somehow the 'ng-scope' class is not added automatically to every HTML tag. Could someone tell me what might be the cause of this? I know angular.js adds class conditionally but I don't know how to fix this.
<div class="my-photo-header">
<div class="container">
<a class="navbar-brand my-navbar-brand">
<span class="glyphicon glyphicon-pencil"></span>
</a>
<form class="navbar-form my-navbar-form navbar-left" role="search">
<div>
<input id="photo-title" type="text" class="form-control" placeholder="Untitled"
title="Edit your photo title here." value="TITLE">
</div>
</form>
<ul id="photo-title-header" class="nav nav-tabs">
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
File <span class="caret"></span>
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>
<a>Save</a>
</li>
<li>
<a ng-click="vm.haha()">Upload</a>
<input type="file" upload-image="uploadImage"/>
</li>
<li><a>Open</a></li>
<li><a>Invite</a></li>
<li role="separator" class="divider"></li>
<li><a>Export as<span class="caret"></span></a></li>
<li><a>Print</a></li>
</ul>
</li>
<!-- Please change TODO to display the number, and maybe change style to not be a tab -->
<li role="listitem"><a>{{TODO}} revisions</a></li>
<li>Logout</li>
</ul>
</div>
</div>
I have a SPA that implements modals. I'm trying to create dropdowns for certain elements that have modals attached to them. I want each dropdown to display a list of commands, and then a "link" to the modal. I can implement the modals just fine. The problem is with the dropdowns. The page works fine when I implement the first dropdown, but when I try to implement the second dropdown, neither of them work. I set the data-target attribute to see if that changed anything, but I am either not using it correctly or it's not part of the solution. Any ideas?
<div class="row cluster" ng-repeat="cluster in clusterCtrl.clusters">
<!-- this dropdown breaks the other one -->
<div class="btn-group" dropdown is-open="status.isopen" data-target="#cluster">
<h4 id="cluster" class="pointer dropdown-toggle" dropdown-toggle ng-disabled="disabled">
{{cluster.name}}
</h4>
<ul class="dropdown-menu" role="menu">
<li role="menuitem">Status</li>
<li role="menuitem">Start<li>
<li role="menuitem">Stop</li>
<li class="divider"></li>
<li role="menuitem"><a class="pointer" ng-click="openCluster()">Details</a></li>
</ul>
</div>
<!-- -->
<div class="col-lg-4">
<!-- START INSTANCE DISPLAY -->
<div class="row">
<div class="col-xs-1 instance" ng-repeat="instance in instanceCtrl.instances">
<div class="btn-group" dropdown is-open="status.isopen" data-target="#instance">
<h6 id="instance" class="pointer dropdown-toggle" dropdown-toggle ng-disabled="disabled">
{{instance.name}}
</h6>
<ul class="dropdown-menu" role="menu" aria-labelledby="single-button">
<li role="menuitem">Status</li>
<li role="menuitem">Start<li>
<li role="menuitem">Stop</li>
<li class="divider"></li>
<li role="menuitem"><a class="pointer" ng-click="openInstance()">Details</a></li>
</ul>
</div>
</div>
</div>
<!-- END INSTANCE DISPLAY -->
</div>
</div>
The data-target attribute is not needed. The problem lies in dropdown is-open="status.isopen". This is a unique attribute. To fix it, you need to write a new controller for your dropdown. Be sure not to name it DropdownController since that it an internal control to Bootstrap.
dropdown-controller.js
(function() {
angular
.module('MyApp')
.controller('DropdownCtrl', function($scope) {
$scope.status = {
isClusterOpen: false,
isInstanceOpen: false,
};
$scope.toggled = function(open) {
console.log('Dropdown is now: ', open);
};
$scope.toggleDropdown = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.status.isClusterOpen = !$scope.status.isClusterOpen;
$scope.status.isInstanceOpen = !$scope.status.isInstanceOpen;
};
});
})();
index.html
<div class="row cluster" ng-repeat="cluster in clusterCtrl.clusters">
<!-- Changed -->
<div class="btn-group" dropdown is-cluster-open="status.isClusterOpen" >
<!-- -->
<h4 id="cluster" class="pointer dropdown-toggle" dropdown-toggle ng-disabled="disabled">
{{cluster.name}}
</h4>
<ul class="dropdown-menu" role="menu">
<li role="menuitem">Status</li>
<li role="menuitem">Start<li>
<li role="menuitem">Stop</li>
<li class="divider"></li>
<li role="menuitem"><a class="pointer" ng-click="openCluster()">Details</a></li>
</ul>
</div>
<div class="col-lg-4">
<!-- START INSTANCE DISPLAY -->
<div class="row">
<div class="col-xs-1 instance" ng-repeat="instance in instanceCtrl.instances">
<!-- Changed -->
<div class="btn-group" dropdown is-instance-open="status.isInstanceOpen">
<!-- -->
<h6 id="instance" class="pointer dropdown-toggle" dropdown-toggle ng-disabled="disabled">
{{instance.name}}
</h6>
<ul class="dropdown-menu" role="menu" aria-labelledby="single-button">
<li role="menuitem">Status</li>
<li role="menuitem">Start<li>
<li role="menuitem">Stop</li>
<li class="divider"></li>
<li role="menuitem"><a class="pointer" ng-click="openInstance()">Details</a></li>
</ul>
</div>
</div>
</div>
<!-- END INSTANCE DISPLAY -->
</div>
</div>
I've added the dropdown in the header.html which i included in the index.html of an angular app.
<ul class="nav navbar-nav navbar-right">
<li class="dropdown profile hidden-xs">
<a class="dropdown-toggle" data-toggle="dropdown">
<span class="meta">
<span class="text">{{slUserObj.username}}</span>
<span class="caret"></span>
</span>
</a>
<ul class="dropdown-menu animated flipInX" role="menu">
<li>
<a href="javascript:void(0);" ng-click="showProfile();main.page='profile'">
<span class="icon"><i class="fa fa-user"></i>
</span>My Account</a>
</li>
<li>
<a href="javascript:void(0);" ng-click="showProfile();main.page='profile'">
<span class="icon"><i class="fa fa-user"></i>
</span>Carreir Details</a>
</li>
<!--<li>
<a href="javascript:void(0);">
<span class="icon"><i class="fa fa-envelope"></i>
</span>Messages</a>
</li>
<li>
<a href="javascript:void(0);">
<span class="icon"><i class="fa fa-cog"></i>
</span>Settings</a>
</li>-->
<li class="divider"></li>
<li>
<a href="javascript:void(0);" ng-click="logout()">
<span class="icon"><i class="fa fa-sign-out"></i>
</span>Logout</a>
</li>
</ul>
</li>
here is the index.html
<section id="main-wrapper" class="theme-default">
<!-- Page wrapper -->
<header id="header" ng-include="'views/header.html'" ng-show="isAuthenticated"></header>
<!-- Left Sidebar Navigation -->
<aside class="sidebar sidebar-left" ng-include="'views/left-sidebar.html'" ng-show="isAuthenticated"></aside>
<!-- Content wraper -->
<section class="main-content-wrapper" ng-class="{'main-content-wrapper':isAuthenticated,'main-content-wrapper-full':!isAuthenticated}">
<!-- Main content view -->
<div ui-view></div>
<!-- Footer -->
<div ng-include="'views/footer.html'"></div>
</section>
<!-- /Content wraper-->
Now the dropdown in the header.html is not working once unhiding the header block after login, but its working when i'm refreshing the page after login.
I have a responsive fixed-top navbar (using Twitter Bootstrap 3) as follows:
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header"><img src="/images/citylightslogo.png" alt="logo" id="cllogo"/>
</div>
**<h1 id="topline2">• Tagline1 </h1>
<h1 id="topline3">• Address • Call Anytime! xxx xxx xxxx </h1>
<div id="adspace" >
<h1 id="headline33" class =".visible-xs" >100% Satisfaction Guaranteed! Call us Anytime! </h1>
</div>
<div id="logospace"><img src="/images/ab2.gif" alt="logo" id="alogo2"/><img src="/images/ab2.gif" alt="logo" id="alogo3"/>
</div>**
</div>
</div>
I just want to make sure that I am learning this correctly: Currently, the elements in bold above overflow all over the place (into other rows) when collapsed.
Question: How could I make sure that they are either invisible when collapsed or partially visible in mobile or tablet screens when collapsed?
Is the fact that I am not including those elements in the "navabar-header" class the problem or should I be wrapping them in a separate div to begin with (if so what div?)?
It seems the bootstrap docs are focused on explaining how to make navbar links responsive and I cannot seem to find anything on making non-link content (like headers) responsive as well.
Thanks!
Dont understand the goal entirely but let me take a crack at it... It sounds like you want more than just menu items to collapse...Right? Great! See below
--> http://www.bootply.com/118940
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<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="#">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</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<div class="col-sm-3 col-md-3">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="q">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
everything inside of
class="collapse navbar-collapse"
will collapse...
see it here --> http://www.bootply.com/118940