I am a newbie when it comes to frontend. I have been working on a little single page angularjs app and I came across an issue. On my page, I need two inline datepickers. I chose angular-ui-bootstrap datepickers. They render in an odd way veiling each other:
veiling datepickers
Here's part of my HTML code:
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h4>Date range</h4>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-5">
<div style="display: inline-block;">
<uib-datepicker ng-model="dateFrom" starting-day="1" max-date="dateTo" show-weeks="false"></uib-datepicker>
</div>
<div>
<label>Date from {{dateFrom | date: "dd/MM/yyyy"}}</label>
</div>
</div>
<div class="col-md-5 ">
<div style="display: inline-block;">
<uib-datepicker ng-model="dateTo" starting-day="1" min-date="dateFrom" show-weeks="false"></uib-datepicker>
</div>
<div>
<label>Date to {{dateTo | date: "dd/MM/yyyy"}}</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<label> Additional Info</label>
</div>
Do you have any idea how to make them fit the panel normally without this veiling?
Before I put datepickers into panel div, the display issue was the same. They were tighten together and not fitting the grid column.
Each help will be appreciated
As <uib-datepicker> has a fixed size and cannot be resized according to grid width, you can customize the size of the small buttons (days).
See in the snippet below the .custom-size .btn-sm CSS class:
var app = angular.module('app', ['ui.bootstrap']);
app.controller('MyCtrl', function($scope) {
});
.custom-size .btn-sm {
padding: 4px 8px;
font-size: 11px;
line-height: 1.5;
border-radius: 3px;
}
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>AngularJS UI Bootstrap</title>
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="app.js"></script>
</head>
<body ng-controller="MyCtrl">
<div class="container-fluid">
<h2>AngularJS: UI Bootstrap datepicker</h2>
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h4>Date range</h4>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<div style="display: inline-block;">
<uib-datepicker ng-model="dateFrom" starting-day="1" max-date="dateTo" show-weeks="false" class="custom-size"></uib-datepicker>
</div>
<div>
<label>Date from {{dateFrom | date: "dd/MM/yyyy"}}</label>
</div>
</div>
<div class="col-md-6">
<div style="display: inline-block;">
<uib-datepicker ng-model="dateTo" starting-day="1" min-date="dateFrom" show-weeks="false" class="custom-size"></uib-datepicker>
</div>
<div>
<label>Date to {{dateTo | date: "dd/MM/yyyy"}}</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<label> Additional Info</label>
</div>
</div>
</div>
</body>
</html>
Related
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 using bootstrap's popover, but I don't want the popover overflow it's wrapper, any ideas?
Demo on Plunker
<!DOCTYPE html>
<html>
<head>
<script src="https://code.angularjs.org/1.5.5/angular.js" data-semver="1.5.5" data-require="angularjs#1.5.5"></script>
<script data-require="ui-bootstrap#*" data-semver="1.3.2" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-1.3.2.js"></script>
<script data-require="bootstrap.js#*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" data-semver="3.3.6" data-require="bootstrap-css#*" />
<script src="controller.js"></script>
<script id="calendar.html" type="text/ng-template">
<uib-datepicker ng-model="date" show-weeks="false">
</datepicker>
</script>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="popover.css">
</head>
<body>
<div ng-app="my-app" ng-controller="controller">
<div class="card">
<div class="card-panel">
<div class="card-body">
<div class="row">
<p>BAbababababbabababababababababababababbabaabbabaabababbBAbababababbabababababababababababababbabaabbabaabababbBAbababababbabababababababababababababbabaabbabaabababb</p>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-panel">
<div class="card-body">
<div class="row">
<div class="col-xs-12" style="text-align:center;">
<h2>Here is a list a weapons</h2>
</div>
</div>
<div class="row" ng-repeat="item in weaponItems">
<div class="col-xs-12">
<div class="col-xs-6" ng-click="selectItem(item)" uib-popover-template="'popover.html'" popover-is-open="isOpen && item === selectedItem" popover-trigger="click" popover-placement="auto right">
<div class="panel">
<div class="panel-body" style="min-height:120px;">
<div><b>Category:</b> {{item.title}}</div>
<p><b>Desc:</b> {{item.desc}}</p>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="panel" style="text-align:center;">
<img src="{{item.img}}" height="120px" width="auto">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I think I don't make my question clear, see the attached imagethe red line surrounded area is the card-panel area, and the green line surrounded is the popover. Here, I don't want the popover beyond the panel area.
Declare word-wrap on the overflowing element.
.card-body p{
word-wrap: break-word;
}
I have just started with learning AngularJS and everthing works great before I started to write some easy controller method and method doesn't work even i include ng-contoller I tried to include it as separated js file but that also doens't work I am new to angularJS so I would appreciate any help I also tried with notped++ to do the same but doesn't work this is my code;
<!DOCTYPE html>
<html data-ng-app="">
<head>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/jquery-1.9.1.min.js"></script>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/angular.min.js"></script>
</head>
<body>
<div class="container" data-ng-controller="AppController">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Contact Manager</a>
</div>
<div class="collapse navbar-collapse" id="nav-toggle">
<ul class="nav navbar-nav">
<li class="alert-success">Browse</li>
<li>Add contacts</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<input type="text" class="form-control" placeholder="Search"/>
</form>
</div>
</nav>
<div class="page-header">
<h2>Prvo poglavlje <small>Hello world</small></h2>
</div>
<div class="container">
<div class="jumbotron">
<h1>Hello, {{name||"World"}}</h1>
<input type="text" class="form-control input-lg" data-ng-model="name" />
</div>
<div class="row">
<div class="col-sm-8 pull-right hidden-lg" >
<div class="row">
<div class="col-sm-6">
<p>Prvi</p>
</div>
<div class="col-sm-6">
<p>Drugi</p>
</div>
</div>
</div>
<div class="col-sm-4 pull-left show" >
This is our sidebar
</div>
</div>
<div class="row">
<div class="col-md-8">
<button ng-click="clickHandler()">Click me</button>
</div>
</div>
</div>
</div>
<script>
function AppController($scope) {
$scope.clickHandler = function () {
window.alert("Clicked");
};
}
</script>
</body>
</html>
You have to define a module before instantiate your controller:
angular
.module('app', [])
.controller('AppController', AppController);
AppController.$inject = ['$scope'];
function AppController($scope) {
$scope.clickHandler = function () {
window.alert("Clicked");
};
}
<!DOCTYPE html>
<html ng-app="app">
<head>
<title></title>
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
</head>
<body>
<div class="container" ng-controller="AppController">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Contact Manager</a>
</div>
<div class="collapse navbar-collapse" id="nav-toggle">
<ul class="nav navbar-nav">
<li class="alert-success">Browse</li>
<li>Add contacts</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<input type="text" class="form-control" placeholder="Search" />
</form>
</div>
</nav>
<div class="page-header">
<h2>Prvo poglavlje <small>Hello world</small></h2>
</div>
<div class="container">
<div class="jumbotron">
<h1>Hello, {{name||"World"}}</h1>
<input type="text" class="form-control input-lg" data-ng-model="name" />
</div>
<div class="row">
<div class="col-sm-8 pull-right hidden-lg">
<div class="row">
<div class="col-sm-6">
<p>Prvi</p>
</div>
<div class="col-sm-6">
<p>Drugi</p>
</div>
</div>
</div>
<div class="col-sm-4 pull-left show">
This is our sidebar
</div>
</div>
<div class="row">
<div class="col-md-8">
<button ng-click="clickHandler()">Click me</button>
</div>
</div>
</div>
</div>
</body>
</html>
You have not defined the module anywhere in the code,
In View:
<html ng-app="myApp">
In JS:
var app = angular.module("myApp", []);
Working Sample
You need to include the angular module. Angular works with modules.
Controllers are part of module.
Try something like this:
app = angular.module("myApp", []);
app. Controller(...);
And use this module in your html like
<html ng-app="myApp">
Also,
The controller declaration you are using is old.
Try this:
app.controller('controllerName', ['$scope', function($scope){...}]);
I am having a bootstrap div with 3 columns as given in the html below and when i have a select control in the first div of the row, the remaining div's don't show up. but if i comment out the same and check with hello world text. All columns show up just like it should be.
not sure what is that i am missing, hence looking out for a new set of eyes to point out what is wrong. :)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div style="text-align:center">
<h1>Wind Monitoring System </h1>
</div>
<div class="row">
<div class="col-md-4" style="background:blue">
<span>Hello World1</span>
<!--<div>
<select id="states" ng-model="selectedState" ng-change="getCities()" size="3" ng-options="state.Name for state in states" />
</div>-->
</div>
<div class="col-md-4" style="background:blue">
<span>Hello World2</span>
</div>
<div class="col-md-4" style="background:blue">
<span>Hello World3</span>
<!--<select id="city" ng-show="selectedState != null" ng-model="selectedCity" size="3" style="height:200px;width:200px" ng-options="city.city for city in cities | filter : {State:selectedState.Name}" />-->
</div>
</div>
</div>
If I'm not mistaken the select tags should be as such <select></select> I believe you are supposed to be binding your options not your <select> tags.
Check this link out
Okay here you go
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<div ng-app="app">
<div class="container-fluid">
<div style="text-align:center">
<h1>Wind Monitoring System </h1>
</div>
<div class="row">
<div class="col-md-4" style="background:blue">
<span>Hello World1</span>
<div ng-controller="Test">
<select ng-model="selectedState" size="3" ng-options="item for item in items"></select>
</div>
</div>
<div class="col-md-4" style="background:blue">
<span>Hello World2</span>
</div>
<div class="col-md-4" style="background:blue">
<span>Hello World3</span>
</div>
</div>
</div>
</div>
JavaScript
var app = angular.module('app',[]);
app.controller('Test',function($scope){
$scope.items = ['one','two','three','four']
});
I believe all I did was add the closing tag.
I have been following the docs for ui-bootstrap. And in the section(ui.bootstrap.collapse) they talk about making a collapse function for content when you click a button.
But I cannot seem to make the Collapse seem to work in my code.
What am I missing or doing wrong?
I have looked at other Stacks and have seen that other people use anchor tags instead of button tags. So I don't think that is the issue.
Index HTML
<!DOCTYPE html>
<html lang="en" data-ng-app="app">
<head>
<meta charset="UTF-8">
<meta name="description" content="stuff">
<meta name="keywords" content="stuff">
<meta name="author" content="stuff">
<title> Title</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css">
<!-- Custom styles -->
<link href="css/style.css" rel="stylesheet">
<link href="css/svg_style.css" rel="stylesheet">
<!--Jquery -->
<script src="lib/jquery/dist/jquery.min.js"></script>
<!-- Angular -->
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular-route/angular-route.min.js"></script>
<script src="lib/angular-animate/angular-animate.min.js"></script>
<script src="lib/angular-cookies/angular-cookies.min.js"></script>
<!-- Bootstrap -->
<script src="lib/angular-bootstrap/ui-bootstrap.min.js"></script>
<script src="lib/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
</head>
<body id="index_body">
<div data-ng-controller="HeaderCtrl">
<div class="top-header" data-ng-include="templateUrl"></div>
</div>
<div class="page [[ pageClass ]]" ng-view autoscroll="true"></div>
<!-- Main JS -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/headerCtrl.js"></script>
<script src="js/controllers/modal.js"></script>
<script src="js/controllers/ResonanceCtrl.js"></script>
<script src="js/controllers/ContactCtrl.js"></script>
<script src="js/controllers/LandingCtrl.js"></script>
<script src="js/controllers/SignInCtrl.js"></script>
<!-- Directives -->
<!-- <script src="js/directives/LandingAnimation.js"></script> -->
<script src="js/jq.js"></script>
</body>
</html>
Landing Page HTML
<div class="col-xs-12 col-sm-12 col-md-5">
<div class="caption">
<h1 class="text-left h-color thin">
Text Header
</h1>
<p class="lead p-color">More Text</p>
<!-- Here is my Toggle Button --> <a class="lead p-color learn-button togglebtn shake shake-rotate" data-ng-click="isCollapsed = !isCollapsed">
<small>
<i class="glyphicon" data-ng-class="{'glyphicon-minus': status.open, 'glyphicon-plus': !status.open}"></i> Learn More
</small>
</a>
</div>
</div>
<div class="hidden-xs hidden-sm col-md-7 col-lg-offset-1 col-lg-6">
<img alt="Image" class="img-responsive center-block" src="images/kip-animation.png" />
</div>
<!--Here is the what I want to collapse -->
<div id="myContent" collapse="isCollapsed" class="row row-offset row-pad" style="margin: 0 30px">
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="lead caption text-center">
<h3 class="h-color2">Item 1</h3>
</div>
<div class="thumbnail">
<img style="height: 100px; width: auto;" class="img-circle" src="images/logo-bunny.png" alt="Logo">
</div>
<div class="lead caption">
<p class="p-color"><small>Text</small>
</p>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="lead caption text-center">
<h3 class="h-color2">Item 2</h3>
</div>
<div class="thumbnail">
<img style="height: 100px; width: auto;" class="img-circle" src="images/logo-bunny.png" alt="Logo">
</div>
<div class="lead caption">
<p class="p-color"><small>Text</small>
</p>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="lead caption text-center">
<h3 class="h-color2">Item 3</h3>
</div>
<div class="thumbnail">
<img style="height: 100px; width: auto;" class="img-circle" src="images/logo-bunny.png" alt="Logo">
</div>
<div class="lead caption">
<p class="p-color"> <small>Some Text</small>
</p>
</div>
</div>
</div>
<!-- END DROPDOWN-->
App Javascript
var app = angular.module('app', ['ui.bootstrap', 'ngRoute', 'ngAnimate']);
app.config(function($interpolateProvider, $routeProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
$routeProvider
.when('/', {
templateUrl : 'pages/LandingPage.html',
controller : 'LandingCtrl'
})
.otherwise({ redirectTo: '/signin'});
});
Controller Javascript
app.controller('LandingCtrl', function($scope) { // jshint ignore:line
$scope.pageClass = 'page-landing';
$scope.isCollapsed = true;
});
I solved the issue. I was using Jquery before to toggle the display either hidden or shown.
In my Css I had:
myContent {
display: none;
}
Once I deleted that. It worked perfectly fine.