Material Design Lite - nav header looks very small on Samsumg S4 or S4 - material-design-lite

When using standard examples with Material Design Lite, I see that the header and tabs bars looks very small. How come?
How to solve this?
This is the code:
<!doctype html>
<html>
<head>
<!-- Material Design Lite -->
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.2/material.min.js"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.2/material.indigo-pink.min.css">
<!-- Material Design icon font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.content-grid {
max-width: 480px;
}
</style>
</head>
<body>
<!-- Always shows a header, even in smaller screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="demo-header mdl-layout__header mdl-layout__header--waterfall">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">
<div>MzFaster</div>
</span>
<div class="mdl-layout-spacer"></div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
<label class="mdl-button mdl-js-button mdl-button--icon" for="search">
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" id="search" />
<label class="mdl-textfield__label" for="search">Enter your query...</label>
</div>
</div>
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" id="hdrbtn">
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-js-menu mdl-js-ripple-effect mdl-menu--bottom-right" for="hdrbtn">
<li class="mdl-menu__item">About
</li>
<li class="mdl-menu__item">Categories</li>
<li class="mdl-menu__item">ContactUs</li>
<li class="mdl-menu__item">
Legal information</li>
</ul>
</div>
<div class="mdl-layout__header-row">
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
Featured
Featured Music
Social
Trending
</div>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content">
<!-- Your content goes here -->
</div>
</main>
</div>
</body>
</html>


#Niet the Dark Absol -- answered the question as a comment. #Niet, when you create the answer (as suggested above) I will remove this text. The credit is yours!
The next line should be in the header section of the HTML file.
<meta name="viewport" content="width=device-width" />

Related

How to center the links in mobile view

<div id="DonorLinks">
<hr>
<ul id="donorLinkSection" class="nav nav-justified">
<li id="IntroVideo" class="navLinks">
<a id="DonorIntroVideoLink" href="/" onclick="return someFunction()">
<i class="fa fa-play-circle"></i>Watch introductory video
</a>
</li>
<li id="PgmDetails" class="navLinks"><a id="PgmDetailsPageLink" href="DonorDetails"><i class="glyphicon glyphicon-list-alt" aria-hidden="true"></i>View program details</a></li>
<li id="TestimonialLink" class="navLinks"><a id="TestimonialPageLink" href="DonorTestimonials"><i class="fa fa-commenting"></i>See what nonprofits say</a></li>
</ul>
<hr>
</div>
Hi, the above HTML gives the following arrangement of URL in Desktop View and Mobile View
I have used nav-justified class to justify the links in both desktop view and mobile view. While the desktop view is just fine (Three links appearing horizontally), In mobile view the 2nd link is slightly misaligned (links have to appear vertically). Is there a cleaner way to align the links in mobile view?

answer updated
you can now individually give margin-right to your second link #PgmDetails
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css">
<style>
#PgmDetails { margin-right: 22px; } <!-- as per your need-->
</style>
</head>
<body>
<div id="DonorLinks">
<hr>
<ul id="donorLinkSection" class="nav nav-justified">
<li id="IntroVideo" class="navLinks">
<a id="DonorIntroVideoLink" href="/" onclick="return someFunction()">
<i class="fa fa-play-circle"></i>Watch introductory video
</a>
</li>
<li id="PgmDetails" class="navLinks"><a id="PgmDetailsPageLink" href="DonorDetails"><i class="glyphicon glyphicon-list-alt" aria-hidden="true"></i>View program details</a></li>
<li id="TestimonialLink" class="navLinks"><a id="TestimonialPageLink" href="DonorTestimonials"><i class="fa fa-comments"></i>See what nonprofits say</a></li>
</ul>
<hr>
</div>
</body>
</html>

<div class="container">
<div class="row">
<div class="col-md-12">
some text
</div>
</div>
</div>
Try like that ?

I think glyphicon used extra padding or margin in your code.
just update
<i class="glyphicon glyphicon-list-alt ml-0 pl-0" aria-hidden="true"></i>
or you can inspect element so that you can see where is that extra padding

I think your using Bootstrap. We can use flex-column class Reference link

css file doesn't apply on html(.jsp file)

i have a probleme with my css in jsp project
the probleme is that the css doesn't apply on page
i've tried to change the path of css files but it doesn't work
i've also to change
by : <%#include file="../assets2/css/bulma.css" %> but it Caused more errors related to jsp compilation ...
on network tap (inspect elements) :
network tabmy project files
the code on my .jsp file :
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%# page import="entities.Dossier" %>
<%# page import="entities.Responsable" %>
<%# page import="entities.Tache" %>
<%#page import="java.util.ArrayList"%>
<%#page import="java.util.List"%>
<%#page import="web.TrackingServlet"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>tAccueil</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Premium Bootstrap 4 Landing Page Template" />
<meta name="keywords" content="bootstrap 4, premium, marketing, multipurpose" />
<meta content="Themesdesign" name="author" />
<!-- favicon -->
<link rel="shortcut icon" href="images/favicon.ico">
<!-- google font -->
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet">
<!--Slider-->
<link rel="stylesheet"type="text/css" href="css3/owl.carousel.css" />
<link rel="stylesheet"type="text/css" href="css3/owl.theme.css" />
<link rel="stylesheet"type="text/css" href="css3/owl.transitions.css" />
<!-- Magnific-popup -->
<link rel="stylesheet" type="text/css" href="css3/magnific-popup.css">
<!-- css -->
<link href="css3/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="css3/icons.css" rel="stylesheet" type="text/css" />
<link href="css3/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--Navbar Start-->
<nav class="navbar navbar-expand-lg fixed-top navbar-custom sticky sticky-light" id="navbar">
<div class="container">
<!-- LOGO -->
<a href="http://localhost:8080/Tracking/Acceuil" class="logo-sticky">
<img src="img/logogo.png" alt="" class="logo-dark" height="32" />
<img src="img/logogo.png" alt="" class="logo-light" height="32" />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<i class="remixicon-menu-fill"></i>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mx-auto navbar-center" id="mySidenav">
</ul>
<ul class="navbar-nav">
<li class="nav-item active">
Startseite
</li>
<c:if test="${session == null }">
<li class="nav-item">
Anmelden
</li>
</c:if>
<c:if test="${session != null }">
<li class="nav-item">
Mein Raum
</li>
<li class="nav-item">
Abmelden
</li>
</c:if>
</ul>
</div>
</div>
</nav>
<!-- Navbar End -->
<!-- HERO START -->
<section class="hero-4-bg position-relative bg-gradient" id="home">
<div class="container">
<div class="row align-items-center hero-4-content">
<div class="col-lg-5">
<h1 class="text-white hero-4-title font-weight-medium mb-4 line-height-1_4">Verfolgen Sie Ihre Datei</h1>
<p class="text-white-50 mb-5">WEBTRACK bietet den schnellsten und genauesten Verfolgungsdienst auf der Grundlage einer intelligenten Datenanalyse..</p>
<div class="text-center subcribe-form mt-4">
<form action="progression" method="post">
<c:if test="${id_doc != null }">
<input type="text" value="${id_doc }" name="tracking">
</c:if>
<c:if test="${id_doc == null }">
<input type="text" placeholder="Geben Sie die Tracking-Nummer ein..." name="tracking">
</c:if>
<button type="submit" class="btn rounded-pill btn-purple">Verfolgen </button>
</form>
</div>
</div>
<div class="col-lg-6 offset-lg-1">
<div class="hero-4-img mt-5 mt-lg-0">
<img src="images/hero-4-img.png" alt="" class="img-fluid mx-auto d-block">
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="home-bottom-shape">
<img src="images/home-4-bottom-shape.png" alt="" class="img-fluid mx-auto d-block">
</div>
</div>
</div>
</section>
<!-- HERO END -->
<!-- FOOTER END -->
<!-- javascript -->
<script src="js2/jquery.min.js"></script>
<script src="js2/bootstrap.bundle.min.js"></script>
<script src="js2/scrollspy.min.js"></script>
<script src="js2/jquery.easing.min.js"></script>
<!-- COUNTER -->
<script src="js2/counter.int.js"></script>
<!-- carousel -->
<script src="js2/owl.carousel.min.js"></script>
<!-- Magnific Popup -->
<script src="js2/jquery.magnific-popup.min.js"></script>
<script src="js2//magnificpopup-int.js"></script>
<!-- Main Js -->
<script src="js2/app.js"></script>
</body>
</html>

I think you want to include a .css file to jsp. try this
<jsp:include page="../css3/index.css"/>
or
<%#include file="/WEB-INF/include/header.jsp"%>

ASP.NET MVC Content pages is not showing in _layout template

i am trying to show the content pages (for example index.vbhtml) in my template (_layout.vbhtml) but it is not working. in plain html content pages it's working fine.
i am not sure where i am getting wrong. Shots:≥≥≥
_layout index out-true out-wrong

Do you have anything in your ViewStart file that's designating layout?

I think you are missing to add bellow code
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
place your code to review

I think it's a problem with the code _layout.vbhtml. Because when I replaced with another _layout, the problem was resolved.
This is my _layout file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>صفحه شروع | کنترل پنل</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.7 -->
<link rel="stylesheet" href="dist/css/bootstrap-theme.css">
<!-- Bootstrap rtl -->
<link rel="stylesheet" href="dist/css/rtl.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="bower_components/Ionicons/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="dist/css/AdminLTE.css">
<link rel="stylesheet" href="dist/css/skins/skin-blue.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Google Font -->
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
#RenderSection("scripts", False)
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<!-- Main Header -->
<header class="main-header">
<!-- Logo -->
<a href="index2.html" class="logo">
<!-- mini logo for sidebar mini 50x50 pixels -->
<span class="logo-mini">پنل</span>
<!-- logo for regular state and mobile devices -->
<span class="logo-lg"><b>کنترل پنل مدیریت</b></span>
</a>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
<span class="sr-only">Toggle navigation</span>
</a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
<span class="hidden-xs">علیرضا حسینی زاده</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header">
<img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
<p>
علیرضا حسینی زاده
<small>مدیریت کل سایت</small>
</p>
</li>
<!-- Menu Body -->
<li class="user-body">
<div class="row">
<div class="col-xs-4 text-center">
صفحه من
</div>
<div class="col-xs-4 text-center">
فروش
</div>
<div class="col-xs-4 text-center">
دوستان
</div>
</div>
<!-- /.row -->
</li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
پروفایل
</div>
<div class="pull-right">
خروج
</div>
</li>
</ul>
</li>
<!-- Control Sidebar Toggle Button -->
<li>
<i class="fa fa-gears"></i>
</li>
</ul>
</div>
</nav>
</header>
<!-- right side column. contains the logo and sidebar -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<form action="#" method="get" class="sidebar-form">
<div class="input-group">
<input type="text" name="q" class="form-control" placeholder="جستجو">
<span class="input-group-btn">
<button type="submit" name="search" id="search-btn" class="btn btn-flat">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</form>
<!-- /.search form -->
<!-- Sidebar Menu -->
<ul class="sidebar-menu" data-widget="tree">
<li class="header">تیتر</li>
<!-- Optionally, you can add icons to the links -->
<li class="active"><i class="fa fa-link"></i> <span>لینک</span></li>
<li><i class="fa fa-link"></i> <span>لینک ۲</span></li>
<li class="treeview">
<a href="#">
<i class="fa fa-link"></i> <span>چند سطحی</span>
<span class="pull-left-container">
<i class="fa fa-angle-right pull-left"></i>
</span>
</a>
<ul class="treeview-menu">
<li>لینک سطح ۱</li>
<li>لینک سطح ۱</li>
</ul>
</li>
</ul>
<!-- /.sidebar-menu -->
</section>
<!-- /.sidebar -->
</aside>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
عنوان صفحه
<small>توضیحات</small>
</h1>
<ol class="breadcrumb">
<li><i class="fa fa-dashboard"></i> خانه</li>
<li class="active">صفحه</li>
</ol>
</section>
<!-- Main content -->
<section class="content container-fluid">
<!--------------------------
| Your Page Content Here |
-------------------------->
#RenderBody()
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<!-- Main Footer -->
<footer class="main-footer text-left">
<strong>Copyleft © 2014-2017 Almsaeed Studio & Alireza Hosseinizadeh</strong>
</footer>
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
<!-- Create the tabs -->
<ul class="nav nav-tabs nav-justified control-sidebar-tabs">
<li class="active"><i class="fa fa-home"></i></li>
<li><i class="fa fa-gears"></i></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<!-- Home tab content -->
<div class="tab-pane active" id="control-sidebar-home-tab">
<h3 class="control-sidebar-heading">فعالیت ها</h3>
<ul class="control-sidebar-menu">
<li>
<a href="javascript:;">
<i class="menu-icon fa fa-birthday-cake bg-red"></i>
<div class="menu-info">
<h4 class="control-sidebar-subheading">تولد غلوم</h4>
<p>۲۴ مرداد</p>
</div>
</a>
</li>
</ul>
<!-- /.control-sidebar-menu -->
<h3 class="control-sidebar-heading">پیشرفت کارها</h3>
<ul class="control-sidebar-menu">
<li>
<a href="javascript:;">
<h4 class="control-sidebar-subheading">
آپدیت لاراول
<span class="pull-left-container">
<span class="label label-danger pull-left">70%</span>
</span>
</h4>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-danger" style="width: 70%"></div>
</div>
</a>
</li>
</ul>
<!-- /.control-sidebar-menu -->
</div>
<!-- /.tab-pane -->
<!-- Stats tab content -->
<div class="tab-pane" id="control-sidebar-stats-tab">تب وضعیت</div>
<!-- /.tab-pane -->
<!-- Settings tab content -->
<div class="tab-pane" id="control-sidebar-settings-tab">
<form method="post">
<h3 class="control-sidebar-heading">تنظیمات عمومی</h3>
<div class="form-group">
<label class="control-sidebar-subheading">
گزارش کنترلر پنل
<input type="checkbox" class="pull-left" checked>
</label>
<p>
ثبت تمامی فعالیت های مدیران
</p>
</div>
<!-- /.form-group -->
</form>
</div>
<!-- /.tab-pane -->
</div>
</aside>
<!-- /.control-sidebar -->
<!-- Add the sidebar's background. This div must be placed
immediately after the control sidebar -->
<div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->
<!-- REQUIRED JS SCRIPTS -->
<!-- jQuery 3 -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/adminlte.min.js"></script>
</body>
</html>

problem solved . The address of the scripts in the _layout file and in the link tags must start with / ~
like this:
href="~/dist/...."

problem solved . The address of the scripts in the _layout file and in the head tag must start with / ~
like this:
href="~/dist/...."

AngularJS Mobile View Issues

I am building a SPA with AngularJS, everything is working as I hoped except that I am running into issues regarding its appearance on mobile (I am using twitter bootstrap 3). The two issues in particular are:
Vertical scrolling on mobile is very jerky and sometimes gets stuck
On some pages the users mobile screen automatically zooms in on an input field, which is fine. However, I want to undo this zoom when they change partial; because otherwise when the user gets to the next partial everything is too zoomed.
I have had a look around and can't see an answer to these. I haven't put code in here, as it pretty much effects the whole site :) However, for a demonstration of the issue you can see on the site itself: www.objectivemoney.co.za.
Any help would be much appreciated!
UPDATE TO INCLUDE CODE
Index.html
<!DOCTYPE html>
<html lang="en-us" ng-app="omApp">
<head>
<title>OM</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Find your perfect planner | Quickly search for and compare verified, customer reviewed planners in your area with OM">
<meta name="keywords" content="search,financial,planner,compare,verified,planners">
<!-- load bootstrap and fontawesome via CDN -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="Font-Awesome-master/css/font-awesome.min.css" />
<link href='//fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Merriweather:700' rel='stylesheet' type='text/css'>
<link href='toaster/toaster.css' rel='stylesheet' type='text/css'>
<!-- load CSS files locally -->
<link rel="stylesheet" href="style-min.css" />
<link rel="stylesheet" href="angular-slider-master/slider.css" />
<link rel="stylesheet" href="animate.min.css" />
<!-- sharethis -->
<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="https://ws.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "XXXXXXXXXXXXX", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>
<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-XXXXXXX-X', { 'cookieDomain': 'none' });
</script>
</head>
<body>
<!-- create a navbar that is collapsable in a mobile view -->
<nav id="navbar-example" class="navbar navbar-inverse navbar-static" role="navigation" ng-controller="searchController">
<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="#/"> <img id="navbarlogo" src="./img/logo/logo-white.png"></a>
</div>
<div collapse="isCollapsed" class="navbar-collapse bs-js-navbar-collapse">
<ul class="nav navbar-nav">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Search</li>
<li>Resources</li>
<li>Planner Registration</li>
</ul>
</ul>
<!-- create a logout sign that shows when a user is logged in, position this on the right of the navbar -->
<ul ng-show="authenticated === true" class="nav navbar-nav pull-right logoutlink ng-cloak">
<ul class="nav navbar-nav navbar-right">
<li><a ng-controller="searchController" ng-click="logout(); changeAuth()">Logout</a></li>
</ul>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- Create container for app views -->
<div class="wrapper">
<!-- set empty div for views, autoscroll means that page scrolls to top when user clicks through -->
<div ng-view autoscroll="true"></div>
<div class="push"></div>
</div>
<div class="footer">
<footer>
<div>
<div id="footershare" class="col-sm-6">
<span class='st_twitter_large' displayText='Tweet'></span>
<span class='st_facebook_large' displayText='Facebook'></span>
<span class='st_linkedin_large' displayText='LinkedIn'></span>
<span class='st_googleplus_large' displayText='Google +'></span>
<span class='st_email_large' displayText='Email'></span>
</div>
<div id="footercontact" class="col-sm-6">
<p>Contact: xxx#xxx.co.za | Copyright ©</p>
</div>
</div>
</footer>
</div>
<div class="ng-cloak" ng-controller="searchController">
<div ng-show="showBar" class="signupBox">
<p id ="signupBox-text"><span ng-click="setCloseBar();setShowBar()" class="signupBox-close pull-right"><b>×</b></span><a id ="signupBox-text" href="#/mailinglist" ng-click="setCloseBar();setShowBar()">Join Our Mailing List To Stay Up To Date With The Latest Planning Advise And News.</a></p>
</div>
</div>
<!-- load angular and additional precompiled services -->
<script src="//code.angularjs.org/1.4.0-rc.2/angular.min.js"></script>
<script src="//code.angularjs.org/1.4.0-rc.2/angular-route.min.js"></script>
<script src="//code.angularjs.org/1.4.1/angular-animate.min.js"></script>
<script src="//code.angularjs.org/1.4.0-rc.2/angular-messages.min.js"></script>
<script src="//code.angularjs.org/1.4.0/angular-resource.min.js"></script>
<script src="//maps.googleapis.com/maps/api/js?libraries=places"></script>
<script src="vs-google-autocomplete.min.js"></script>
<script src="angulartics.min.js"></script>
<script src="angulartics-ga.min.js"></script>
<script src="toaster/toaster.js"></script>
<script src="ui-bootstrap-0.13.0.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script>
<script src="angular-slider-master/slider.js"></script>
<script src="bower_components/ng-optimizely/ng-optimizely.js"></script>
<!-- load angular app -->
<script src="modules/omApp.js"></script>
<!-- load custom services -->
<script src="services/services.min.js"></script>
<script src="services/data.min.js"></script>
<!-- load angular controllers -->
<script src="controllers/minified/searchController.js"></script>
<script src="controllers/minified/resourcesController.js"></script>
<script src="controllers/minified/plannerRegController.js"></script>
<!-- directives -->
<script src="directives/directive.min.js"></script>
</body>
<!-- toaster-container that shows when a user log ins and log out [CURRENTLY THE TOASTER SHOWS FOR TOO LONG AND TIME OUT FUNCTION DOES NOT CHANGE TOASTER DISPLAY TIME] -->
<toaster-container toaster-options="{'time-out': 2000}"></toaster-container>
</html>
Home Partial
<div class="jumbotron">
<div class="container">
<div class="homepage-jumbo-info col-sm-offset-7 col-sm-5">
<div class="homepage-jumbo-info-header">
<h1>We'll help you find a <br><b> planner</b>, hassle-free</h1>
</div>
<div class="homepage-jumbo-info-box">
<h2 class="homepage-jumbo-info-boxheader"><b>Compare verified planners</b> in your area</h2>
<input vs-google-autocomplete="options"
ng-model="searchquery.address.name"
vs-street-number="searchquery.address.streetNumber"
vs-street="searchquery.address.street"
vs-city="searchquery.address.city"
vs-state="searchquery.address.state"
vs-country-short="searchquery.address.countryCode"
vs-country="searchquery.address.country"
vs-latitude="searchquery.lat"
vs-longitude="searchquery.long"
type="text"
name="address"
id="address"
class="form-control homepage-jumbo-info-boxinput"
placeholder="In which city / suburb do you live?">
</div>
<div class="form-group homepage-searchbutton homepage-jumbo-info-boxbutton">
<p id="homepage-searchbutton-text">SEARCH NOW <i class="fa fa-search"></i></p>
</div>
</div>
</div>
</div>
<div class="container-fluid homepage-body-steps">
<div class="col-sm-12 homepage-body-header">
<h2><b>Find The Right Planner With 3 Simple Steps</b></h2>
</div>
<div class="col-sm-4 homepage-body-steps-info">
<h4 class="homepage-body-icons"><img id="homepage-body-icons" src="img/icons/search.png"></img></h4>
<h3 class="homepage-body-icons-title"><b>SEARCH</b></h3>
<p class="homepage-body-icons-text">Search for independently verified planners in your local area that can meet your requirements.</p>
</div>
<div class="col-sm-4 homepage-body-steps-info">
<h4 class="homepage-body-icons"><img id="homepage-body-icons" src="img/icons/compare.png"></img></h4>
<h3 class="homepage-body-icons-title"><b>COMPARE</b></h3>
<p class="homepage-body-icons-text">Compare planners based on their offerings, qualifications and actual customer reviews.</p>
</div>
<div class="col-sm-4 homepage-body-steps-info">
<h4 class="homepage-body-icons"><img id="homepage-body-icons" src="img/icons/schedule.png"></img></h4>
<h3 class="homepage-body-icons-title"><b>SCHEDULE</b></h3>
<p class="homepage-body-icons-text">Click to automatically schedule a meeting with your chosen planner at a time that suits you.</p>
</div>
</div>
<div class="row homepage-body-carousel-header">
<div class="col-sm-12 homepage-body-header">
<h2><b>Our Planners Partner With The Biggest Companies In South Africa</b></h2>
</div>
</div>
<div class="row homepage-body-carousel">
<carousel interval="myInterval" disable-animation="true">
<slide ng-repeat="slide in slides" active="slide.active">
<img ng-src="img/sitephotos/{{slide.image}}.png" alt="{{slide.image}}" style="margin:auto;">
</slide>
</carousel>
</div>
<div class="container-fluid homepage-body-video">
<p class="homepage-body-video-text">Watch our short video to see how it works in more detail</p>
<div class="videoWrapper">
<!-- Copy & Pasted from YouTube -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/-rsr45s2mws" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="container-fluid homepage-body-steps">
<div class="col-sm-12 homepage-body-header">
<h2><b>How OM Helps You</b></h2>
</div>
<div class="row">
<div class="col-sm-4 homepage-body-steps-info">
<h4 class="homepage-body-icons"><img id="homepage-body-icons-how" src="img/icons/independent.png"></img></h4>
<h3 class="homepage-body-icons-title"><b>INDEPENDENT</b></h3>
<p class="homepage-body-icons-text">All of our advisers have been independently verified, helping you to avoid any sharks.</p>
</div>
<div class="col-sm-4 homepage-body-steps-info">
<h4 class="homepage-body-icons"><img id="homepage-body-icons-how" src="img/icons/user-review.png"></img></h4>
<h3 class="homepage-body-icons-title"><b>USER REVIEWED</b></h3>
<p class="homepage-body-icons-text">All of our advisers are reviewed by genuine users, helping you make sure that the adviser is the right match for you.</p>
</div>
<div class="col-sm-4 homepage-body-steps-info">
<h4 class="homepage-body-icons"><img id="homepage-body-icons-how" src="img/icons/tailored.png"></img></h4>
<h3 class="homepage-body-icons-title"><b>TAILORED</b></h3>
<p class="homepage-body-icons-text">Search functionality lets you specify your ideal adviser.</p>
</div>
</div>
<div class="row">
<div class="col-sm-offset-2 col-sm-4 homepage-body-steps-info">
<h4 class="homepage-body-icons"><img id="homepage-body-icons-how" src="img/icons/quick.png"></img></h4>
<h3 class="homepage-body-icons-title"><b>QUICK</b></h3>
<p class="homepage-body-icons-text">No need for lengthy internet research, enquiry calls or getting hold of friends and family to help you.</p>
</div>
<div class="col-sm-offset-right-2 col-sm-4 homepage-body-steps-info">
<h4 class="homepage-body-icons"><img id="homepage-body-icons-how" src="img/icons/free-2.png"></img></h4>
<h3 class="homepage-body-icons-title"><b>FREE</b></h3>
<p class="homepage-body-icons-text">Our service is entirely free of charge.</p>
</div>
</div>
</div>
Jack

Stylesheets not showing up for Ionic App

I've built a small Ionic App in WebStorm using a simple tutorial for building a side-menu. It runs and everything when I bring it up in an emulator using Cordova, but none of the styling from Ionic seems to be working, even though it all appears to be part of my project and is referenced in the index file.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="roo">
<ion-side-menus>
<ion-side-menu-content ng-controller="NavCtrl">
<ion-header-bar class="bar-positive">
<div class="buttons">
<button class="button icon button-clear ion-navicon-round"
ng-click="toggleLeft()"></button>
</div>
<h1 class="title">Sidemenu</h1>
</ion-header-bar>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-list>
<ion-item>Current Location</ion-item>
</ion-list>
<ion-list>
<ion-item>Messages</ion-item>
</ion-list>
<ion-list>
<ion-item>Travel</ion-item>
</ion-list>
<ion-list>
<ion-item>Profile</ion-item>
</ion-list>
<ion-list>
<ion-item>Interests</ion-item>
</ion-list>
</ion-side-menu>
</ion-side-menus>
</body>
</html>

Making the following changes seemed to fix things, I also changed this into a template, but that had nothing to do with the fix:
<ion-side-menus>
<ion-side-menu-content class="has-header" ng-controller="NavCtrl">
<ion-header-bar class="bar-positive">
<div class="buttons">
<button class="button icon button-clear ion-navicon-round"
ng-click="toggleLeft()"></button>
</div>
<h1 class="title" style="margin-left: 0">Roo</h1>
</ion-header-bar>
</ion-side-menu-content>
<ion-side-menu side="left">
<div class="list">
<a class="item item-icon-left" href="#">
<i class="icon roo-blue ion-home"></i>
<i class="roo-blue">Current Location</i>
</a>
<a class="item item-icon-left" href="#">
<i class="icon roo-blue ion-chatbubbles"></i>
<i class="roo-blue">Messages</i>
</a>
<a class="item item-icon-left" href="#">
<i class="icon roo-blue ion-plane"></i>
<i class="roo-blue">Travel</i>
</a>
<a class="item item-icon-left" href="#">
<i class="icon roo-blue ion-person"></i>
<i class="roo-blue">Profile</i>
</a>
<a class="item item-icon-left" href="#">
<i class="icon roo-blue ion-heart"></i>
<i class="roo-blue">Interests</i>
</a>
</div>
</ion-side-menu>

I am having similar a similar problem while following the official Ionic guide at the link below.
http://www.ionicframework.com/docs/guide/
Don't understand why the CSS files are not used in the app.

Resources