I'm using Angularjs 1.5 with Angular Material 1.0.5 to create a mock table. The issue I have is I can't get the child component 'cell' background-color to fill out 100% in height of the parent. Here is my jsfiddle. Any help on how to do this is appreciated?
JSFIDDLE
HTML
<div ng-app="myApp" ng-controller="mainCtrl">
<style>
.table-row{
border-top: 1px solid black;
border-left: 1px solid black;
border-bottom: 1px solid black;
}
.table-cell{
border-right:1px solid black;
}
</style>
<script type="text/ng-template" id="/table">
<div layout='column'>
<div ng-repeat='col in [0,1,2]'>
<div layout="row" class='table-row'>
<div layout-align='center center' ng-repeat='row in [0,1,2]' flex class='table-cell'>
<div ng-if='$odd' flex>
<cell></cell>
</div>
<div ng-if='$even'flex>
TEST</br>
TEST</br>
</div>
</div>
</div>
</div>
</div>
</script>
<script type="text/ng-template" id="/cell">
<div style='background-color:red'>
CELL
</div>
</script>
<h3>
{{name}}
</h3>
<table>
</table>
</div><!--end app-->
You need to add a hierarchy of layout="column/row" attributes. They are the containers forflex`, otherwise your flex won't have any effect.
https://jsfiddle.net/t8pssapu/
Related
How to style material js component in inline style or my local css file.I have tried using defining class in directive like below code,
<md-card style="width: 20px;">
Why not use flex?
<div layout="row">
<md-card flex="20"></md-card>
</div>
To style the md-card, give a class or id to the md-card tag and apply CSS to it.
Refer to https://codepen.io/narmadamurali02/pen/LYrzwJz
HTML code
<section ng-app="app">
<article ng-controller="MainCtrl">
<div layout="row" layout-align="start start" layout-fill>
<md-card id="preview-table" class="preview-outer-container" style="width: 550px; height: 370px;">
<md-toolbar id="preview-header">
<div>card header
</div>
</md-toolbar>
<md-card-content class="pa-5">
<div>
card body
</div>
<md-card-content />
</md-card>
</div>
</article>
</section>
CSS code
.preview-outer-container {
box-shadow: none;
border: 1px solid #ddd;
}
#preview-header {
background: #000;
border-bottom: 1px solid $border-color;
font-size: 12px;
min-height: 30px;
color: #fff;
height: 25px;
cursor: move;
padding: 10px;
}
JS code
var app = angular.module("app", ["ngMaterial"]);
app.controller("MainCtrl", ctrl);
function ctrl($scope, $element) {}
In the above example, I have removed the box-shadow to md-card and for md-toolbar I have overridden the default color blue to black.
Output:
https://i.stack.imgur.com/fdvfL.png
This my code.... in this material css is not geting applied to input fields and they are appearing as normal html inputs.
I have used material css and js cdns and both of them are same versions. I dont know why its not working. I checked other posts in stackoverflow but i didn't got the solution. so, Somebody please help me with this thing...
var app = angular.module('sdp', ['ngMaterial']).config(function ($mdThemingProvider) {
$mdThemingProvider.theme('custom')
.primaryPalette('blue')
.accentPalette('indigo');
}).controller('MyCtrl', function ($scope) {
});
.header {
text-align: center;
height: 80px;
margin-left: 555px !important;
line-height: 80px;
color:white;
}
body {
width: 100%;
height: 100%;
margin: 0;
font-family: Verdana,sans-serif;
font-size: 12px;
color: #111;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #94bddb), color-stop(100%, #d9edf9));
background-size: cover;
}
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Login to Data Portal</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-aria.min.js"></script>
<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/angular_material/1.0.0/angular-material.min.js"></script>
</head>
<body>
<div ng-app="sdp" ng-controller="MyCtrl">
<md-toolbar style="background: #174a7a;">
<div class="md-toolbar-tools">
<h1 class="header">LOGIN</h1>
</div>
</md-toolbar>
</div>
<div>
<md-card >
<md-card-content>
<md-card-title>
<md-card-title-text>
<span class="md-headline">Card</span>
</md-card-title-text>
</md-card-title>
<ng-form name="colorForm">
<div layout-gt-xs="row">
<md-input-container>
<label> Username </label>
<input ng-model="un" required>
</md-input-container>
<md-input-container>
<label> Password </label>
<input ng-model="pswd" required>
</md-input-container>
</div>
</ng-form>
</md-card-content>
</md-card>
</div>
</body>
</html>
You've placed the ng-app on your toolbar div, so your AngularJS app is only working inside that part of the page.
Remove it from there and add it to your body tag to have it affect all of your page, like so:
<body ng-app="sdp">
<div ng-controller="MyCtrl">
...
Here's the full code with the change:
var app = angular.module('sdp', ['ngMaterial']).config(function ($mdThemingProvider) {
$mdThemingProvider.theme('custom')
.primaryPalette('blue')
.accentPalette('indigo');
}).controller('MyCtrl', function ($scope) {
});
.header {
text-align: center;
height: 80px;
margin-left: 555px !important;
line-height: 80px;
color:white;
}
body {
width: 100%;
height: 100%;
margin: 0;
font-family: Verdana,sans-serif;
font-size: 12px;
color: #111;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #94bddb), color-stop(100%, #d9edf9));
background-size: cover;
}
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Login to Data Portal</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-aria.min.js"></script>
<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/angular_material/1.0.0/angular-material.min.js"></script>
</head>
<body ng-app="sdp">
<div ng-controller="MyCtrl">
<md-toolbar style="background: #174a7a;">
<div class="md-toolbar-tools">
<h1 class="header">LOGIN</h1>
</div>
</md-toolbar>
</div>
<div>
<md-card >
<md-card-content>
<md-card-title>
<md-card-title-text>
<span class="md-headline">Card</span>
</md-card-title-text>
</md-card-title>
<ng-form name="colorForm">
<div layout-gt-xs="row">
<md-input-container>
<label> Username </label>
<input ng-model="un" required>
</md-input-container>
<md-input-container>
<label> Password </label>
<input ng-model="pswd" required>
</md-input-container>
</div>
</ng-form>
</md-card-content>
</md-card>
</div>
</body>
</html>
I am creating an album where I can store images. I have attached a simple HTML for sample album. I was hoping, once the user finishes creating an album and he wants to create another one, he simply presses a plus sign. That way another template appears which is same as the one I have included in the snippet. Again, once the user clicks plus another template generates. Is there any way I can achieve this functionality? I can think of doing this with Jquery but I have to write the whole divs which is not efficient I guess. For instance, here is an example : using jquery . I was thinking if there is an efficient way of doing. That way I dont need to code the HTML each time. I am doing this using angularJs 1.x for that. Any suggestion or help is appreciated. Thank you for your time.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div style="background-color: yellow; width: 40%">
<div>
<h1>1st Album </h1>
<input type="text" name="albumName">
<input type="submit">
</div>
<div style="margin-top: 20px">
<input type="file" name="photos">
</div>
<div style="margin-top: 20px; font-size: 40px; font-weight: bold; padding: 20px; background-color: aqua; width: 20%">
+
</div>
</div>
</body>
</html>
One thing you can do is create a object array and loop the array using ng-repeat directive in the html.
create a object array like this
$scope.items = [{
name : "1 Album",
albumName : ""
} ]
Then use ng repeat in the DOM like this
<div ng-app="app" ng-controller="ctrl" style="background-color: yellow;width: 40%">
<div ng-repeat="item in items">
<div>
<h1> {{item.name}}</h1>
<input type="text" name="item.albumName">
<input type="submit">
</div>
<div style="margin-top: 20px">
<input type="file" name="photos">
</div>
</div>
<div style="margin-top: 20px; font-size: 40px; font-weight: bold; padding: 20px; background-color: aqua; width: 20%" ng-click="addItem()">
+
</div>
In the plus button create a function that add new object to the array
$scope.addItem = function(){
$scope.items.push({
name : $scope.items.length+1 +" Album",
albumName : ""
})
}
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.items = [{
name : "1 Album",
albumName : ""
} ]
$scope.addItem = function(){
$scope.items.push({
name : $scope.items.length+1 +" Album",
albumName : ""
})
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl" style="background-color: yellow;width: 40%">
<div ng-repeat="item in items">
<div>
<h1> {{item.name}}</h1>
<input type="text" name="item.albumName">
<input type="submit">
</div>
<div style="margin-top: 20px">
<input type="file" name="photos">
</div>
</div>
<div style="margin-top: 20px; font-size: 40px; font-weight: bold; padding: 20px; background-color: aqua; width: 20%" ng-click="addItem()">
+
</div>
</div>
Using ngDraggable/Angular Material and having problems dragging objects within the parent DIV container.
The DIV style has a defined height and an overflow-y of "scroll", and the data is a list of employees.
I was expecting the DIV tag to scroll as I dragged my object down the list, but the scrolling won't trigger.
Stuck for a solution. Any help would be appreciated. The following code snippet is a stripped down example of my code.
.allEmployeeContainer {
height: 500px;
overflow-y: scroll;
}
.employeeHolder{
display: inline-block;
width:100%;
font-weight: normal;
font-size: 10.5pt;
padding:10px 0px 10px 0px;
margin:0px;
}
<div class="allEmployeeContainer">
<div ng-repeat="employee in someCtrl.employees" style="padding:0px; margin:0px" >
<div class="employeeHolder" layout="row" layout-wrap>
<div style="width:100%; margin-top:10px;" layout="row" layout-wrap>
<div flex="15">
<div class="drag-object" ng-drag="true" ng-drag-data="clip"></div><br />
</div>
<div flex>{{employee.firstName}}</div>
<div flex>{{employee.lastName}}</div>
</div>
</div>
</div>
</div>
I am developing an app using onsen ui and angular js. Lets say I have 3 html files(physical) not the ons-template one on the same page. How can I make a header of menu that will appear on all the three pages.
Here is an example with ons-navigator and ons-toolbar. You can add a footer in the same way, although a little css adjustment will be needed.
ons.bootstrap()
.back-button-icon{
vertical-align: top;
background-color: transparent;
height: 44px;
line-height: 44px;
font-size: 36px;
margin-left: 8px;
margin-right: 2px;
width: 16px;
display: inline-block;
padding-top: 1px;
}
.back-button-text{
vertical-align: top;
display: inline-block;
line-height: 44px;
height: 44px;
}
ons-toolbar ~ ons-navigator .page__content{
margin-top: 44px;
}
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsen-css-components.css" rel="stylesheet"/>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsenui.css" rel="stylesheet"/>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/onsenui.min.js"></script>
<ons-toolbar>
<div class="left">
<div class="toolbar-button" ng-show="navi.getPages().length > 1" ng-click="navi.popPage()">
<i class="ion-ios-arrow-back back-button-icon"></i><span class="back-button-text">Back</span>
</div>
</div>
<div class="center">Title</div>
<div class="right"></div>
</ons-toolbar>
<ons-navigator var="navi" page="page1.html"></ons-navigator>
<script type="text/ng-template" id="page1.html">
<ons-page>
<div style="text-align:center; margin-top:10px">
Content of Page1
<ons-button onclick="navi.pushPage('page2.html')">PushPage</ons-button>
</div>
</ons-page>
</script>
<script type="text/ng-template" id="page2.html">
<ons-page>
<div style="text-align:center; margin-top:10px">
Content of Page2
<ons-button onclick="navi.pushPage('page3.html')">PushPage</ons-button>
</div>
</ons-page>
</script>
<script type="text/ng-template" id="page3.html">
<ons-page>
<div style="text-align:center; margin-top:10px">
Content of Page3
</div>
</ons-page>
</script>