I'm using bootstrap-tempus-dominus for Datetimepickers in my application.
How can I change the color of the displayed month and day's names with css
Just add the custom style below in your page it will work as desired:
.bootstrap-datetimepicker-widget table th.picker-switch{
color:#000 !important;
}
.bootstrap-datetimepicker-widget table th{
color:#000 !important;
}
Check this example:
$(function() {
$('#datetimepicker1').datetimepicker();
});
.bootstrap-datetimepicker-widget table th.picker-switch{
color:#0f0 !important;
}
.bootstrap-datetimepicker-widget table th{
color:#0f0 !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/tempusdominus/bootstrap-4/master/build/js/tempusdominus-bootstrap-4.js"></script>
<link href="https://rawgit.com/tempusdominus/bootstrap-4/master/build/css/tempusdominus-bootstrap-4.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<div class="input-group date" id="datetimepicker1" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1" />
<span class="input-group-addon" data-target="#datetimepicker1" data-toggle="datetimepicker">
<span class="fa fa-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
Related
Using the text-right class on my form labels, when going responsive, I want the label to left align so it's top-left instead of top-right, however the change to text-align:left does not appear to take effect.
#media (max-width: 767px) {
.form-group > label.text-right {
text-align: left;
color: red;
}
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="form-group row">
<label class="col-sm-2 col-form-label text-right">Label</label>
<div class="col-sm-10">
<input type="text" class="form-control">
</div>
</div>
Bootstrap's text alignment classes are responsive. You don't need any extra CSS.Use text-sm-right text-left...
<div class="form-group row">
<label class="col-sm-2 col-form-label text-sm-right text-left">Label</label>
<div class="col-sm-10">
<input type="text" class="form-control">
</div>
</div>
Demo: https://www.codeply.com/go/djMd492DHA
Note: The accepted answer is best for Bootstrap 4, but the following will work for Bootstrap 3
That's become !important is set on .text-right
You can also set !important. I might suggest not using the .text-right class and maybe make your own. Using !important to override another !important makes me cringe. I wouldn't recommend it, and I would recommend using !important as infrequently as possible. I can understand why Bootstrap uses it here, though.
I'll give you two options.
Here's what you could do:
#media (max-width: 767px) {
.form-group > label.text-right {
text-align: left !important;
color: red;
}
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="form-group row">
<label class="col-sm-2 col-form-label text-right">Label</label>
<div class="col-sm-10">
<input type="text" class="form-control">
</div>
</div>
Here's what I suggest doing:
#media (max-width: 767px) {
.form-group > label.align-label {
text-align: left;
color: red;
}
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="form-group row">
<label class="col-sm-2 col-form-label align-label">Label</label>
<div class="col-sm-10">
<input type="text" class="form-control">
</div>
</div>
JSFiddle: https://jsfiddle.net/va4p7b7e/
I am using bootstrap with jquery chosen from (https://harvesthq.github.io/chosen/
to modify the select input to allow for a more user friendly interface. But whenever I add a select input type in the second column, it adds padding or margin(?) to the first column (as seen by the blue background in the above JSFiddle).
Anyone know why the green background from the first column doesn't fully cover the first column? It should but it doesn't. If I remove the select and button from the second column, everything seems fine.
I can modify the css of the first column by adding padding to the column but that makes it non-responsive since if I resize the browser, it changes how much padding is needed.
Code:
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.min.css">
</head>
<body>
<div class="container">
<div class="row" style="background-color: blue;">
<div class="col-xs-5" style="background-color: green;">
<select data-placeholder="Choose a genre..." class="chosen-select" style="width:100px;">
<option value=""></option>
</select>
</div>
<div class="col-xs-7" style="background-color: purple;">
<select data-placeholder="Choose a genre..." multiple="true" class="chosen-select" style="width:200px;">
<option value=""></option>
</select>
<button type="button" class="btn btn-primary">Add</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.jquery.min.js"></script>
<script>
jQuery(".chosen-select").chosen(); <!-- Activate Chosen -->
</script>
</body>
</html>
Try using flex, give display: flex to parent and flex: 5; flex: 7; to child columns
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.min.css">
</head>
<body>
<div class="container">
<div class="row" style="background-color: blue; display: flex;">
<div class="col-xs-5" style="background-color: green; flex: 5;">
<select data-placeholder="Choose a genre..." class="chosen-select" style="width:100px;">
<option value=""></option>
</select>
</div>
<div class="col-xs-7" style="background-color: purple; flex: 7;">
<select data-placeholder="Choose a genre..." multiple="true" class="chosen-select" style="width:200px;">
<option value=""></option>
</select>
<button type="button" class="btn btn-primary">Add</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.jquery.min.js"></script>
<script>
jQuery(".chosen-select").chosen(); <!-- Activate Chosen -->
</script>
</body>
</html>
<div class="row" style="background-color: blue; line-height:35px;">
<div class="col-xs-5" style="background-color: green;">
<select data-placeholder="Choose a genre..." class="chosen-select" style="width:100px;">
<option value=""></option>
</select>
</div>
Add Line height to define a background then its render proper.
I have an md-select that after selecting multiple items, the width does not respect the 100% width limit. Here's an example:
Problem: problem image
/* global angular */
angular.module('app', ['ngMaterial']);
angular.module('app').controller('MainCtrl', function ($scope) {
$scope.fruits = [
'apple',
'banana',
'orange',
'mango',
'kiwi',
'pineapple',
'lemon',
'blueberry',
'strawberry'];
});
/* custom css */
.no-padding {
padding: 0 !important;
margin: 0 !important;
}
<!- html pages -!>
<script src="https://code.angularjs.org/1.5.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.9/angular-aria.min.js"></script>
<script src="https://code.angularjs.org/1.5.9/angular-animate.js"></script><script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div ng-app="app" ng-controller="MainCtrl as mainCtrl">
<div class="col-xs-4">
<div class="input-group">
<md-select class="form-control no-padding" ng-model="t" aria-label="t" multiple>
<md-option ng-value="opt" ng-repeat="opt in fruits">{{opt}}</md-option>
</md-select>
<a class="input-group-addon btn btn-md">
<i class="glyphicon glyphicon-remove"></i>
</a>
</div>
</div>
<div class="col-xs-4">
<input type="text" class="form-control">
</div>
</div>
The problem only occurs when the user selects 'md-select' items, see the example above.
The issues appears to be do to a conflict between bootstrap's input-group which uses table styling and Angular Material which does not. I would recommend using md-input-container instead.
/* global angular */
angular.module('app', ['ngMaterial']);
angular.module('app').controller('MainCtrl', function($scope) {
$scope.fruits = [
'apple',
'banana',
'orange',
'mango',
'kiwi',
'pineapple',
'lemon',
'blueberry',
'strawberry'
];
});
/* custom css */
.no-padding {
padding: 0 !important;
margin: 0 !important;
}
<!- html pages -!>
<script src="https://code.angularjs.org/1.5.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.9/angular-aria.min.js"></script>
<script src="https://code.angularjs.org/1.5.9/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div ng-app="app" ng-controller="MainCtrl as mainCtrl">
<div class="col-xs-4">
<md-input-container class="md-block" flex-gt-xs>
<md-select class="form-control no-padding" ng-model="t" aria-label="t" multiple>
<md-option ng-value="opt" ng-repeat="opt in fruits">{{opt}}</md-option>
</md-select>
<md-icon><i class="glyphicon glyphicon-remove"></i></md-icon>
</md-input-container>
</div>
<div class="col-xs-4">
<md-input-container class="md-block" flex-gt-xs>
<input type="text" class="form-control" aria-label="test input">
</md-input-container>
</div>
</div>
Hi everyone , I'm working on angularjs which preforms a form filling with validation ,after the submission the data goes into the table . I have an option to edit it . To edit i have used bootstrap modal to edit . Everything is going fine in plunker but the problem is , when i try to run the same code in local browser it is not working . Please help me with it
Let me show you the code :
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example of Bootstrap 3 Tables with Borders</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-messages.min.js'></script>
<script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.1.0.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="script.js"></script>
<script src="controller/listCtrl.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
<style type="text/css">
.bs-example {
margin: 20px;
}
</style>
</head>
<body>
<div ng-app="app" ng-controller="CustomerController">
<div class="main-content">
<!-- You only need this form and the form-basic.css -->
<form name="exampleForm" class="elegant-aero" ng-submit="addNew(personalDetails); form.$setPristine()">
<label>Name:</label>
<input type="text" name="userFirstName" ng-model="personalDetails.name" required />
<div ng-messages="exampleForm.userFirstName.$error">
<div ng-message="required">This field is required</div>
</div>
<label>Email Address:</label>
<input type="email" name="userEmail" ng-model="personalDetails.email" required />
<div ng-messages="exampleForm.userEmail.$error">
<div ng-message="required">This field is required</div>
<div ng-message="email">Your email address is invalid</div>
</div>
<label>Phone Number:</label>
<input type="text" name="userPhoneNumber" ng-model="personalDetails.phone" ng-pattern="/^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/" required/>
<div ng-messages="exampleForm.userPhoneNumber.$error">
<div ng-message="required">This field is required</div>
<div ng-message="pattern">Must be a valid 10 digit phone number</div>
</div>
<label>User Address:</label>
<textarea type="text" name="userMessage" class="form-control" rows="4" ng-model="personalDetails.address" ng-minlength="10" ng-maxlength="100" required></textarea>
<div ng-messages="exampleForm.userMessage.$error">
<div ng-message="required">This field is required</div>
<div ng-message="minlength">Message must be over 10 characters</div>
<div ng-message="maxlength">Message must not exceed 100 characters</div>
</div>
<br>
<div class="form-row">
<button type="submit" class="btn btn-primary" ng-click="submit()">Submit Form</button>
</div>
</form>
</div>
<div>
<div class="row" ng-hide="!personalDetails.length">
<div class="bs-example">
<table id="example" class="table table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name
</th>
<th>Email
</th>
<th>Phone Number
</th>
<th>Address
</th>
<th>Editing
</th>
<th>Delete
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="personalDetail in personalDetails">
<td>{{personalDetail.name}}</td>
<td>{{personalDetail.email}}</td>
<td>{{personalDetail.phone}}</td>
<td>{{personalDetail.address}}</td>
<td>
<button class="btn btn-default" ng-click="open(personalDetail)">Edit {{ personalDetail.name }}</button>
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>The Customer Name is: {{ personalDetail.name }}</h3>
</div>
<div class="model-body">
This is where the Customer Details Goes
<br />
<form name="exampleForm" class="elegant-aero" ng-submit="addNew(customer); form.$setPristine()">
<label>Name:</label>
<input type="text" name="userFirstName" ng-model="customer.name" required />
<div ng-messages="exampleForm.userFirstName.$error">
<div ng-message="required">This field is required</div>
</div>
<label>Email Address:</label>
<input type="email" name="userEmail" ng-model="customer.email" required />
<div ng-messages="exampleForm.userEmail.$error">
<div ng-message="required">This field is required</div>
<div ng-message="email">Your email address is invalid</div>
</div>
<label>Phone Number:</label>
<input type="text" name="userPhoneNumber" ng-model="customer.phone" ng-pattern="/^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/" required/>
<div ng-messages="exampleForm.userPhoneNumber.$error">
<div ng-message="required">This field is required</div>
<div ng-message="pattern">Must be a valid 10 digit phone number</div>
</div>
<label>User Address:</label>
<textarea type="text" name="userMessage" class="form-control" rows="4" ng-model="customer.address" ng-minlength="10" ng-maxlength="100" required></textarea>
<div ng-messages="exampleForm.userMessage.$error">
<div ng-message="required">This field is required</div>
<div ng-message="minlength">Message must be over 10 characters</div>
<div ng-message="maxlength">Message must not exceed 100 characters</div>
</div>
<br>
<div class="form-row">
<button class="btn btn-primary" ng-click="ok(personalDetail)">Update Customer</button>
</div>
</form>
</div>
</script>
</td>
<td>
<input type="button" class="btn btn-danger pull-right" data-ng-click="remove(personalDetail.name)" value="Remove">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
script.js
var app = angular.module('app', ['ui.bootstrap', 'ngMessages']);
app.controller('CustomerController', function($scope, $timeout, $modal, $log) {
var taskData = localStorage['tasksList'];
if (taskData !== undefined) {
$scope.personalDetails = JSON.parse(taskData);
}
$scope.personalDetails = [{
'name': 'Muhammed',
'email': 'shanid#shanid.com',
'phone': '8095187009',
'address': 'Bangalore'
}, {
'name': 'Muhammed',
'email': 'shanid#shanid.com',
'phone': '8095187009',
'address': 'Bangalore'
}, {
'name': 'Muhammed',
'email': 'shanid#shanid.com',
'phone': '8095187009',
'address': 'Bangalore'
}];
$scope.addNew = function(personalDetails) {
$scope.personalDetails.push({
'name': personalDetails.name,
'email': personalDetails.email,
'phone': personalDetails.phone,
'address': personalDetails.address,
});
$scope.PD = {};
localStorage['tasksList'] = JSON.stringify($scope.personalDetails);
$scope.personalDetails = angular.copy($scope.personalDetails);
};
$scope.remove = function(name) {
var index = -1;
var comArr = eval($scope.personalDetails);
for (var i = 0; i < comArr.length; i++) {
if (comArr[i].name === name) {
index = i;
break;
}
}
if (index === -1) {
alert("Something gone wrong");
}
$scope.personalDetails.splice(index, 1);
};
// MODAL WINDOW
$scope.open = function(customer) {
var modalInstance = $modal.open({
controller: "ModalInstanceCtrl",
templateUrl: 'myModalContent.html',
resolve: {
customer: function() {
return customer;
}
}
});
};
});
app.controller('ModalInstanceCtrl', function($scope, $modalInstance, customer) {
$scope.customer = customer;
$scope.ok = function(customer) {
$modalInstance.close($scope.customer);
};
});
//]]>
style.css
/*
Credit: http://www.sanwebe.com/2013/10/css-html-form-styles
*/
.elegant-aero {
margin-left:auto;
margin-right:auto;
margin-top: 25px;
max-width: 600px;
background: #D2E9FF;
padding: 20px 20px 20px 20px;
font: 12px Arial, Helvetica, sans-serif;
color: #666;
}
.elegant-aero label {
display: block;
margin: 0px 0px 5px;
}
.elegant-aero input[type="text"], .elegant-aero input[type="email"], .elegant-aero textarea {
color: #888;
width: 60%;
padding: 0px 0px 0px 5px;
border: 1px solid #C5E2FF;
background: #FBFBFB;
outline: 0;
-webkit-box-shadow:inset 0px 1px 6px #ECF3F5;
box-shadow: inset 0px 1px 6px #ECF3F5;
font: 200 12px/25px Arial, Helvetica, sans-serif;
height: 30px;
line-height:15px;
margin: 2px 6px 16px 0px;
}
.elegant-aero textarea{
height:100px;
padding: 5px 0px 0px 5px;
width: 60%;
}
.elegant-aero div {
display:inline-block;
vertical-align:top;
color: red;
margin-top: 5px;
}
And let me show you my plunker which works fine :https://plnkr.co/edit/zHzQU09RI6bKcDtC8bzy?p=preview
Please help me with this . It will be grateful if somebody help me with this .
There are some references which won't load when you run it on your machine, change them as below,
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-messages.min.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.2.js"></script>
<script src="sample.js"></script>
I an working on my tutorial project:
I have this code:
// Code goes here
angular.module('switchdemo', []).controller('DemoController', function($scope){
$scope.init = function(){
$scope.status = true;
}
$scope.changeStatus = function(){
$scope.status = !$scope.status;
}
})
/* Styles go here */
.active, .inactive {font-size:40px;cursor:pointer;}
.active, .inactive {font-size:40px;cursor:pointer;}
i.active { color: #5cb85c}
i.inactive {color: #d9534f}
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<script data-require="angular.js#*" data-semver="1.3.6" src="https://code.angularjs.org/1.3.6/angular.js"></script>
<script data-require="jquery#*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="switchdemo">
<div ng-controller="DemoController" ng-init="init()">
<div class="well">
<i class="fa fa-toggle-on active" ng-if="status == true" ng-click="changeStatus();"></i>
<i class="fa fa-toggle-on fa-rotate-180 inactive" ng-if="status == false" ng-click="changeStatus();"></i>
<h5>dummy! </h5>
</div>
<pre>{{ status }}</pre>
</div>
</body>
</html>
How can I make dummy! word to be on the same line with ON/OFF switch from the right.
Like this:
H5 is a block element by default, which means it will be on a new line. Use span or assign display: inline or display: inline-block to your H5 tag.
You can use the float property set to left as follows:
<div class="well">
<div>
<i class="fa fa-toggle-on active" ng-if="status == true" ng-click="changeStatus();"></i>
<i class="fa fa-toggle-on fa-rotate-180 inactive" ng-if="status == false" ng-click="changeStatus();"></i>
</div>
<h5 class="align-left">dummy! </h5>
CSS:
.align-left {
float: left;
}
You can set display: inline-block to <h5>, because <h5> acts like a block element
// Code goes here
angular.module('switchdemo', []).controller('DemoController', function($scope){
$scope.init = function(){
$scope.status = true;
}
$scope.changeStatus = function(){
$scope.status = !$scope.status;
}
})
/* Styles go here */
h5{ display: inline-block;}
.active, .inactive {font-size:40px;cursor:pointer;}
.active, .inactive {font-size:40px;cursor:pointer;}
i.active { color: #5cb85c}
i.inactive {color: #d9534f}
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<script data-require="angular.js#*" data-semver="1.3.6" src="https://code.angularjs.org/1.3.6/angular.js"></script>
<script data-require="jquery#*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="switchdemo">
<div ng-controller="DemoController" ng-init="init()">
<div class="well">
<i class="fa fa-toggle-on active" ng-if="status == true" ng-click="changeStatus();"></i>
<i class="fa fa-toggle-on fa-rotate-180 inactive" ng-if="status == false" ng-click="changeStatus();"></i>
<h5>dummy! </h5>
</div>
<pre>{{ status }}</pre>
</div>
</body>
</html>