I am trying to work with the ngAnimate directive of angular but it is not working and also not showing any problem..
I had tried almost every thing but it didn't worked out..
the link to the my code is :
// Code goes here
var ngTodo = angular.module('ngTodo', ['ngAnimate','ngStorage']);
ngTodo.controller('mainController',function($scope,$localStorage){
$scope.todoArray = [];
if($localStorage.todoArray == undefined){
$localStorage.todoArray = $scope.todoArray;
}
else{
$scope.todoArray = $localStorage.todoArray;
}
$scope.addTodo = function(newTodo){
$scope.todoArray.splice(0,0, { title : newTodo.name, details : newTodo.details});
$localStorage.todoArray = $scope.todoArray;
}
$scope.removeTodo = function(index){
$scope.todoArray.splice(index,1);
$localStorage.todoArray = $scope.todoArray;
}
});
/* Styles go here */
body, html {
height: 100%;
}
body{
font-family: sans-serif;
line-height: 1.428;
font-size: 14px;
background-image: url(../../images/bg-image.jpg);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* navbar top styles starts here */
input.search-todo-list{
margin-top: 20px;
}
.navbar-fixed-top{
background-color: #80bfff;
}
/* navbar top styles ends here */
/* content section starts here */
.content{
margin-top: 64px;
margin-bottom: 50px;
}
.empty-todo-list-message{
height: 200px;
margin-top: 30px;
text-align: center;
}
.todo-item{
margin-top: 10px;
}
.panel-heading,
.panel-footer{
padding: 5px 5px;
}
.panel-body{
padding: 7px;
}
.panel-default>.panel-heading,
.panel-body,
.panel-footer{
background-color: yellow;
}
/* content section starts here */
/* navbar bottom styles starts here */
.navbar-fixed-bottom input{
width: 100%;
margin-right: 20px;
}
.navbar-fixed-bottom input,
button{
margin-top: 10px;
}
.navbar-fixed-bottom{
background-color: #80bfff;
}
/* navbar bottom styles ends here */
/* animation styles */
.move-animation.ng-move {
transition: 1.75s;
opacity: 0;
}
.move-animation.ng-move.ng-move-active {
opacity: 1;
}
<!DOCTYPE html>
<html lang="en" ng-app="ngTodo">
<head>
<meta charset="UTF-8">
<link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.11/ngStorage.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="container-fluid" ng-controller="mainController">
<!-- navbar top starts here -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="row">
<div class="col-sm-2">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img width="40px" alt="Todo App Icon" class="img-circle img-responsive" src="assets/icon/icon.jpg">
</a>
</div>
</div>
<div class="col-sm-8">
<h2 class="text-center">Today's Todo List</h2>
</div>
<div class="col-sm-2">
<input type="text" placeholder="search..." ng-model="query" class="search-todo-list">
</div>
</div>
</div>
</nav>
<!-- navbar top ends here -->
<!-- content section starts here -->
<div class="row">
<div class="col-sm-12 content">
<div class="row">
<div class="col-sm-6 col-sm-offset-3 empty-todo-list-message" ng-if="todoArray.length == 0">
<div class="panel panel-default ">
<div class="panel-body">
<h1><strong>Your Todo List is EMPTY</strong></h1>
</div>
</div>
</div>
<!-- item starts here -->
<div class="col-sm-6 col-sm-offset-3 todo-item" ng-repeat="todo in todoArray | filter : query" ng-animate=" 'animate' ">
<div class="panel panel-default ">
<div class="panel-heading text-center">
<h3><strong>{{ todo.title + " : " }}</strong></h3>
</div>
<div class="panel-body">
<strong>{{ todo.details}}</strong>
</div>
<div class="panel-footer text-center">
<button ng-click="removeTodo($index)"><i class="fa fa-trash-o fa-2x" aria-hidden="true"></i>
delete</button>
</div>
</div>
</div>
<!-- item ends here -->
</div>
</div>
</div>
<!-- content section ends here -->
<!-- navbar bottom starts here -->
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<input type="text" placeholder="Add Todo Item" required ng-model="newTodo.name" >
</div>
<div class=" col-sm-4">
<input type="text" placeholder="Add Todo Item Details" required ng-model="newTodo.details">
</div>
<div class=" col-sm-2">
<button ng-click="addTodo(newTodo)" ><i class="fa fa-plus" aria-hidden="true"></i> Add ToDo</button>
</div>
</div>
</div>
</nav>
<!-- navbar bottom ends here -->
</div>
</body>
</html>
Related
Page pushed to the left and title section pushing the width of the page. I'm new to web Dev, So please let me know where I made the mistake and how to correct it. Full CSS and HTML codes included. Bootstrap version 4. This is a personal blog, my am was to make each post page responsive the same way the homepage made responsive. I can't figure out how to do it. Red arrows show where it pushed to the right
https://github.com/GreshanBovithanthrige/Personal-Blog.git
Git Hub Repo link
html {
height: 100%;
}
body {
font-family: "Montserrat";
color: #000;
min-height: 100%;
display: flex;
flex-direction: column;
}
#title {
background-color: #082032;
color: #fff;
text-align: center;
}
.gb-img {
position: relative;
padding: 5% 0%;
}
h1 {
font-family: 'Montserrat', sans-serif;
font-weight: 900;
font-size: 3rem;
line-height: 1.5;
/* display: flex; */
}
.heading {
text-align: center;
margin: auto;
}
.container-fluid {
padding: 3% 15%;
}
h3 {
font-family: 'Montserrat';
font-weight: bold;
color: #000;
}
h2 {
font-family: 'Montserrat', sans-serif;
font-weight: bold;
font-size: 3rem;
line-height: 1.5;
}
p {
color: #40514E;
}
/* Navigation Bar */
.navbar {
padding-bottom: 4.5rem;
}
.navbar-brand {
font-family: "Alumni Sans";
font-weight: 500;
font-size: 2.7rem;
}
.nav-item {
padding: 0 18px;
}
.nav-link {
font-size: 1.2rem;
font-family: "Montserrat";
font-weight: 300;
}
/* Buttons */
.about-button {
margin: 2% 0% 5% 0%;
}
.card-button {
width: 180px;
margin: auto;
}
/* Features Secition */
#features {
padding: 7% 15%;
}
.feature-box {
text-align: center;
padding: 5%;
}
.card {
background-color: #212529;
border-radius: .50rem;
}
.card-text {
color: #fff;
}
.card-title {
color: #fff;
}
.post-column {
padding-bottom: 5%;
}
/* Footer */
#footer {
padding: 7% 15%;
text-align: center;
background-color: #334756;
margin-top: auto;
}
.p-text {
color: #fff;
}
.sm-icon {
padding: 20px 10px;
}
/* About me page styles */
.about-page-p {
text-align: left;
padding-top: 10%;
padding-bottom: 10%;
padding-left: 30%;
padding-right: 30%;
}
/* Posts Section */
/* Post 1 */
.post1 {
text-align: justify;
padding: 7% 15%;
}
.office-image {
display: block;
margin-left: auto;
margin-right: auto;
padding: 3% 0%;
}
/* Post 2 */
.post2 {
text-align: justify;
padding: 7% 15%;
}
#media (min-width: 320px) and (max-width: 767px) {
/* .row {
position: relative;
} */
.container-fluid{
position: relative;
width: 100%;
}
.common{
margin: auto;
padding-left: 12%;
padding-bottom: 20px;
}
body{
padding:0%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>GB</title>
<link rel="SHORTCUT ICON" href="images/GB.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Ubuntu:ital,wght#0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"
rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Alumni+Sans:wght#500&display=swap" rel="stylesheet">
</head>
<body>
<section id="title">
<div class="container-fluid">
<!-- Nav Bar -->
<nav class="navbar navbar-expand-lg navbar-dark navbar">
<a class="navbar-brand" href="index.html">GB</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Posts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about-me.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#footer">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
<!-- Title -->
<!-- <div class="row"> -->
<div class="section">
<div class="container">
<div class="row">
<div class="col-sm">
<h1>Hello.</h1>
<h2>I'm Greshan Bovithanthrige</h2>
<h4>A Sys Admin based in Sri Lanka</h4>
About me
</div>
<div class="col-sm row common">
<img src="images/GB.png" height="280" width="280">
</div>
</div>
</div>
</div>
<!-- </div> -->
</section>
<section id="features">
<div class="row">
<div class="col-lg-4 col-md-12 post-column">
<div class="card">
<img class="card-img-top" src="images/image-gmfl.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">All of us in whatever context is tasked with getting more from less!</h5>
<p class="card-text">The energy behind writing this article came from an interview I had the privilege to watch recently.</p>
</div>
Read More
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col-lg-4 col-md-12 post-column"">
<div class=" card">
<img class="card-img-top" src="images/RAM.jpeg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Is it necessary to stress test your RAM/Memory?</h5>
<p class="card-text">The short answer is YES. You should. But, it really depends on the context.</p>
</div>
Read More
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col-lg-4 col-md-12 post-column"">
<div class=" card">
<img class="card-img-top" src="images/image-gmfl.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Lorem Ipsum is simply dummy text of the printing</h5>
<p class="card-text">orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. </p>
</div>
Read More
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div>
</section>
<section id="features">
<div class="row">
<div class="col-lg-4 col-md-12 post-column"">
<div class=" card">
<img class="card-img-top" src="images/image-gmfl.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Lorem Ipsum is simply dummy text of the printing</h5>
<p class="card-text">orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. </p>
</div>
Read More
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col-lg-4 col-md-12 post-column"">
<div class=" card">
<img class="card-img-top" src="images/image-gmfl.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Lorem Ipsum is simply dummy text of the printing</h5>
<p class="card-text">orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. </p>
</div>
Read More
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col-lg-4 col-md-12 post-column"">
<div class=" card">
<img class="card-img-top" src="images/image-gmfl.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Lorem Ipsum is simply dummy text of the printing</h5>
<p class="card-text">orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. </p>
</div>
Read More
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer id="footer">
<span style="color:#FFF;"><span /><i class="fab fa-facebook sm-icon"></i>
<a href="https://instagram.com/gbovithanthrige"><span style="color:#FFF;"><span /><i class="fab fa-instagram sm-icon"></i><a />
<a href="https://twitter.com/gbovithanthrige"><span style="color:#FFF;"><span /><i class="fab fa-twitter sm-icon"></i><a />
<span style="color:#FFF;"><span /><i class="fab fa-linkedin-in sm-icon"></i>
<span style="color:#FFF;"><span /><i class="fas fa-envelope-square sm-icon"></i>
<p class="p-text">Crafted by Greshan Bovithanthrige</p>
</footer>
</body>
</html>
I coded this layout but it's not responsive. The image doesn't seem to respond as it needs to. Can someone help me with this.
I wanted the code to respond to image where it is able to re-size itself as the browser size is adjusted. However i can only see that the images sort of align as I re-size the browser but it fails to change the sizes. I am not sure what is going on in here. Seems like i have all the code placed in but still doesn't work.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: block;
}
[class*="col-"] {
float: left;
padding: 15px;
}
html {
font-family: "Lucida Sans", sans-serif;
.responsive {
width: 100%;
height: auto;
}
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
list-style: none;
}
.menu li {
padding: 2px;
margin-bottom: -0.5px;
color: #ffffff;
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
#media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
</style>
</head>
<body>
<div class="row">
<div class="col-4 menu">
<img src="https://via.placeholder.com/300X150" />
</div>
<div class="col-8">
<div class="col-2">
<img src="https://via.placeholder.com/150X50" class="responsive"/>
</div>
<div class="col-2">
<img src="https://via.placeholder.com/150X50" class="responsive"/>
</div>
<div class="col-2">
<img src="https://via.placeholder.com/150X50" class="responsive"/>
</div>
<div class="col-2">
<img src="https://via.placeholder.com/150X50" class="responsive"/>
</div>
<div class="col-2">
<img src="https://via.placeholder.com/150X50" class="responsive"/>
</div>
<div class="col-2">
<img src="https://via.placeholder.com/150X50" class="responsive"/>
</div>
</div>
</div>
<div class="col-3">
<div class="col-3 menu">
<div>
<ul>
<li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
<li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
<li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
<li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
<li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
<li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
</ul>
</div>
</div>
<div class="col-3 menu">
<div>
<ul>
<li> <img src="https://via.placeholder.com/505X250" class="responsive"/></li>
</ul>
</div>
</div>
<div class="col-3 menu">
<div>
<ul>
<li> <img src="https://via.placeholder.com/505X250" class="responsive"/></li>
</ul>
</div>
</div>
<div class="col-3 menu">
<div>
<ul>
<li> <img src="https://via.placeholder.com/505X250" class="responsive"/></li>
</ul>
</div>
</div>
<div class="col-3 menu">
<div>
<ul>
<li> <img src="https://via.placeholder.com/505X250" class="responsive"/></li>
</ul>
</div>
</div>
</div>
<div>
<ul>
<img src="https://via.placeholder.com/305X130" /> <br/>
<img src="https://via.placeholder.com/150X50" />
<img src="https://via.placeholder.com/150X50" /> <br/>
<img src="https://via.placeholder.com/150X50" />
<img src="https://via.placeholder.com/150X50" />
</ul>
</div>
</body>
</html>
Here you go:
https://codepen.io/panchroma/pen/EeaoyP
There were two simple syntax errors in your CSS, I added a closing curly bracket at line 20 and commented out line 28 in your HTML.
What was happening without these corrections is that there was no max-width for your images and they weren't scaling at narrow viewports.
Good luck!
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: block;
}
[class*="col-"] {
float: left;
padding: 15px;
}
html {
font-family: "Lucida Sans", sans-serif;
} /* added closing bracket */
.responsive {
width: 100%;
height: auto;
}
/* } commented out this bracket */
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
list-style: none;
}
.menu li {
padding: 2px;
margin-bottom: -0.5px;
color: #ffffff;
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
#media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
</style>
</head>
<body>
<div class="row">
<div class="col-4 menu">
<img src="https://via.placeholder.com/300X150" />
</div>
<div class="col-8">
<div class="col-2">
<img src="https://via.placeholder.com/150X50" class="responsive"/>
</div>
<div class="col-2">
<img src="https://via.placeholder.com/150X50" class="responsive"/>
</div>
<div class="col-2">
<img src="https://via.placeholder.com/150X50" class="responsive"/>
</div>
<div class="col-2">
<img src="https://via.placeholder.com/150X50" class="responsive"/>
</div>
<div class="col-2">
<img src="https://via.placeholder.com/150X50" class="responsive"/>
</div>
<div class="col-2">
<img src="https://via.placeholder.com/150X50" class="responsive"/>
</div>
</div>
</div>
<div class="col-3">
<div class="col-3 menu">
<div>
<ul>
<li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
<li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
<li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
<li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
<li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
<li> <img src="https://via.placeholder.com/300X50" class="responsive"/></li>
</ul>
</div>
</div>
<div class="col-3 menu">
<div>
<ul>
<li> <img src="https://via.placeholder.com/505X250" class="responsive"/></li>
</ul>
</div>
</div>
<div class="col-3 menu">
<div>
<ul>
<li> <img src="https://via.placeholder.com/505X250" class="responsive"/></li>
</ul>
</div>
</div>
<div class="col-3 menu">
<div>
<ul>
<li> <img src="https://via.placeholder.com/505X250" class="responsive"/></li>
</ul>
</div>
</div>
<div class="col-3 menu">
<div>
<ul>
<li> <img src="https://via.placeholder.com/505X250" class="responsive"/></li>
</ul>
</div>
</div>
</div>
<div>
<ul>
<img src="https://via.placeholder.com/305X130" /> <br/>
<img src="https://via.placeholder.com/150X50" />
<img src="https://via.placeholder.com/150X50" /> <br/>
<img src="https://via.placeholder.com/150X50" />
<img src="https://via.placeholder.com/150X50" />
</ul>
</div>
</body>
</html>
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'm trying to convert div element to canvas using html2canvas library inside angularjs controller, it throws no error in console but only gives an empty canvas, I included the html2canvas script in master page and the div element is inside a template page which is loaded using ng-view
the div element is
<div id="barcodeHtml" style="background-color: #82c6f8">
<div style="width: 20%;float: left;display: list-item;"></div>
<div style="width: 40%;float: left; align-content: center">
<h2 style="display: inline;">CCAD</h2>
<br>
<div style="float: left;width: 50%">
<h4>MEMBER NAME</h4>
<h2>{{memberName}}</h2>
</div>
<div style="float: right;width: 50%"></div>
<br>
<br>
<div style="float: left;width: 100%">
<h4>MEMBER SINCE</h4>
<h3>{{memberSince}}</h3>
</div>
<br>
<br><br>
<br>
<img src="{{imgSource}}"/>
</div>
</div>
<a class="btn btn-custom" ng-click="getCanvas()">get Canvas</a>
and the angular controller
$scope.getCanvas=function()
{
$scope.memberName=data.html.name;
$scope.memberSince=data.html.year;
$scope.imgSource=data.html.code;
html2canvas($("#barcodeHtml"), {
onrendered: function(canvas) {
document.body.appendChild(canvas);
}
});
}
what am I missing?
thank you in advance..
The issue is your div with id="barcodeHtml" does not have height so it is not able to append to the body.
Try this
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.getConvas=function()
{
html2canvas($("#barcodeHtml"), {
onrendered: function(canvas) {
document.body.appendChild(canvas);
}
});
}
})
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div id="barcodeHtml" style="background-color: #82c6f8; height: 200px;">
<div style="width: 20%;float: left;display: list-item;"></div>
<div style="width: 40%;float: left; align-content: center">
<h2 style="display: inline;">CCAD</h2>
<br>
<div style="float: left;width: 50%">
<h4>MEMBER NAME</h4>
<h2>{{memberName}}</h2>
</div>
<div style="float: right;width: 50%"></div>
<br>
<br>
<div style="float: left;width: 100%">
<h4>MEMBER SINCE</h4>
<h3>{{memberSince}}</h3>
</div>
<br>
<br><br>
<br>
<img src="{{imgSource}}"/>
</div>
</div>
<a class="btn btn-custom" ng-click="getConvas()">get Convas</a>
</div>
</body>
</html>
There is an issue with your inline-styling.
I tried with removing float: left; from your upper div [from here : <div style="width: 40%;float: left; align-content: center">], then it worked.
See the working fiddle
I am trying to make the datetimepicker responsive for bootstrap but having issues.
I have seen this plugin:
https://github.com/niftylettuce/bootstrap-datepicker-mobile#requirements
which would be great to use in my application, but the problem is my application doesn't use jQuery (nor do I want it to).
I have the datepicker set up like this:
<div class="col-md-4">
<div ng-model="controller.today" datepicker ng-change="controller.getArchive()"></div>
</div>
Does anyone know how I can make the datetimepicker responsive without using jQuery?
Well I managed to fix this myself.
I created my own templates which looked like this:
<script id="template/datepicker/datepicker.html" type="text/ng-template">
<div class="datepicker" ng-switch="datepickerMode" role="application" ng-keydown="keydown($event)">
<daypicker ng-switch-when="day" tabindex="0"></daypicker>
<monthpicker ng-switch-when="month" tabindex="0"></monthpicker>
<yearpicker ng-switch-when="year" tabindex="0"></yearpicker>
</div>
</script>
<script id="template/datepicker/day.html" type="text/ng-template">
<div>
<div class="row">
<div class="col-xs-2">
<button class="btn btn-default btn-block" ng-click="move(-1)" tabindex="-1"><span class="fa fa-chevron-left"></span></button>
</div>
<div class="col-xs-8">
<button class="btn btn-default btn-block" ng-click="toggleMode()" ng-disabled="datepickerMode === maxMode" tabindex="-1">{{ title }}</button>
</div>
<div class="col-xs-2">
<button class="btn btn-default btn-block"><span class="fa fa-chevron-right"></span></button>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="flexbox">
<div ng-repeat="label in labels track by $index">
<small aria-label="{{ label.full }}">{{ label.abbr }}</small>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="flexbox" ng-repeat="row in rows track by $index">
<div ng-repeat="dt in row track by dt.date">
<button class="btn btn-default btn-block" ng-class="{'btn-info': dt.selected, active isactive(dt)}" ng-click="select(dt.date)" ng-disabled="dt.disabled" tabindex="-1"><span ng-class="{'text-muted': dt.secondary, 'text-info' dt.current}">{{ dt.label }}</span></button>
</div>
</div>
</div>
</div>
</div>
</script>
Then I created 2 SASS files, one for the actual datepicker:
.datepicker {
text-align: center;
.row {
> div {
padding-left: 1px;
padding-right: 1px;
&:first-child {
padding-left: 15px;
}
&:last-child {
padding-right: 15px;
}
}
> .col-xs-12,
> .col-sm-12,
> .col-md-12,
> .col-lg-12 {
padding-left: 15px;
padding-right: 15px;
}
}
.flexbox {
margin-top: -1px;
&:first-child {
margin-top: 2px;
}
}
}
and a flexbox one:
.flexbox {
display: flex;
> div {
-ms-flex: 1 auto;
flex: 1 auto;
margin-left: -1px;
&:first-child {
margin-left: 0;
}
}
}
This solved my issue.
I will update this when I have all templates replaced and I will add a jsfiddle.