Can anyone help me figure out why my menu is not displaying on my mobile device.
The collapsible menu is displaying fine in the browser but on a mobile (or narrow browser window), no links are displayed when you click the 3 bars that should display the links.
I am using jhipster so my code is split between multiple files.
All menus are working fine bar the menu options that should appear on a mobile device.
Any help is greatly appreciated
My header.html is as follows
<header class="clearfix">
<i class="fa fa-bars"></i>
<!-- Logo -->
<div class="logo">
<a href="#/">
<span translate="global.title">Cloud Ranger</span>
</a>
</div>
<div class="menu-button" toggle-off-canvas data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<div class="top-nav">
<ul class="nav-right pull-right list-unstyled">
<li class="dropdown langs text-normal" ng-controller="LanguageController">
<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown"><span translate="global.menu.language">Language</span>
</a>
<ul class="dropdown-menu with-arrow pull-right list-langs" role="menu">
<li data-ng-show="lang !== 'English' ">
English</li>
</ul>
</li>
</ul>
</div>
</header>
My navbar.html is as follows
<div id="nav-wrapper" >
<div ng-switch="isAuthenticated()">
<ul id="nav" role="navigation" ng-controller="NavbarController"
data-collapse-nav data-highlight-active data-slim-scroll>
<li ui-sref-active="active" ng-switch-when="false"><a
href="#/login"> <i class="fa fa-user"></i> <span
class="icon-bg bg-danger"></span> <span class="hidden-tablet"
translate="global.menu.account.login">Login</span>
</a></li>
<li ui-sref-active="active" ng-switch-when="false"><a
href="#/register"> <i class="fa fa-user"></i> <span
class="icon-bg bg-danger"></span> <span class="hidden-tablet"
translate="global.menu.account.register">Register</span>
</a></li>
<li ui-sref-active="active" ng-switch-when="true"><a
ui-sref="home"> <i class="fa fa-home"> <span
class="icon-bg bg-danger"></span></i> <span class="hidden-tablet"
translate="global.menu.home">Dashboard</span>
</a></li>
<li ui-sref-active="active" ng-switch-when="true"><a
ui-sref="credential"><i class="fa fa-cloud"><span
class="icon-bg bg-orange"></span></i><span class="hidden-tablet"
translate="global.menu.entities.credential">Credential</span></a></li>
<li ui-sref-active="active" ng-switch-when="true"><a
ui-sref="schedule"><i class="fa fa-calendar"><span
class="icon-bg bg-warning"></span></i><span class="hidden-tablet"
translate="global.menu.entities.schedules">Schedules</span></a></li>
<li ui-sref-active="active" ng-switch-when="true"><a
ui-sref="userTask"><i class="fa fa-tasks"><span
class="icon-bg bg-info"></span></i><span class="hidden-tablet"
translate="global.menu.entities.userTask">Tasks</span></a></li>
<li ui-sref-active="active" ng-switch-when="true"><a
ui-sref="taskExecutionLog"><i class="fa fa-bar-chart-o"><span
class="icon-bg bg-primary"></span></i><span class="hidden-tablet"
translate="global.menu.admin.logs">Logs</span></a></li>
<li>
<a href="#/password"><i class="fa fa-user"><span class="icon-bg bg-danger"></span></i><span
translate="global.menu.account.settings">Account></span></a>
<ul>
<li ui-sref-active="active"><a ui-sref="password"><i class="fa fa-caret-right"></i><span translate="global.menu.account.password">Password</span></a></li>
<li ui-sref-active="active"><a ui-sref="settings"><i class="fa fa-caret-right"></i><span translate="global.menu.account.settings">Settings</span></a></li>
<li ui-sref-active="active"><i class="fa fa-caret-right"></i><span translate="global.menu.account.logout">Logout</span></li>
</ul>
</li>
</ul>
</div>
</div>
Hello Demo have you looked through your CSS file and checked that the collapsible menu is not been disabled for smaller screens through the means of the #media queries, for instance #media (min-width: xxpx) can be used to define different style rules for different media types/devices. Hope this helps.
Related
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>
The CSS selector I'm using is
#menu-container > div.navbar-collapse.collapse.bs-navbar-collapse > ul:nth-child(1) > li.dropdown.open > ul > li:nth-child(1) > a > span.menu-label
Is there a way to make it shorter?
HTML
<div id="menu-container" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
<a class="navbar-brand">SmartStudio</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse bs-navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">File</a>
<ul class="dropdown-menu">
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Save</span>
<span class="pull-right">⌘ S</span>
</a>
</li>
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Fonts</span>
</a>
</li>
<li class="divider"><span></span></li>
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Publish</span>
</a>
</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">Edit</a>
<ul class="dropdown-menu">
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Undo</span>
<span class="pull-right">⌘ Z</span>
</a>
</li>
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Redo</span>
<span class="pull-right">⇧ ⌘ Z</span>
</a>
</li>
<li class="divider"><span></span></li>
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Cut</span>
<span class="pull-right">⌘ X</span>
</a>
</li>
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Copy</span>
<span class="pull-right">⌘ C</span>
</a>
</li>
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Paste</span>
<span class="pull-right">⌘ V</span>
</a>
</li>
<li>
<a>
<span class="pull-left"></span> its too long to use in code. Is there a way to make it shorter in selenium web driver?
<span class="menu-label">Paste in Place</span>
<span class="pull-right">⇧ ⌘ V</span>
</a>
</li>
<li class="divider"><span></span></li>
<li class="dropdown-submenu">
<a>
<span class="pull-left"></span>
<span class="menu-label">Arrange</span>
</a>
<ul class="dropdown-menu">
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Bring to Front</span>
<span class="pull-right">⇧ ⌘ ↑</span>
</a>
</li>
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Bring Forward</span>
<span class="pull-right">⌘ ↑</span>
</a>
</li>
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Send Backward</span>
<span class="pull-right">⌘ ↓</span>
</a>
</li>
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Send to Back</span>
<span class="pull-right">⇧ ⌘ ↓</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">View</a>
<ul class="dropdown-menu">
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Hide Panels</span>
</a>
</li>
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Hide Off Page Dimming</span>
</a>
</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown">Panel</a>
<ul class="dropdown-menu">
<li>
<a>
<span class="pull-left icon icon-check"></span>
<span class="menu-label">Project</span>
</a>
</li>
<li>
<a>
<span class="pull-left icon icon-check"></span>
<span class="menu-label">Properties</span>
</a>
</li>
<li>
<a>
<span class="pull-left icon icon-check"></span>
<span class="menu-label">Design</span>
</a>
</li>
</ul>
</li>
<li class="dropdown open"><a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">Help</a>
<ul class="dropdown-menu">
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Support Resources</span>
</a>
</li>
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Rate Us</span>
</a>
</li>
<li>
<a>
<span class="pull-left"></span>
<span class="menu-label">Suggest a Feature</span>
</a>
I think you've got several options... I'll list a couple that you can try and see if they work for you.
The super simplest way is to use the link text of the menu and then the submenu items. It may or may not work... one issue may be the uniqueness of the "Help" link on the page, there may be more than one. It looks like you will have to click the Help menu to expose the submenu that contains the "Support Resources" link.
String menuName = "Help";
String submenuName = "Support Resources";
driver.findElement(By.linkText(menuName)).click();
driver.findElement(By.linkText(submenuName)).click();
If that doesn't work, this should... or at least point you in the right direction. You will need to loop through the menus looking for the correct link text, click on it exposing the submenu, loop through the submenus looking for the correct link text, and then click on it.
String menuName = "Help";
String submenuName = "Support Resources";
List<WebElement> menus = driver.findElements(By.cssSelector("#menu-container > div > ul.nav.navbar-nav > li.dropdown"));
// List<WebElement> menus = driver.findElements(By.cssSelector("#menu-container li.dropdown")); // possible shorter alternative
for (WebElement menu : menus)
{
if (menu.getText().equals(menuName))
{
menu.click();
List<WebElement> submenus = menu.findElements(By.cssSelector("span.menu-label"));
for (WebElement submenu : submenus)
{
if (submenu.getText().equals(submenuName))
{
submenu.click();
break;
}
}
break;
}
}
This is impossible to figure out for sure without seeing the HTML you're referring to. However, it looks like you may be able to get away with this:
#menu-container span.menu-label
It looks like you're acquainted with the > operator, which selects a direct child of an element. The operator (a space) selects any descendant of an element.
This only works if there are no other spans with a class of menu-label inside of the element with the ID of menu-container. I'm assuming this is the case.
If you want a more certain answer, you'll need to provide a complete HTML file.
EDIT: Okay, now that you've provided your HTML, it's very clear what the problem is: your HTML is using styling classes, but no descriptive classes. You have two choices: adding more specific classes to your HTML elements, or just dealing with your very long selector. There are no other options.
Of course, if you choose the second option, you should store that CSS selector in a variable to give it a useful name, make it reusable, and make it easy to change when needed.
How to differentiate SPA appearance for Admin and normal user in Angular JS? I did try ng-show to but while refreshing the page the hidden options in menu is visible for a second. Any best practice to separate page fields and options for admin and normal user?
<div class="container navbarcontainer">
<nav class="navbar navbar-inverse" style="z-index: 1;">
<div class="container-fluid" style="padding-right: 12px; padding-left: 12px; font-size: 12px;">
<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 scrollable-menu" id="myNavbar">
<ul class="nav navbar-nav showActiveClasss boxyfontmenu">
<li><a ui-sref="home" class="visible-xs bordermenuitem" data-toggle="collapse" data-target=".navbar-collapse"><span class="" id="sp">Home</span></a>
<a ui-sref="home" class="hidden-xs bordermenuitem" id="sp">Home</span></a>
</li>
<li><a ui-sref="ringtones" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse"><span id="sp">Ringtones</span></a>
<a ui-sref="ringtones" class="hidden-xs"><span id="sp">Ringtones</span></a>
</li>
<li ng-show="user.role=='admin'"><a ui-sref="userList" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse"><span id="sp">User list</span></a>
<a ui-sref="userList" class="hidden-xs"><span id="sp">User list</span></a>
</li>
<li><a ui-sref="contactus" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse"><span id="sp">Contact us</span></a>
<a ui-sref="contactus" class="hidden-xs"><span id="sp">Contact us</span></a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-facebook-square facebook"></i></li>
<li><i class="fa fa-twitter twitter"></i></li>
<li><i class="fa fa-youtube-play youtube"></i></li>
</ul>
</div>
</div>
</nav>
</div>
hide all by default and set style for rules maybe
<li class="hidden-by-default" ng-class="{'hidden-by-default': !isAdmin}"></li>
Set isAdmin in controller with timout to false or when you load the rules from server... it will work by default :D
Note that your initial value should be true for this
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.
Why isn't there an official navbar example?
https://angular-ui.github.io/bootstrap/
Searching on the web, I've found a few examples but they don't work on the latest released AngularUI version and Bootstrap. All the examples I've found were for older versions.
Here is one I forked and got working:
AngularJS v1.3.15
angular-ui-bootstrap 0.12.1
Bootstrap v3.3.2
<nav class="navbar navbar-default" ng-controller="NavbarController">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" ng-click="isCollapsed = !isCollapsed" aria-expanded="true">
<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>
<div class="navbar-collapse collapse in" collapse="isCollapsed" aria-expanded="true">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span>
</li>
<li>Link
</li>
<li class="dropdown" dropdown>
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="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>
<form class="navbar-form navbar-left" role="search">
<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>
</ul>
</div>
</div>
</nav>
http://plnkr.co/edit/2KQrqtrvHSiGjWZiHMB3?p=preview