AngularJS Material md-list hight completely different in chrome - javascript

I'm fairly new to using AngularJS and I'm working with Angular Materials, and I've come across an issue that I cannot understand.
When writing a md-list, it renders fine in Firefox, and IE (11), but in chrome, each md-list-item takes the full height of the window, but only when I'm running the code for my site.
If I view other pages (eg. the Angular Material demos), or put the code into a shareable editor, like codepen, or jsfiddle, they render fine.
The code below is is a test template which displays incorrectly
<html lang="en" >
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">
</head>
<body ng-app="BlankApp" ng-cloak>
<div style="height:400px;width:500px;">
<md-list>
<md-list-item ng-click="null">Item 1</md-list-item>
</md-list>
<md-list>
<md-list-item ng-click="null">Item 2</md-list-item>
</md-list>
<md-list>
<md-list-item ng-click="null">Item 3</md-list-item>
</md-list>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>
<script type="text/javascript">
angular.module('BlankApp', ['ngMaterial']);
</script>
</body>
</html>
CodePen : http://codepen.io/anon/pen/pyqKZr
Live Demo of the failed layout: http://angular.deathwishgame.co.uk/
Why does this only happen when rendering my own page alone, what am I doing wrong?

You are running into https://github.com/angular/material/issues/8094
The only workaround is to give the list items a height/max-height.
There seems to be a pull-request pending review.

Use angular-material version 1.0.9 instead of 1.1.0. Then, it will work fine.
Try running this code , I have corrected your code which you have hosted
<html lang="en" >
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Angular Material style sheet -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.9/angular-material.min.css">
</head>
<body ng-app="BlankApp" ng-cloak>
<!--
Your HTML content here
-->
<div style="height:400px;width:500px;">
<md-list>
<md-list-item ng-click="null">Item 1</md-list-item>
<md-list-item ng-click="null">Item 2</md-list-item>
<md-list-item ng-click="null">Item 3</md-list-item>
</md-list>
</div>
<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.9/angular-material.min.js"></script>
<!-- Your application bootstrap -->
<script type="text/javascript">
/**
* You must include the dependency on 'ngMaterial'
*/
angular.module('BlankApp', ['ngMaterial']);
</script>
</body>
</html>

You can try to put all the md-list-item in just one md-list.
<div style="height:400px;width:500px;">
<md-list>
<md-list-item ng-click="null">Item 1</md-list-item>
<md-list-item ng-click="null">Item 2</md-list-item>
<md-list-item ng-click="null">Item 3</md-list-item>
</md-list>
</div>

<html lang="en" >
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<script language="javascript">
angular
.module('firstApplication', ['ngMaterial'])
.controller('listController', listController);
function listController ($scope) {
var self = this;
self.allContacts = loadContacts();
self.contacts = [self.allContacts[0]];
function loadContacts() {
var contacts = [
'Roberto Karlos',
'Bob Crestor',
'Nigel Rick',
'Narayana Garner'
];
return contacts.map(function (c, index) {
var cParts = c.split(' ');
var contact = {
name: c,
email: cParts[0][0].toLowerCase() + '.' + cParts[1].toLowerCase() + '#example.com',
image: 'http://lorempixel.com/50/50/people?' + index
};
contact._lowername = contact.name.toLowerCase();
return contact;
});
}
}
</script>
</head>
<body ng-app="firstApplication">
<div id="listContainer" ng-controller="listController as ctrl" layout="column" ng-cloak>
<md-content>
<md-list>
<md-subheader class="md-no-sticky">Contacts</md-subheader>
<md-list-item class="md-2-line contact-item" ng-repeat="(index, contact) in ctrl.allContacts"
ng-if="ctrl.contacts.indexOf(contact) < 0">
<img ng-src="{{contact.image}}" class="md-avatar" alt="{{contact.name}}" />
<div class="md-list-item-text compact">
<h3>{{contact.name}}</h3>
<p>{{contact.email}}</p>
</div>
<md-divider ng-if="!$last"></md-divider>
</md-list-item>
</md-list>
<md-list>
<md-subheader class="md-no-sticky">Contacts (With Insets)</md-subheader>
<md-list-item class="md-2-line contact-item" ng-repeat="(index, contact) in ctrl.allContacts"
ng-if="ctrl.contacts.indexOf(contact) < 0">
<img ng-src="{{contact.image}}" class="md-avatar" alt="{{contact.name}}" />
<div class="md-list-item-text compact">
<h3>{{contact.name}}</h3>
<p>{{contact.email}}</p>
</div>
<md-divider md-inset ng-if="!$last"></md-divider>
</md-list-item>
</md-list>
</md-content>
</div>
</body>
</html>

Related

angular js Bootstrap not working with multiple rows and columns

I am making a basic blackjack game with angularjs and using bootstrap for the layout however I cannot seem to make it work.
What I want is a heading across the top, the content of the game in the middle and left and a list of current players on the right but isn't everything is running down the page.
My code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blackjack</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">
<script src="./angular.js"></script>
<script src="./angular-animate.js"></script>
<script src="./angular-touch.js"></script>
<script src="./ui-bootstrap.js"></script>
<script src="./app.js"></script>
</head>
<body ng-app="myApp">
<div class="container-fluid" ng-controller="main">
<div class = "row">
<div class="col-sm-12">
<h1>Black Jack</h1>
</div>
</div>
<div class="row">
<div class = "col-sm-10">
<div ng-include="'play.html'" my-replace>
</div>
<div ng-include="'next.html'" my-replace>
</div>
<div ng-include="'start.html'" my-replace> </div>
</div>
<div class="col-sm-2">
<ul class = "row">
<li class="col-sm-12">
<h2>Players</h2>
</li>
<li class = "col-sm-12" ng-repeat="player in players">
<span>{{player.name}}: <button ng-if="!started" ng-click='removePlayer(player)'>Remove</button></span>
</li>
</ul>
</div>
</div>
</div>
<!--
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"> </script>
<script>
div = $("div");
(function add(div){
div.each(function(i, val){
this.innerHTML=this.nodeName+" open "+this.className+" "+this.innerHTML+" "+this . nodeName+" close"
add($(this).children());
})})(div);
</script>
-->
</body>
</html>
The my-replace directive strips away the wrapping div of the ng-includes once their content loads.
The js code at the bottom is a quick debugger so I can see how the html was being interpreted as firebug light doesn't work with angularjs.
I've tried with multiple versions of bootstrap too
Why isn't the bootstrap working?

Issue in creating a simple app using Angular-Material

I'm trying to create an app that uses the Angular Material navigation bar that can be found on this link.
I'm fairly new to AngularJS and I cannot figure out when I load the app why I am presented with a blank page.
Here is my code:
index.html
<!DOCTYPE html>
<html ng-app="navBarDemoBasicUsage">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller="AppCtrl" ng-cloak>
<md-content class="md-padding">
<md-nav-bar
md-selected-nav-item="currentNavItem"
nav-bar-aria-label="navigation links">
<md-nav-item md-nav-click="goto('page1')" name="page1">
Page One
</md-nav-item>
<md-nav-item md-nav-click="goto('page2')" name="page2">
Page Two
</md-nav-item>
<md-nav-item md-nav-click="goto('page3')" name="page3">
Page Three
</md-nav-item>
<!-- these require actual routing with ui-router or ng-route, so they
won't work in the demo
<md-nav-item md-nav-href="#page4" name="page5">Page Four</md-nav-item>
<md-nav-item md-nav-sref="app.page5" name="page4">Page Five</md-nav-item>
You can also add options for the <code>ui-sref-opts</code> attribute.
<md-nav-item md-nav-sref="page6" sref-opts="{reload:true, notify:true}">
Page Six
</md-nav-item>
-->
</md-nav-bar>
<div class="ext-content">
External content for `<span>{{currentNavItem}}</span>`.
</div>
<md-checkbox ng-model="disableInkBar">Disable Ink Bar</md-checkbox>
</md-content>
</div>
</body>
</html>
script.js
(function() {
'use strict';
angular.module('navBarDemoBasicUsage', ['ngMaterial'])
.controller('AppCtrl', AppCtrl);
function AppCtrl($scope) {
$scope.currentNavItem = 'page1';
}
})();
style.css
.navBardemoBasicUsage md-content .ext-content {
padding: 50px;
margin: 20px;
background-color: #FFF2E0;
}
You missed to include several JSscripts in your page.
Angular Material requires to include angular-materials.js. You will also need angular-animate.js and angular-aria.js.
Just add them and it should work.
angular.module('navBarDemoBasicUsage', ['ngMaterial']).controller('AppCtrl', AppCtrl);
function AppCtrl($scope) {
$scope.currentNavItem = 'page1';
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-aria.js"></script>
<script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>
<link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.css
">
<div ng-app="navBarDemoBasicUsage">
<div ng-controller="AppCtrl" ng-cloak>
<md-content class="md-padding">
<md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links">
<md-nav-item md-nav-click="goto('page1')" name="page1">
Page One
</md-nav-item>
<md-nav-item md-nav-click="goto('page2')" name="page2">
Page Two
</md-nav-item>
<md-nav-item md-nav-click="goto('page3')" name="page3">
Page Three
</md-nav-item>
</md-nav-bar>
<div class="ext-content">
External content for `<span>{{currentNavItem}}</span>`.
</div>
<md-checkbox ng-model="disableInkBar">Disable Ink Bar</md-checkbox>
</md-content>
</div>
</div>
You are using angular material directives like this
md-content
but there is no place where you add it to the page. Try to remove firstly all stuff connected to angular material and check application.

how to make organize file in angularjs?

I was trying this in my view
but it come like this:
I just want 10 file and make new line to put another 10 file
heres my view
md-content.md-whiteframe-1dp
.glyph layout="row"
div layout="column" layout-align="center center" ng-repeat="doc in ctrl.documents" style="text-align: center;"
div
md-icon.material-icons.md-48 insert_drive_file
span.step style="padding-left:48;"
| test
Using ng-repeat-start and ng-repeat-end you can achieve, This is how it works in angular
angular.module('notesApp', [])
.controller('MainCtrl', ['$scope', function ($scope) {
$scope.docs = [1, 2, 3,4, 5,6,7,8,9,10,11,12,13,14,15, 16,17,18,19,20];
}]);
<html lang = "en">
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<link rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app = "notesApp" ng-cloak>
<div ng-controller="MainCtrl">
<div style="display: inline" ng-repeat-start="doc in docs"><i class="glyphicon glyphicon-file"></i>{{doc}}</div>
<div ng-repeat-end ng-if="($index + 1) % 10 == 0"></div>
</div>
</body>
</html>

Grid System doesn't shows color as in documentation

I just started to use angular-material.
I was trying out grid elements in my example, I am testing flex attribute. In the example, this shows three different color for each flex element, but in the codepen, I am not getting those colors.
Here is my code:
HTML:
<html lang="en" ng-app="StarterApp">
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
<meta name="viewport" content="initial-scale=1" />
</head>
<body layout="column" ng-controller="AppCtrl">
<md-toolbar layout="row">
<div class="md-toolbar-tools">
<md-button ng-click="toggleSidenav('left')" hide-gt-sm class="md-icon-button">
<md-icon aria-label="Menu" md-svg-icon="https://s3-us-west-2.amazonaws.com/s.cdpn.io/68133/menu.svg"></md-icon>
</md-button>
<h1>Hello World</h1>
</div>
</md-toolbar>
<div layout="row">
<div flex>
[flex]
</div>
<div flex>
[flex]
</div>
<div flex hide-sm>
[flex]
</div>
</div>
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.js"></script>
</body>
</html>
JS:
var app = angular.module('StarterApp', ['ngMaterial']);
app.controller('AppCtrl', ['$scope', '$mdSidenav', function($scope, $mdSidenav){
$scope.toggleSidenav = function(menuId) {
$mdSidenav(menuId).toggle();
};
}]);
Please help.
The css is not included in the example. The colors are there to denote the differences between grid size. You can color them using CSS3 nth child selector. You cand find documentation here: http://www.w3schools.com/cssref/sel_nth-child.asp
As an example for your code you can have
#parentDivId div:nth-child(1) {
background: red;
}
#parentDivId div:nth-child(2) {
background: blue;
}
#parentDivId div:nth-child(3) {
background: yellow;
}
So an and so forth. Rename parentDivId with the ID of parent DIV.
DEMO : http://codepen.io/anon/pen/epyQVN

Onsen UI navigator

I'm looking for learn OnsenUi to replace Jquery in my phonegap project.
I want to make a login page and after switch to a main page.
To do that there is my html code :
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>My App</title>
<link rel="stylesheet" href="lib/onsen/css/onsenui.css">
<link rel="stylesheet" href="styles/topcoat-mobile-onsen-blue.css">
<link rel="stylesheet" href="styles/app.css"/>
<script src="lib/onsen/js/angular/angular.js"></script>
<script src="lib/onsen/js/onsenui.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-controller="MyController as ctrl">
<ons-navigator title="Navigator" var="myApp.myNavigator">
<ons-page id="connexion.html">
<ons-toolbar>
<div class="center">Page 1</div>
</ons-toolbar>
<ons-row style="margin-top: 50px;">
<ons-col align="left">
<div>
<section style="padding: 8px">
<p> Identifiant </p>
<input class="text-input" id="id-input" ng-model="ctrl.id" style="display: block; width: 100%">
</section>
<section style="padding: 8px">
<p> Password </p>
<input type="password" class="text-input" id="password-input" ng-model="ctrl.password" style="display: block; width: 100%">
</section>
<section>
Resté connecté
<ons-checkbox ng-model="ctrl.answer" ng-true-value="true" ng-false-value="false" ng-init="ctrl.answer='true'">
</ons-checkbox>
</section>
<section style="padding: 8px">
<ons-button modifier="large" style="display: block; width: 100%" ng-click="ctrl.connexion()">Connexion</ons-button>
</section>
</div>
</ons-col>
</ons-row>
</hr>
identifiant = {{ctrl.id}}
</hr>
password = {{ctrl.password}}
</ons-page>
</ons-navigator>
<ons-template id="app.html">
<ons-page>
<ons-toolbar>
<div class="center">Page 2</div>
</ons-toolbar>
<h1>APP</h1>
</ons-page>
</ons-template>
</body>
</html>
`
And my js :
(function(){
var mbdGlobal = new Object();
var app = angular.module('myApp', ['onsen.directives']);
app.controller('MyController', function($scope, $window){
this.id = "";
this.password = "";
this.connexion = function(){
mbdGlobal.id = this.id;
mbdGlobal.password = this.password;
mbdGlobal.stayConnected = JSON.parse(this.answer);
alert(JSON.stringify(mbdGlobal));
//myNavigator.pushPage("app.html", { animation: "slide" });
};
});
})();
But when i start the application i only see the second page.
Plz can you help me because the web site of Onsen don't give real exemple.
Thanks.
You can add the default loading page by adding the attribute page inside the navigator. Assuming that your login page name is login.html, you should write something like this
<ons-navigator var="myNavigator" page="login.html"></ons-navigator>
Don't put the login in the index.html, hope it helps.
If your project use slide menu template you can easily do it by setting the main page, refer the following code =)
<ons-sliding-menu menu-page="menu.html" main-page="login.html" side="left"
var="menu" type="reveal" max-slide-distance="90%" swipeable>
</ons-sliding-menu>

Categories