Aligning checkboxes with labels in the center - checkbox

anyone else encounter this annoying issue?
Whenever it comes to checkboxes, I always run into alignment issues. This is my most recent one. I can't seem to get the checkboxes with their labels to align to the center properly.
Any tips on how to do so would be hugely appreciated!
<!DOCTYPE html>
<html>
<head>
<title>
Checkbox
</title>
<style type="text/css">
.checkbox-grid div {
width:25%;
}
.checkbox-grid {
width:50%;
display:flex;
justify-content:center;
flex-wrap:wrap;
}
.center {
display:flex;
justify-content:center;
flex-wrap:wrap;
}
</style>
</head>
<body>
.checkbox-grid div {
width:25%;
}
.checkbox-grid {
width:50%;
display:flex;
justify-content:center;
flex-wrap:wrap;
}
.center {
display:flex;
justify-content:center;
flex-wrap:wrap;
}
<!DOCTYPE html>
<html>
<head>
<title>
Checkbox
</title>
</head>
<body>
<div class="center">
<div class="checkbox-grid">
<div><input type="checkbox" name="text1" value="value1" /><label for="text1">Text 1</label></div>
<div><input type="checkbox" name="text2" value="value2" /><label for="text2">Text 2</label></div>
<div><input type="checkbox" name="text3" value="value3" /><label for="text3">Text 3</label></div>
<div><input type="checkbox" name="text4" value="value4" /><label for="text4">Text 4</label></div>
<div><input type="checkbox" name="text5" value="value5" /><label for="text5">Text 5</label></div>
<div><input type="checkbox" name="text6" value="value6" /><label for="text6">Text 6</label></div>
<div><input type="checkbox" name="text7" value="value7" /><label for="text7">Text 7</label></div>
<div><input type="checkbox" name="text8" value="value8" /><label for="text8">Text 8</label></div>
</div>
</div>
<div class="center">
hello
</div>
</body>
</html>
Stack told me my post is too much code and not enough of an explanation, but I think it's pretty self explanatory, so I'm just writing some waffle at the bottom, don't mind me.


I suggest you try this:
.checkbox-grid{ display:flex; align-items:center; justify-content:center; }

Related

Fetching user data using ng-click

Here is the list of users. I need to display particular user details when clicked on him.
<head>
<script>
(function() {
angular.module("testApp", ['ui.bootstrap']).controller('testCtrl', ['$scope', '$http', function($scope, $http) {
$scope.userData = undefined;
$http.get('https://randomuser.me/api/?results=30&nat=US').then(function(response) {
$scope.userData = response.data;
});
}]);
}());
</script>
<style></style>
</head>
<body ng-app="testApp">
<div ng-controller="testCtrl">
<h1> PERSONS</h1>
<form name="commonForm">
<div class="col-sm-4" ng-repeat="user in userData.results" ng-class="{active : isSelected(user)} style="margin-top:50px;">
<img class="col-sm-4" ng-src="{{user.picture.large}}"/>
<div class="col-sm-8">
<div ><a ng-click="clickMe(p)" class="clickable"><b>{{user.name.first}} {{user.name.last}}</b></a></div>
<div>{{user.email}}</div>
<div>{{user.location.street}},{{user.location.city}},{{user.location.state}},{{user.location.postcode}}</div>
</div>
</div>
</form>
</div>
</body>
Also check the following link for the demo - https://plnkr.co/edit/J70FKDpdXUtg1AfiVkcz?p=preview
I need to display a particular user's data when we click on the user.

Below is the working example for the same
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<link data-require="bootstrap#3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="angular.js#1.6.6" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js" type="text/javascript"></script>
<script>
(function() {
angular.module("testApp", ['ui.bootstrap']).controller('testCtrl', ['$scope', '$http', function($scope, $http) {
$scope.userData = undefined;
$scope.selectedUser = undefined;
$http.get('https://randomuser.me/api/?results=30&nat=US').then(function(response) {
$scope.userData = response.data;
});
$scope.selectUser = function(usr){
$scope.selectedUser=usr;
};
}]);
}());
</script>
<style>
.userInfo{
border: 1px solid #ccc;
margin-top:10px;
padding:5px;
cursor: pointer;
}
.userInfo:hover{
background: #ccc;
}
.profile{
padding-left: 0px;
padding-right: 0px;
}
.ellipsis{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body ng-app="testApp">
<div ng-controller="testCtrl">
<form name="commonForm">
<div ng-hide="selectedUser">
<div class="col-sm-4 userInfo" ng-repeat="user in userData.results" ng-click="selectUser(user)" >
<img class="col-sm-4 profile" ng-src="{{user.picture.medium}}"/>
<div class="col-sm-8">
<div class="ellipsis"><b>{{user.name.first}} {{user.name.last}}</b></div>
<div class="ellipsis">{{user.email}}</div>
</div>
</div>
</div>
<div ng-show="selectedUser">
<button ng-click="selectedUser = undefined">Go Back</button>
<br />
<br />
<img class="col-sm-4 profile" ng-src="{{selectedUser.picture.large}}"/>
<div class="col-sm-4">
<div class="form-group">
<label for="first">First Name:</label>
<input type="text" class="form-control" id="first" ng-model="selectedUser.name.first">
</div>
<div class="form-group">
<label for="last">Last Name:</label>
<input type="text" class="form-control" id="last" ng-model="selectedUser.name.last">
</div>
<div class="form-group">
<label for="username">Login:</label>
<input type="text" class="form-control" id="username" ng-model="selectedUser.login.username" disabled>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="text" class="form-control" id="email" ng-model="selectedUser.email">
</div>
<div class="form-group">
<label for="dob">Date of Birth:</label>
<input type="text" class="form-control" id="dob" ng-model="selectedUser.dob">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="nat">Nationality:</label>
<input type="text" class="form-control" id="nat" ng-model="selectedUser.nat">
</div>
</div>
</div>
</form>
</div>
</body>
</html>

in angularjs ng-switch child scope form is not available not be available on the parent scope

Access AT model object which written in ng-switch ,here ng-switch creates a child scope and the form is created on this scope. Hence the child scope form would not be available on the parent scope.
Please do the help
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="">
<input type="radio" ng-model="fileType" value="Excel" style=" margin-left: 19px;" >Excel
<input type="radio" ng-model="fileType" value="Text" style=" margin-left: 19px;" >Text
<div ng-switch="fileType">
<div ng-switch-default="Excel">
<h4 style="margin-top: 15px;">
<b>Analysis Type </b>
<input type="radio" ng-model="AT" value="SRI" style=" margin-left: 8px;" >SRI
<input type="radio" ng-model="AT" value="JAG" style=" margin-left: 23px;" >JAG
</h4>
<!-- {{AT}} i am able to acess it -->
</div>
<div ng-switch-when="Text">
<h4 style="margin-top: 15px;"></h4>
</div>
</div>
{{fileType}}
{{AT}} <!-- how can i access it -->
</body>
</html>

This is a scope inheritance problem due to ng-switch creating its own scope.
Use ng-model="$parent.AT" within ng-switch block
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="">
<input type="radio" ng-model="fileType" value="Excel" style=" margin-left: 19px;" >Excel
<input type="radio" ng-model="fileType" value="Text" style=" margin-left: 19px;" >Text
<div ng-switch="fileType">
<div ng-switch-default="Excel">
<h4 style="margin-top: 15px;"><b>Analysis Type </b>
<input type="radio" id="atype_sri" ng-model="$parent.AT" value="SRI" style=" margin-left: 8px;" ><label for="atype_sri">SRI</lable>
<input type="radio" id="atype_jag" ng-model="$parent.AT" value="JAG" style=" margin-left: 23px;" ><label for="atype_jag">JAG</label></h4>
</div>
<div ng-switch-when="Text">
<h4 style="margin-top: 15px;"> </h4>
</div>
</div>
{{fileType}}
{{AT}} <!-- now you can access it -->
</body>
</html>

How to uncheck on load and toggle check in two checkbox angularjs

I want to uncheck the two checkbox on startup, and allow user to select only one check box at a time. Can I do it only using from ng-... attribute?
I am trying the following code
<div style="border:1px solid">
<label><input type="checkbox" ng-checked="!Titleshine_check" ng-model="blink_check">Blink</label>
(OR)
<label><input type="checkbox" ng-checked="!blink_check" ng-model="Titleshine_check">Shine</label>
<br>
</div>
http://plnkr.co/edit/2BLssmNTB5r8LjeGZf65?p=preview

Here you got full example
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.17/angular.js" data-semver="1.3.17"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div style="border:1px solid">
select type:
<form>
<input type="radio" name="opt1" ng-change="radioValue" ng-model="radioValue" value="this" unchecked> this
<br>
<input type="radio" name="opt2" ng-change="radioValue" ng-model="radioValue" value="that" unchecked> that
</form>
<span ng-bind="radioValue"></span>
</div>
</body>
</html>
and js:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.radioValue="empty";
});

If you really, really want the checkboxes you can do it like this:
http://plnkr.co/edit/ukDKjBZsp7AtY5UiIhBj?p=preview
<div style="border:1px solid">
<label><input type="checkbox" ng-model="blink_check">Blink</label>
(OR)
<label><input type="checkbox" ng-click="blink_check = !blink_check" ng-model="!blink_check" >Shine</label>
<br>
</div>

How to make text box border red when validation fail

I need to make the textbox border color as red when validation get fail.Here I am using angulerjs validation I am not able to understand how to make the textbox color as red.
Thanks in advance.
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Archimedes (Beta)</title>
<meta name="author" content="Dharm">
<script type="text/javascript" src="../js/arc/setup/arcadmin.js"></script>
</head>
<body>
<form name="preSourceThresholdForm">
<div class="col-md-12 h6 b" style="padding-bottom: 40px;">
<b>Configure PreSource Threshold</b>
<input type="hidden" class="form-control" id="preSourceThresholdGroup" ng-model="admin.preSourceThresholdGroup" value="PreSource Threshold">
</div>
<div class="col-md-3 b" style="padding-top: 0px">
PreSource Threshold
</div>
<div class="col-md-2">
<input type="number" style="width:80px;" min="0" max="100" name="preSourceThreshold" ng-model="admin.preSourceThreshold" required> %
<span style="color:red" ng-show="preSourceThresholdForm.preSourceThreshold.$error.number">Must Be Number!</span>
<span style="color:red" ng-show="preSourceThresholdForm.preSourceThreshold.$error.max">Number Should Be Less Then 100</span>
<span style="color:red" ng-show="preSourceThresholdForm.preSourceThreshold.$error.min">Number Should Be greater Then 0</span>
</div>
<div class="col-md-2">
<input id="preSourceSave" type="button" ng-disabled="!admin.preSourceThreshold" ng-click="preSourceSave()" class="btn btn-default" value="Save" />
</div>
</form>
</body>
<div class="modal"></div>
</html>
Update
Please check this below code.
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Archimedes (Beta)</title>
<meta name="author" content="Dharm">
<script type="text/javascript" src="../js/arc/setup/arcadmin.js"></script>
</head>
<body>
<style>
.red {
border: solid 1px red;
}
</style>
<form name="preSourceThresholdForm" novalidate class="form-horizontal">
<div class="col-md-12 h6 b" style="padding-bottom: 40px;">
<b>Configure PreSource Threshold</b>
<input type="hidden" class="form-control" id="preSourceThresholdGroup" ng-model="admin.preSourceThresholdGroup" value="PreSource Threshold">
</div>
<div class="col-md-3 b" style="padding-top: 0px">
PreSource Threshold
</div>
<div class="col-md-2">
<input type="number" style="width:80px;" min="0" max="100" name="preSourceThreshold" ng-class="{red: test.preSourceThreshold.$invalid}" ng-model="admin.preSourceThreshold" required> %
<span style="color:red" ng-show="preSourceThresholdForm.preSourceThreshold.$error.number">Must Be Number!</span>
<span style="color:red" ng-show="preSourceThresholdForm.preSourceThreshold.$error.max">Number Should Be Less Then 100</span>
<span style="color:red" ng-show="preSourceThresholdForm.preSourceThreshold.$error.min">Number Should Be greater Then 0</span>
</div>
<div class="col-md-2">
<input id="preSourceSave" type="button" ng-disabled="!admin.preSourceThreshold" ng-click="preSourceSave()" class="btn btn-default" value="Save" />
</div>
</form>
</body>
<div class="modal"></div>
</html>

You can use ng-class directive to apply a CSS class if the given condition evaluates to true:
.red {
border: solid 1px red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<form name="test">
<input type="number" ng-model="MyNumber" name="MyNumber" ng-class="{red: test.MyNumber.$invalid}" />
</form>
<div>
UPDATE
Here is the working code for your example:
<!DOCTYPE html>
<html>
<head lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app>
<style>
.red {
border: solid 1px red;
}
</style>
<form name="preSourceThresholdForm" novalidate class="form-horizontal">
<div class="col-md-12 h6 b" style="padding-bottom: 40px;">
<b>Configure PreSource Threshold</b>
<input type="hidden" class="form-control" id="preSourceThresholdGroup" ng-model="admin.preSourceThresholdGroup" value="PreSource Threshold">
</div>
<div class="col-md-3 b" style="padding-top: 0px">
PreSource Threshold
</div>
<div class="col-md-2">
<input type="number" style="width:80px;" min="0" max="100" name="preSourceThreshold" ng-class="{red: preSourceThresholdForm.preSourceThreshold.$invalid && preSourceThresholdForm.preSourceThreshold.$dirty}" ng-model="admin.preSourceThreshold" required> %
<span style="color:red" ng-show="preSourceThresholdForm.preSourceThreshold.$error.number && preSourceThresholdForm.preSourceThreshold.$dirty">Must Be Number!</span>
<span style="color:red" ng-show="preSourceThresholdForm.preSourceThreshold.$error.max && preSourceThresholdForm.preSourceThreshold.$dirty">Number Should Be Less Then 100</span>
<span style="color:red" ng-show="preSourceThresholdForm.preSourceThreshold.$error.min && preSourceThresholdForm.preSourceThreshold.$dirty">Number Should Be greater Then 0</span>
<span style="color:red" ng-show="preSourceThresholdForm.preSourceThreshold.$error.required && preSourceThresholdForm.preSourceThreshold.$dirty">This field is required</span>
</div>
<div class="col-md-2">
<input id="preSourceSave" type="button" ng-disabled="!admin.preSourceThreshold" ng-click="preSourceSave()" class="btn btn-default" value="Save" />
</div>
</form>
</body>
<div class="modal"></div>
</html>
** UPDATE II **
I have added a check for $dirty to ensure that the validation only checks on updated inputs

You can add a css:
input.ng-invalid {
border-color: red;
}
Because angularjs will add class ng-invalid to input when validation failed.
You can read document here: https://docs.angularjs.org/guide/forms#using-css-classes

<form name="preSourceThresholdForm" novalidate class="form-horizontal">
<div class="form-group">
<div ng-class="{'has-error': preSourceThresholdForm.preSourceThreshold.$invalid && (preSourceThresholdForm.preSourceThreshold.$dirty )}">
<input type="number" style="width:80px;" min="0" max="100" name="preSourceThreshold" ng-model="admin.preSourceThreshold" class="form-control" required> %
<span style="color:red" ng-show="preSourceThresholdForm.preSourceThreshold.$error.number">Must Be Number!</span>
<span style="color:red" ng-show="preSourceThresholdForm.preSourceThreshold.$error.max">Number Should Be Less Then 100</span>
<span style="color:red" ng-show="preSourceThresholdForm.preSourceThreshold.$error.min">Number Should Be greater Then 0</span>
</div>
</div>
</form>
Try this.

How to hide and show a div, based on model condition in angularjs?

I want to hide/show a div based on checkbox. Seems pretty simple. I store the value of checkbox in a model and use it in div ng-show. What am I doing wrong?
<div ng-app='visibleApp'>
<div ng-controller='myController'>
<input type="checkbox" name="hideBasicInfo" ng-model="hideBasicInfo">hide the basic information section
<div ng-show="{{!hideBasicInfo}}">
<label for="firstName">First Name:</label>
<input type="text" name="firstName" ng-model="firstName"/></br>
<label for="middleName">Middle Name:</label>
<input type="text" name="middleName" ng-model="middleName"/></br>
<label for="lastName">Last Name:</label>
<input type="text" name="lastName" ng-model="lastName"/>
</div>
<hr/>
<div>
<h4>Debug Information</h4>
hideBasicInfo: {{hideBasicInfo}}<br/>
!hideBasicInfo: {{!hideBasicInfo}}
</div>
</div>
</div>
JS file:
var visibleApp = angular.module('visibleApp',[]);
visibleApp.controller('myController', function($scope){
$scope.data = "my data";
$scope.hideBasicInfo = false;
});
Thank you.
See fiddle

almost there...
<div ng-hide="hideBasicInfo">
...
</div>
no template braces ( {{}} ) needed.

<div ng-show='One'>
<p>Section One</p>
</div>
<div ng-show='Two'>
<p>Section Two</p>
</div>
<div ng-show='Three'>
<p>Section Three</p>
</div>
<!-- Navigation -->
<nav>
<a href='#' ng-click='showOne'> Show Div One </a>
<a href='#' ng-click='showTwo'> Show Div Two </a>
<a href='#' ng-click='showThree'> Show Div Three </a>
</nav>

Execute this code:`enter code here`
<!DOCTYPE html>
<html>
<head>
<script src="angular.js"></script>
</head>
<body ng-app>
<h3>1. Show</h3>
<label>Show the square: <input type="checkbox" ng-model="mustShow" /></label><br />
<div ng-show="mustShow" style="width: 50px; height: 50px; background-color: red;"></div><br />
<br />
<h3>2. Hide</h3>
<label>Hide the square: <input type="checkbox" ng-model="mustHide" /></label><br />
<div ng-hide="mustHide" style="width: 50px; height: 50px; background-color: green;"></div>
</body>
</html>

Resources