Copy and Paste Table Using ContentEditable - javascript

This video is a good representation of the issue I am facing: https://drive.google.com/file/d/1jN44lUpnbVDv_m3LuPhlJl6RFUu884jz/view. I cannot copy and paste a table from another a tab without it breaking down. Because this uses local storage, here is a JSFiddle: https://jsfiddle.net/znj537w0/1/.
var app = angular.module("TodoApp", ["LocalStorageModule", 'ngSanitize']);
app.controller("TodoController", function ($scope, localStorageService) {
if (!localStorageService.get("taskListActive")) {
$scope.tasksActive = [{
text: "Do me next",
priority: 1,
complete: false
},
{
text: "I'm not important",
priority: 0,
complete: false
}
];
} else {
$scope.tasksActive = localStorageService.get("taskListActive");
}
if (!localStorageService.get("taskListComplete")) {
$scope.tasksComplete = [{
text: "I'm already done",
priority: 0,
complete: true
}];
} else {
$scope.tasksComplete = localStorageService.get("taskListComplete");
}
$scope.totalTasks = function () {
console.log($scope.tasksComplete.length);
return $scope.tasksActive.length + $scope.tasksComplete.length;
};
$scope.totalRemaining = function () {
return $scope.tasksActive.length;
};
$scope.totalComplete = function () {
return $scope.tasksActive.length;
};
$scope.todoAdd = function () {
if ($scope.taskInput.name) {
$scope.tasksActive.unshift({
text: $scope.taskInput.name,
priority: $scope.taskInput.priority || 0,
complete: false
});
$scope.taskInput.name = "";
$scope.taskInput.priority = 0;
}
};
$scope.togglePriority = function (task) {
if (task.priority === 0) {
task.priority = 1;
console.log("a");
} else {
task.priority = 0;
}
};
$scope.completeTask = function (task) {
//var task = $scope.tasksActive[index];
task.complete = true;
task.priority = 0;
$scope.tasksActive.splice($scope.tasksActive.indexOf(task), 1);
$scope.tasksComplete.unshift(task);
};
$scope.uncompleteTask = function (task) {
task.complete = false;
$scope.tasksComplete.splice($scope.tasksComplete.indexOf(task), 1);
$scope.tasksActive.unshift(task);
};
$scope.deleteTask = function (task, list) {
if (list == "active") {
$scope.tasksActive.splice($scope.tasksActive.indexOf(task), 1);
} else {
$scope.tasksComplete.splice($scope.tasksComplete.indexOf(task), 1);
}
};
$scope.clearCompleted = function () {
var deleteArr = [];
for (var i = 0; i < $scope.tasksComplete.length; i++) deleteArr.push(i);
for (var i = 0; i < deleteArr.length; i++) {
var task = i;
$scope.tasksComplete.splice($scope.tasksComplete.indexOf(task) - 1, 1);
}
};
$scope.$watch(
"tasksActive",
function (newVal, oldVal) {
console.log("tasksActive");
if (newVal !== null && angular.isDefined(newVal) && newVal !== oldVal) {
localStorageService.add("taskListActive", angular.toJson(newVal));
}
},
true
);
$scope.$watch(
"tasksComplete",
function (newVal, oldVal) {
console.log("tasksComplete");
if (newVal !== null && angular.isDefined(newVal) && newVal !== oldVal) {
localStorageService.add("taskListComplete", angular.toJson(newVal));
}
},
true
);
$scope.contentEdit = function (event, task) {
const newText = event.target.innerText;
if (newText && task) {
task.text = newText;
console.log(event.target.innerText);
}
}
});
const newText = event.target.innerHTML;
*,
*:before,
*:after {
box-sizing: border-box;
}
.max-width {
max-width: 600px;
}
.centered {
margin: auto;
}
.text-center-h {
text-align: center;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.list-no-style {
list-style: none outside none;
padding-left: 0;
}
html,
body {
width: 100%;
min-height: 100%;
color: #333;
padding: 20px 20px 20px 10px;
}
html {
font-size: 10px;
}
body {
font-size: 1.6rem;
background: linear-gradient(45deg, #bbdefb 0%, #311b92 100%);
}
p {
white-space: pre-wrap;
margin: 1em;
color: #777;
}
.block {
font-size: 0;
margin-bottom: 24px;
}
.block>* {
font-size: medium;
display: inline-block;
vertical-align: top;
}
.block-justify {
text-align: justify;
}
.block-justify:after {
content: '';
display: inline-block;
width: 100%;
}
.block-justify>* {
display: inline-block;
vertical-align: top;
}
.block-table {
display: table;
table-layout: fixed;
width: 100%;
}
.block-table>* {
display: table-cell;
}
.fa {
font-size: 2rem;
color: #bbb;
padding: 0 6px;
transition: color 0.2s ease;
}
.fa.-clickable {
cursor: pointer;
}
button.-add,
.btn.-add {
border: none;
padding: 5px 0 0;
border-bottom: 3px solid #0eb2f0;
background: #56c9f5;
transition: all 0.1s ease;
}
button.-add:hover,
.btn.-add:hover {
background: #6ed1f6;
}
button.-add:active,
.btn.-add:active {
border-bottom-width: 1px;
}
button.-clear,
.btn.-clear {
border: none;
padding: 0;
background: none;
color: #bbb;
}
button.-clear:hover,
.btn.-clear:hover {
color: tomato;
}
.task-list._wrap {
background: #fff;
padding: 20px;
margin-top: 50px;
margin-bottom: 50px;
box-shadow: 18px 18px 0 0 #56c9f5;
}
.task-list._wrap h1 {
font-size: 5rem;
}
.totals._wrap,
.search {
vertical-align: bottom;
}
.totals._wrap {
font-size: 0;
}
.totals._grand-total,
.totals._detail {
display: inline-block;
vertical-align: top;
font-size: medium;
}
.totals._grand-total {
text-align: center;
height: 90px;
padding: 6px 12px;
background: #64b5f6;
color: #fff;
overflow: hidden;
}
.totals._grand-total span {
display: block;
}
.totals._total-number {
font-size: 3rem;
}
.totals._detail p {
height: 60px;
padding: 3px 6px;
}
.search._wrap {
position: relative;
}
.search .fa {
position: absolute;
left: 3px;
top: 50%;
transform: translateY(-50%);
}
.search input.-text {
padding-left: 30px;
}
.add-form._wrap {
position: relative;
height: 80px;
padding: 12px;
border: 1px solid #694ede;
box-shadow: 3px 3px 0 0 #694ede;
}
.add-form input[type="text"] {
width: 100%;
}
.add-form._buttons {
position: absolute;
right: 12px;
padding: 2px;
width: 180px;
font-size: 0;
}
.add-form._checkbox-wrap,
.add-form._submit-button {
display: inline-block;
vertical-align: middle;
font-size: medium;
height: 100%;
}
.add-form._checkbox {
padding: 0 12px;
}
.add-form._checkbox input {
visibility: hidden;
}
.add-form._checkbox .fa:hover {
color: #7b7b7b;
}
.add-form._checkbox input:checked+.fa {
color: tomato;
}
.add-form._submit-button {
height: 42px;
padding: 0 20px;
}
input.-text {
padding: 6px 12px;
height: 46px;
}
input.-add-task {
border: none;
border: 2px solid #64b5f6;
}
input.-search {
border: 2px solid #64b5f6;
}
.task._item {
background: #fff;
box-shadow: 3px 3px 0 0;
border: 1px solid;
overflow: auto;
margin-bottom: 6px;
}
.task._item a {
text-decoration: none;
}
.task.-done-false {
color: #56c9f5;
}
.task.-done-false p,
.task.-done-false a {
color: #333;
}
.task.-done-true {
color: #d5d5d5;
}
.task.-done-true p,
.task.-done-true a {
color: #bbb;
}
.task._task-left,
.task._task-right {
height: 66px;
padding: 10px;
}
.task._task-left {
width: calc(100% - 180px);
margin-bottom: 15px;
height: 100px;
overflow: auto;
}
.task._task-right {
width: 180px;
overflow: auto;
}
.task._task-right .btn {
display: inline-block;
margin-top: 3px;
margin-bottom: 15px;
}
.task._task-right .btn.-priority:hover .fa {
color: #7b7b7b;
}
.task._task-right .btn.-complete:hover .fa,
.task._task-right .btn.-re-open:hover .fa {
color: #0eb2f0;
}
.task._task-right .btn.-clear:hover .fa {
color: tomato;
}
.task.-task-priority-high ._task-left {
padding-left: 28px;
position: relative;
}
.task.-task-priority-high ._task-left:before {
position: absolute;
content: '';
width: 6px;
top: 12px;
bottom: 12px;
left: 12px;
background: tomato;
}
.task.-task-priority-high .btn.-priority .fa {
color: tomato;
}
p {
margin: 1em;
color: #777;
}
p.changed {
color: black;
}
button {
margin: 0 1em;
}
.btn {
display: inline-block;
*display: inline;
padding: 4px 10px 4px;
margin-bottom: 0;
*margin-left: 0.3em;
font-size: 13px;
line-height: 18px;
*line-height: 20px;
color: #333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
*background-color: #e6e6e6;
background-image: -ms-linear-gradient(top, #fff, #e6e6e6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #fff, #e6e6e6);
background-image: -o-linear-gradient(top, #fff, #e6e6e6);
background-image: linear-gradient(top, #fff, #e6e6e6);
background-image: -moz-linear-gradient(top, #fff, #e6e6e6);
background-repeat: repeat-x;
border: 1px solid #ccc;
*border: 0;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-bottom-color: #b3b3b3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
*zoom: 1;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn:hover {
background-color: #e6e6e6;
*background-color: #d9d9d9;
color: #333;
text-decoration: none;
background-color: #e6e6e6;
*background-color: #d9d9d9;
background-position: 0 -15px;
-webkit-transition: background-position 0.1s linear;
-moz-transition: background-position 0.1s linear;
-ms-transition: background-position 0.1s linear;
-o-transition: background-position 0.1s linear;
transition: background-position 0.1s linear;
}
.btn:active {
background-color: #e6e6e6;
*background-color: #d9d9d9;
background-color: #ccc \9;
background-color: #e6e6e6;
background-color: #d9d9d9 \9;
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn:first-child {
*margin-left: 0;
}
.btn:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.btn.active {
background-color: #e6e6e6;
*background-color: #d9d9d9;
background-color: #ccc \9;
background-color: #e6e6e6;
background-color: #d9d9d9 \9;
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn.disabled {
background-color: #e6e6e6;
*background-color: #d9d9d9;
}
.btn[disabled] {
background-color: #e6e6e6;
*background-color: #d9d9d9;
}
.btn-primary {
background-color: #0074cc;
*background-color: #05c;
background-image: -ms-linear-gradient(top, #08c, #05c);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#08c), to(#05c));
background-image: -webkit-linear-gradient(top, #08c, #05c);
background-image: -o-linear-gradient(top, #08c, #05c);
background-image: -moz-linear-gradient(top, #08c, #05c);
background-image: linear-gradient(top, #08c, #05c);
background-repeat: repeat-x;
border-color: #05c #05c #003580;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#0088cc', endColorstr='#0055cc', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-primary:hover {
background-color: #05c;
*background-color: #004ab3;
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-primary:active {
background-color: #05c;
*background-color: #004ab3;
background-color: #004099 \9;
}
.btn-primary.active {
background-color: #05c;
*background-color: #004ab3;
background-color: #004099 \9;
color: rgba(255, 255, 255, 0.75);
}
.btn-primary.disabled {
background-color: #05c;
*background-color: #004ab3;
}
.btn-primary[disabled] {
background-color: #05c;
*background-color: #004ab3;
}
.btn-warning {
background-color: #faa732;
*background-color: #f89406;
background-image: -ms-linear-gradient(top, #fbb450, #f89406);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
background-image: -webkit-linear-gradient(top, #fbb450, #f89406);
background-image: -o-linear-gradient(top, #fbb450, #f89406);
background-image: -moz-linear-gradient(top, #fbb450, #f89406);
background-image: linear-gradient(top, #fbb450, #f89406);
background-repeat: repeat-x;
border-color: #f89406 #f89406 #ad6704;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89406', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-warning:hover {
background-color: #f89406;
*background-color: #df8505;
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-warning:active {
background-color: #f89406;
*background-color: #df8505;
background-color: #c67605 \9;
}
.btn-warning.active {
background-color: #f89406;
*background-color: #df8505;
background-color: #c67605 \9;
color: rgba(255, 255, 255, 0.75);
}
.btn-warning.disabled {
background-color: #f89406;
*background-color: #df8505;
}
.btn-warning[disabled] {
background-color: #f89406;
*background-color: #df8505;
}
.btn-danger {
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-danger:hover {
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-success {
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-success:hover {
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-info {
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-info:hover {
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-inverse {
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-inverse:hover {
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-danger.active {
color: rgba(255, 255, 255, 0.75);
}
.btn-success.active {
color: rgba(255, 255, 255, 0.75);
}
.btn-info.active {
color: rgba(255, 255, 255, 0.75);
}
.btn-inverse.active {
color: rgba(255, 255, 255, 0.75);
}
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.0/angular.min.js">
</script>
<script type="text/javascript" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/131045/ngLocalStorage.js">
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</link>
<div ng-app="TodoApp" ng-controller="TodoController" class="task-list _wrap centered max-width text-center-h ng-scope"style="font-family: Arial, sans-serif;">
<h1 style="font-family: Arial, sans-serif;">Notes:</h1>
<div class="block-justify" style="position: relative; left: -153px; top: -14px;">
<div class="totals _wrap text-left">
<div class="totals _detail">
</div>
</div>
<div class="search _wrap text-right">
<input class="input -text -search" type="text" placeholder="Search tasks" ng-model="taskSearch.name" />
<i class="fa fa-search"></i>
</div>
</div>
<form class="add-form _wrap block text-left">
<input class="input -text -add-task" type="text" placeholder="Add a new task" ng-model="taskInput.name" ng-model-instant />
<div class="add-form _buttons text-right">
<p>Priority</p>
<div class="add-form _checkbox-wrap">
<label class="add-form _checkbox"><input class="input -checkbox" type="checkbox" name="priority"
ng-model="taskInput.priority" ng-init="checked=false" parse-int ng-true-value="1"
ng-false-value="0"></i></label>
</div>
<button class="add-form _submit-button btn -add" ng-click="todoAdd()" style="position: relative; left: 18px; top: -3px; height: 47px; transform-origin: 50% 78%;">Add</button>
</div>
</form>
<ul class="list-no-style text-left">
<li ng-repeat="task in tasksActive | filter:taskSearch.name | orderBy:'-priority'"
class="task _item -done-{{ task.complete }} -task-priority-{{ task.priority==true ? 'high' : 'low' }} block-table">
<div class="task _task-left" ;>
<p id="myText" contenteditable class="changed"
ng-on-blur="contentEdit($event, task)"
ng-bind-html="task.text"></p>
</div>
<div class="task _task-right text-right">
<a href ng-click="togglePriority(task)" class="btn -task-action -priority"
title="Change priority"><i class="fa fa-exclamation"></i></a>
<a href ng-click="completeTask(task)" class="btn -task-action -complete" title="Complete"><i
class="fa fa-check"></i></a>
<a href ng-click="deleteTask(task,'active')" class="btn -clear" title="Delete"><i
class="fa fa-times-circle"></i></a>
</div>
</li>
<li ng-repeat="task in tasksComplete | filter:taskSearch.name"
class="task _item -done-{{ task.complete }} block">
<p style="white-space: pre-wrap;" class="task _task-left">{{ task.text }}</p>
<div class="task _task-right text-right">
<a href ng-click="uncompleteTask(task)" class="btn -task-action -re-open" title="Re-open"><i
class="fa fa-undo"></i></a>
<a href ng-click="deleteTask(task,'complete')" class="btn -clear" title="Delete"><i
class="fa fa-times-circle"></i></a>
</div>
</li>
</ul>
<form class="text-right">
<button class="btn -clear" ng-show="tasksComplete.length" ng-click="clearCompleted()">Delete all
completed</button>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.8.0/angular-sanitize.min.js"></script>


Use this:
$scope.contentEdit = function (event, task) {
const newText = event.target.innertHTML;
if (newText && task) {
task.text = newText;
}
}
Change innerText to innerHTML. https://jsfiddle.net/3uvfjdew/

Related

Onclick event on search bar suggestions

I have added a search bar with suggestion elements. On click of search bar all the elements is displayed but onclick event is not working on these list suggestion elements.
Have added click event to these suggestions which is stored in li .I want some actions to be performed onclick of these elements
$(document).on("click", ".search.search-list", function(e) {
console.log('clicked')
})
.search {
position: relative;
margin: 0 auto;
width: 300px;
}
.search input {
height: 26px;
width: 100%;
padding: 0 12px 0 25px;
/* background: white url("https://cssdeck.com/uploads/media/items/5/5JuDgOa.png") 8px 6px no-repeat; */
border-width: 1px;
border-style: solid;
border-color: #a8acbc #babdcc #c0c3d2;
border-radius: 13px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
-moz-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
-ms-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
-o-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
}
.search input:focus {
outline: none;
border-color: #66b1ee;
-webkit-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
-moz-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
-ms-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
-o-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
}
.search input:focus + .results { display: block }
.search .results {
display: none;
position: absolute;
top: 35px;
left: 0;
right: 0;
z-index: 10;
padding: 0;
margin: 0;
border-width: 1px;
border-style: solid;
border-color: #cbcfe2 #c8cee7 #c4c7d7;
border-radius: 3px;
background-color: #fdfdfd;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdfdfd), color-stop(100%, #eceef4));
background-image: -webkit-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -moz-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -ms-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -o-linear-gradient(top, #fdfdfd, #eceef4);
background-image: linear-gradient(top, #fdfdfd, #eceef4);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-ms-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.search .results li { display: block }
.search .results li:first-child { margin-top: -1px }
.search .results li:first-child:before, .search .results li:first-child:after {
display: block;
content: '';
width: 0;
height: 0;
position: absolute;
left: 50%;
margin-left: -5px;
border: 5px outset transparent;
}
.search .results li:first-child:before {
border-bottom: 5px solid #c4c7d7;
top: -11px;
}
.search .results li:first-child:after {
border-bottom: 5px solid #fdfdfd;
top: -10px;
}
.search .results li:first-child:hover:before, .search .results li:first-child:hover:after { display: none }
.search .results li:last-child { margin-bottom: -1px }
.search .results a {
display: block;
position: relative;
margin: 0 -1px;
padding: 6px 40px 6px 10px;
color: #808394;
font-weight: 500;
text-shadow: 0 1px #fff;
border: 1px solid transparent;
border-radius: 3px;
}
.search .results a span { font-weight: 200 }
.search .results a:before {
content: '';
width: 18px;
height: 18px;
position: absolute;
top: 50%;
right: 10px;
margin-top: -9px;
/* background: url("https://cssdeck.com/uploads/media/items/7/7BNkBjd.png") 0 0 no-repeat; */
}
.search .results a:hover {
text-decoration: none;
color: #fff;
text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
border-color: #2380dd #2179d5 #1a60aa;
background-color: #338cdf;
/* background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #59aaf4), color-stop(100%, #338cdf));
background-image: -webkit-linear-gradient(top, #59aaf4, #338cdf);
background-image: -moz-linear-gradient(top, #59aaf4, #338cdf);
background-image: -ms-linear-gradient(top, #59aaf4, #338cdf);
background-image: -o-linear-gradient(top, #59aaf4, #338cdf);
background-image: linear-gradient(top, #59aaf4, #338cdf); */
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-ms-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-o-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
}
:-moz-placeholder {
color: #a7aabc;
font-weight: 200;
}
::-webkit-input-placeholder {
color: #a7aabc;
font-weight: 200;
}
.lt-ie9 .search input { line-height: 26px }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="modal fade" id="search-bar" role="dialog">
<div class="modal-dialog search-modal">
<div class="modal-content search-modal">
<div class="modal-body">
<section class="main">
<form class="search">
<input type="text" class="search-input" name="q" placeholder="Search..." />
<ul class="results" >
<li class="search-list">Search Result #1<br /><span>Description...</span></li>
<li class="search-list">Search Result #2<br /><span>Description...</span></li>
<li class="search-list">Search Result #3<br /><span>Description...</span></li>
<li class="search-list">Search Result #4</li>
</ul>
</form>
</section>
</div>
</div>
</div>
</div>

You just need to make two changes. I'll explain what I did.
The reason why the click event on search-list was not working is because you have defined it in js as .search.search-list. There should be a space between them, like .search .search-list, as #Aioros suggested.
You have displayed the dropdown using CSS :focus, like when the cursor is inside search input, the dropdown should show. Now when the user clicks on one of the items from the dropdown, the focus shifts away from the search input field, thus making the dropdown invisible again. I have used a small jQuery solution to display the dropdown when the user clicks on search field.
$(".search-input").on("click", function(e) {
$(".results").css({
"display": "block"
});
console.log("HEY");
})
$(".search .search-list").on("click", function(e) {
console.log('clicked')
})
.search {
position: relative;
margin: 0 auto;
width: 300px;
}
.search input {
height: 26px;
width: 100%;
padding: 0 12px 0 25px;
/* background: white url("https://cssdeck.com/uploads/media/items/5/5JuDgOa.png") 8px 6px no-repeat; */
border-width: 1px;
border-style: solid;
border-color: #a8acbc #babdcc #c0c3d2;
border-radius: 13px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
-moz-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
-ms-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
-o-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
}
.search input:focus {
outline: none;
border-color: #66b1ee;
-webkit-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
-moz-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
-ms-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
-o-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
}
/*.search input:focus + .results { display: block }*/
.search .results {
display: none;
position: absolute;
top: 35px;
left: 0;
right: 0;
z-index: 10;
padding: 0;
margin: 0;
border-width: 1px;
border-style: solid;
border-color: #cbcfe2 #c8cee7 #c4c7d7;
border-radius: 3px;
background-color: #fdfdfd;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdfdfd), color-stop(100%, #eceef4));
background-image: -webkit-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -moz-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -ms-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -o-linear-gradient(top, #fdfdfd, #eceef4);
background-image: linear-gradient(top, #fdfdfd, #eceef4);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-ms-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.search .results li {
display: block
}
.search .results li:first-child {
margin-top: -1px
}
.search .results li:first-child:before,
.search .results li:first-child:after {
display: block;
content: '';
width: 0;
height: 0;
position: absolute;
left: 50%;
margin-left: -5px;
border: 5px outset transparent;
}
.search .results li:first-child:before {
border-bottom: 5px solid #c4c7d7;
top: -11px;
}
.search .results li:first-child:after {
border-bottom: 5px solid #fdfdfd;
top: -10px;
}
.search .results li:first-child:hover:before,
.search .results li:first-child:hover:after {
display: none
}
.search .results li:last-child {
margin-bottom: -1px
}
.search .results a {
display: block;
position: relative;
margin: 0 -1px;
padding: 6px 40px 6px 10px;
color: #808394;
font-weight: 500;
text-shadow: 0 1px #fff;
border: 1px solid transparent;
border-radius: 3px;
}
.search .results a span {
font-weight: 200
}
.search .results a:before {
content: '';
width: 18px;
height: 18px;
position: absolute;
top: 50%;
right: 10px;
margin-top: -9px;
/* background: url("https://cssdeck.com/uploads/media/items/7/7BNkBjd.png") 0 0 no-repeat; */
}
.search .results a:hover {
text-decoration: none;
color: #fff;
text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
border-color: #2380dd #2179d5 #1a60aa;
background-color: #338cdf;
/* background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #59aaf4), color-stop(100%, #338cdf));
background-image: -webkit-linear-gradient(top, #59aaf4, #338cdf);
background-image: -moz-linear-gradient(top, #59aaf4, #338cdf);
background-image: -ms-linear-gradient(top, #59aaf4, #338cdf);
background-image: -o-linear-gradient(top, #59aaf4, #338cdf);
background-image: linear-gradient(top, #59aaf4, #338cdf); */
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-ms-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-o-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
}
:-moz-placeholder {
color: #a7aabc;
font-weight: 200;
}
::-webkit-input-placeholder {
color: #a7aabc;
font-weight: 200;
}
.lt-ie9 .search input {
line-height: 26px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="modal fade" id="search-bar" role="dialog">
<div class="modal-dialog search-modal">
<div class="modal-content search-modal">
<div class="modal-body">
<section class="main">
<form class="search">
<input type="text" class="search-input" name="q" placeholder="Search..." />
<ul class="results">
<li class="search-list">Search Result #1<br /><span>Description...</span></li>
<li class="search-list">Search Result #2<br /><span>Description...</span></li>
<li class="search-list">Search Result #3<br /><span>Description...</span></li>
<li class="search-list">Search Result #4</li>
</ul>
</form>
</section>
</div>
</div>
</div>
</div>

Content Editable Loses Its Tab/ New Line on Refresh

I'm trying to have list elements on different lines. Using contenteditable, I am able to do so. However, when I reload the page, the content remains but without the separation between items. As a visual:
(Contenteditable)
Bones:
Bones are cool
Bones are helpful
(After refreshing the page)
Bones: 1. Bones are cool. 2. Bones are helpful.
Here's a video, too. You will likely notice when watching the text copying and pasting itself as well, which is odd: https://drive.google.com/file/d/1yN2oUntxAkPdkXNWCjiWC1XFcNqa_O1j/view
Here's the code as well that you may need to open in JSFiddle because there is local storage:
var app = angular.module("TodoApp", ["LocalStorageModule"]);
app.controller("TodoController", function ($scope, localStorageService) {
if (!localStorageService.get("taskListActive")) {
$scope.tasksActive = [{
text: "Do me next",
priority: 1,
complete: false
},
{
text: "I'm not important",
priority: 0,
complete: false
}
];
} else {
$scope.tasksActive = localStorageService.get("taskListActive");
}
if (!localStorageService.get("taskListComplete")) {
$scope.tasksComplete = [{
text: "I'm already done",
priority: 0,
complete: true
}];
} else {
$scope.tasksComplete = localStorageService.get("taskListComplete");
}
$scope.totalTasks = function () {
console.log($scope.tasksComplete.length);
return $scope.tasksActive.length + $scope.tasksComplete.length;
};
$scope.totalRemaining = function () {
return $scope.tasksActive.length;
};
$scope.totalComplete = function () {
return $scope.tasksActive.length;
};
$scope.todoAdd = function () {
if ($scope.taskInput.name) {
$scope.tasksActive.unshift({
text: $scope.taskInput.name,
priority: $scope.taskInput.priority || 0,
complete: false
});
$scope.taskInput.name = "";
$scope.taskInput.priority = 0;
}
};
$scope.togglePriority = function (task) {
if (task.priority === 0) {
task.priority = 1;
console.log("a");
} else {
task.priority = 0;
}
};
$scope.completeTask = function (task) {
//var task = $scope.tasksActive[index];
task.complete = true;
task.priority = 0;
$scope.tasksActive.splice($scope.tasksActive.indexOf(task), 1);
$scope.tasksComplete.unshift(task);
};
$scope.uncompleteTask = function (task) {
task.complete = false;
$scope.tasksComplete.splice($scope.tasksComplete.indexOf(task), 1);
$scope.tasksActive.unshift(task);
};
$scope.deleteTask = function (task, list) {
if (list == "active") {
$scope.tasksActive.splice($scope.tasksActive.indexOf(task), 1);
} else {
$scope.tasksComplete.splice($scope.tasksComplete.indexOf(task), 1);
}
};
$scope.clearCompleted = function () {
var deleteArr = [];
for (var i = 0; i < $scope.tasksComplete.length; i++) deleteArr.push(i);
for (var i = 0; i < deleteArr.length; i++) {
var task = i;
$scope.tasksComplete.splice($scope.tasksComplete.indexOf(task) - 1, 1);
}
};
$scope.$watch(
"tasksActive",
function (newVal, oldVal) {
console.log("tasksActive");
if (newVal !== null && angular.isDefined(newVal) && newVal !== oldVal) {
localStorageService.add("taskListActive", angular.toJson(newVal));
}
},
true
);
$scope.$watch(
"tasksComplete",
function (newVal, oldVal) {
console.log("tasksComplete");
if (newVal !== null && angular.isDefined(newVal) && newVal !== oldVal) {
localStorageService.add("taskListComplete", angular.toJson(newVal));
}
},
true
);
$scope.contentEdit = function (event, task) {
const newText = event.target.innerText;
if (newText && task) {
task.text = newText;
console.log(event.target.innerText);
}
}
});
*,
*:before,
*:after {
box-sizing: border-box;
}
.max-width {
max-width: 600px;
}
.centered {
margin: auto;
}
.text-center-h {
text-align: center;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.list-no-style {
list-style: none outside none;
padding-left: 0;
}
html,
body {
width: 100%;
min-height: 100%;
color: #333;
padding: 20px 20px 20px 10px;
}
html {
font-size: 10px;
}
body {
font-size: 1.6rem;
background: linear-gradient(45deg, #bbdefb 0%, #311b92 100%);
}
p {
margin: 0;
}
.block {
font-size: 0;
margin-bottom: 24px;
}
.block>* {
font-size: medium;
display: inline-block;
vertical-align: top;
}
.block-justify {
text-align: justify;
}
.block-justify:after {
content: '';
display: inline-block;
width: 100%;
}
.block-justify>* {
display: inline-block;
vertical-align: top;
}
.block-table {
display: table;
table-layout: fixed;
width: 100%;
}
.block-table>* {
display: table-cell;
}
.fa {
font-size: 2rem;
color: #bbb;
padding: 0 6px;
transition: color 0.2s ease;
}
.fa.-clickable {
cursor: pointer;
}
button.-add,
.btn.-add {
border: none;
padding: 5px 0 0;
border-bottom: 3px solid #0eb2f0;
background: #56c9f5;
transition: all 0.1s ease;
}
button.-add:hover,
.btn.-add:hover {
background: #6ed1f6;
}
button.-add:active,
.btn.-add:active {
border-bottom-width: 1px;
}
button.-clear,
.btn.-clear {
border: none;
padding: 0;
background: none;
color: #bbb;
}
button.-clear:hover,
.btn.-clear:hover {
color: tomato;
}
.task-list._wrap {
background: #fff;
padding: 20px;
margin-top: 50px;
margin-bottom: 50px;
box-shadow: 18px 18px 0 0 #56c9f5;
}
.task-list._wrap h1 {
font-size: 5rem;
}
.totals._wrap,
.search {
vertical-align: bottom;
}
.totals._wrap {
font-size: 0;
}
.totals._grand-total,
.totals._detail {
display: inline-block;
vertical-align: top;
font-size: medium;
}
.totals._grand-total {
text-align: center;
height: 90px;
padding: 6px 12px;
background: #64b5f6;
color: #fff;
overflow: hidden;
}
.totals._grand-total span {
display: block;
}
.totals._total-number {
font-size: 3rem;
}
.totals._detail p {
height: 60px;
padding: 3px 6px;
}
.search._wrap {
position: relative;
}
.search .fa {
position: absolute;
left: 3px;
top: 50%;
transform: translateY(-50%);
}
.search input.-text {
padding-left: 30px;
}
.add-form._wrap {
position: relative;
height: 80px;
padding: 12px;
border: 1px solid #694ede;
box-shadow: 3px 3px 0 0 #694ede;
}
.add-form input[type="text"] {
width: 100%;
}
.add-form._buttons {
position: absolute;
right: 12px;
padding: 2px;
width: 180px;
font-size: 0;
}
.add-form._checkbox-wrap,
.add-form._submit-button {
display: inline-block;
vertical-align: middle;
font-size: medium;
height: 100%;
}
.add-form._checkbox {
padding: 0 12px;
}
.add-form._checkbox input {
visibility: hidden;
}
.add-form._checkbox .fa:hover {
color: #7b7b7b;
}
.add-form._checkbox input:checked+.fa {
color: tomato;
}
.add-form._submit-button {
height: 42px;
padding: 0 20px;
}
input.-text {
padding: 6px 12px;
height: 46px;
}
input.-add-task {
border: none;
border: 2px solid #64b5f6;
}
input.-search {
border: 2px solid #64b5f6;
}
.task._item {
background: #fff;
box-shadow: 3px 3px 0 0;
border: 1px solid;
overflow: auto;
margin-bottom: 6px;
}
.task._item a {
text-decoration: none;
}
.task.-done-false {
color: #56c9f5;
}
.task.-done-false p,
.task.-done-false a {
color: #333;
}
.task.-done-true {
color: #d5d5d5;
}
.task.-done-true p,
.task.-done-true a {
color: #bbb;
}
.task._task-left,
.task._task-right {
height: 66px;
padding: 10px;
}
.task._task-left {
width: calc(100% - 180px);
margin-bottom: 15px;
height: 100px;
overflow: auto;
}
.task._task-right {
width: 180px;
overflow: auto;
}
.task._task-right .btn {
display: inline-block;
margin-top: 3px;
margin-bottom: 15px;
}
.task._task-right .btn.-priority:hover .fa {
color: #7b7b7b;
}
.task._task-right .btn.-complete:hover .fa,
.task._task-right .btn.-re-open:hover .fa {
color: #0eb2f0;
}
.task._task-right .btn.-clear:hover .fa {
color: tomato;
}
.task.-task-priority-high ._task-left {
padding-left: 28px;
position: relative;
}
.task.-task-priority-high ._task-left:before {
position: absolute;
content: '';
width: 6px;
top: 12px;
bottom: 12px;
left: 12px;
background: tomato;
}
.task.-task-priority-high .btn.-priority .fa {
color: tomato;
}
p {
margin: 1em;
color: #777;
}
p.changed {
color: black;
}
button {
margin: 0 1em;
}
.btn {
display: inline-block;
*display: inline;
padding: 4px 10px 4px;
margin-bottom: 0;
*margin-left: 0.3em;
font-size: 13px;
line-height: 18px;
*line-height: 20px;
color: #333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
*background-color: #e6e6e6;
background-image: -ms-linear-gradient(top, #fff, #e6e6e6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #fff, #e6e6e6);
background-image: -o-linear-gradient(top, #fff, #e6e6e6);
background-image: linear-gradient(top, #fff, #e6e6e6);
background-image: -moz-linear-gradient(top, #fff, #e6e6e6);
background-repeat: repeat-x;
border: 1px solid #ccc;
*border: 0;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-bottom-color: #b3b3b3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
*zoom: 1;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn:hover {
background-color: #e6e6e6;
*background-color: #d9d9d9;
color: #333;
text-decoration: none;
background-color: #e6e6e6;
*background-color: #d9d9d9;
background-position: 0 -15px;
-webkit-transition: background-position 0.1s linear;
-moz-transition: background-position 0.1s linear;
-ms-transition: background-position 0.1s linear;
-o-transition: background-position 0.1s linear;
transition: background-position 0.1s linear;
}
.btn:active {
background-color: #e6e6e6;
*background-color: #d9d9d9;
background-color: #ccc \9;
background-color: #e6e6e6;
background-color: #d9d9d9 \9;
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn:first-child {
*margin-left: 0;
}
.btn:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.btn.active {
background-color: #e6e6e6;
*background-color: #d9d9d9;
background-color: #ccc \9;
background-color: #e6e6e6;
background-color: #d9d9d9 \9;
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn.disabled {
background-color: #e6e6e6;
*background-color: #d9d9d9;
}
.btn[disabled] {
background-color: #e6e6e6;
*background-color: #d9d9d9;
}
.btn-primary {
background-color: #0074cc;
*background-color: #05c;
background-image: -ms-linear-gradient(top, #08c, #05c);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#08c), to(#05c));
background-image: -webkit-linear-gradient(top, #08c, #05c);
background-image: -o-linear-gradient(top, #08c, #05c);
background-image: -moz-linear-gradient(top, #08c, #05c);
background-image: linear-gradient(top, #08c, #05c);
background-repeat: repeat-x;
border-color: #05c #05c #003580;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#0088cc', endColorstr='#0055cc', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-primary:hover {
background-color: #05c;
*background-color: #004ab3;
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-primary:active {
background-color: #05c;
*background-color: #004ab3;
background-color: #004099 \9;
}
.btn-primary.active {
background-color: #05c;
*background-color: #004ab3;
background-color: #004099 \9;
color: rgba(255, 255, 255, 0.75);
}
.btn-primary.disabled {
background-color: #05c;
*background-color: #004ab3;
}
.btn-primary[disabled] {
background-color: #05c;
*background-color: #004ab3;
}
.btn-warning {
background-color: #faa732;
*background-color: #f89406;
background-image: -ms-linear-gradient(top, #fbb450, #f89406);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
background-image: -webkit-linear-gradient(top, #fbb450, #f89406);
background-image: -o-linear-gradient(top, #fbb450, #f89406);
background-image: -moz-linear-gradient(top, #fbb450, #f89406);
background-image: linear-gradient(top, #fbb450, #f89406);
background-repeat: repeat-x;
border-color: #f89406 #f89406 #ad6704;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fbb450', endColorstr='#f89406', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-warning:hover {
background-color: #f89406;
*background-color: #df8505;
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-warning:active {
background-color: #f89406;
*background-color: #df8505;
background-color: #c67605 \9;
}
.btn-warning.active {
background-color: #f89406;
*background-color: #df8505;
background-color: #c67605 \9;
color: rgba(255, 255, 255, 0.75);
}
.btn-warning.disabled {
background-color: #f89406;
*background-color: #df8505;
}
.btn-warning[disabled] {
background-color: #f89406;
*background-color: #df8505;
}
.btn-danger {
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-danger:hover {
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-success {
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-success:hover {
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-info {
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-info:hover {
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-inverse {
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-inverse:hover {
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-danger.active {
color: rgba(255, 255, 255, 0.75);
}
.btn-success.active {
color: rgba(255, 255, 255, 0.75);
}
.btn-info.active {
color: rgba(255, 255, 255, 0.75);
}
.btn-inverse.active {
color: rgba(255, 255, 255, 0.75);
}
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.0/angular.min.js">
</script>
<script type="text/javascript" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/131045/ngLocalStorage.js">
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</link>
<div ng-app="TodoApp" ng-controller="TodoController" class="task-list _wrap centered max-width text-center-h ng-scope"style="font-family: Arial, sans-serif;">
<h1 style="font-family: Arial, sans-serif;">Notes:</h1>
<div class="block-justify" style="position: relative; left: -153px; top: -14px;">
<div class="totals _wrap text-left">
<div class="totals _detail">
</div>
</div>
<div class="search _wrap text-right">
<input class="input -text -search" type="text" placeholder="Search tasks" ng-model="taskSearch.name" />
<i class="fa fa-search"></i>
</div>
</div>
<form class="add-form _wrap block text-left">
<input class="input -text -add-task" type="text" placeholder="Add a new task" ng-model="taskInput.name" ng-model-instant />
<div class="add-form _buttons text-right">
<p>Priority</p>
<div class="add-form _checkbox-wrap">
<label class="add-form _checkbox"><input class="input -checkbox" type="checkbox" name="priority"
ng-model="taskInput.priority" ng-init="checked=false" parse-int ng-true-value="1"
ng-false-value="0"></i></label>
</div>
<button class="add-form _submit-button btn -add" ng-click="todoAdd()" style="position: relative; left: 18px; top: -3px; height: 47px; transform-origin: 50% 78%;">Add</button>
</div>
</form>
<ul class="list-no-style text-left">
<li ng-repeat="task in tasksActive | filter:taskSearch.name | orderBy:'-priority'"
class="task _item -done-{{ task.complete }} -task-priority-{{ task.priority==true ? 'high' : 'low' }} block-table">
<div class="task _task-left" ;>
<p id="myText" contentEditable class="changed" ng-on-blur="contentEdit($event, task)">
{{ task.text }}
</p>
</div>
<div class="task _task-right text-right">
<a href ng-click="togglePriority(task)" class="btn -task-action -priority"
title="Change priority"><i class="fa fa-exclamation"></i></a>
<a href ng-click="completeTask(task)" class="btn -task-action -complete" title="Complete"><i
class="fa fa-check"></i></a>
<a href ng-click="deleteTask(task,'active')" class="btn -clear" title="Delete"><i
class="fa fa-times-circle"></i></a>
</div>
</li>
<li ng-repeat="task in tasksComplete | filter:taskSearch.name"
class="task _item -done-{{ task.complete }} block">
<p class="task _task-left">{{ task.text }}</p>
<div class="task _task-right text-right">
<a href ng-click="uncompleteTask(task)" class="btn -task-action -re-open" title="Re-open"><i
class="fa fa-undo"></i></a>
<a href ng-click="deleteTask(task,'complete')" class="btn -clear" title="Delete"><i
class="fa fa-times-circle"></i></a>
</div>
</li>
</ul>
<form class="text-right">
<button class="btn -clear" ng-show="tasksComplete.length" ng-click="clearCompleted()">Delete all
completed</button>
</form>
</div>

Just add in your css white-space: pre-wrap; for p
p {
white-space: pre-wrap; /* New Code */
margin: 1em;
color: #777;
}

Instead of binding {{task.text}}, you need to bind the html by using ngBindHtml.
So the first paragraph would be:
<p id="myText" contenteditable class="changed"
ng-on-blur="contentEdit($event, task)"
ng-bind-html="task.text"></p>
The last paragraph:
<p class="task _task-left" ng-bind-html="task.text"></p>
In first line of function contentEdit, instead of innerText assign innerHTML:
const newText = event.target.innerHTML;
Add ngSanitize service to your app.
var app = angular.module("TodoApp", ["LocalStorageModule", 'ngSanitize']);
In your web page include this script after angular is loaded:
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.8.0/angular-sanitize.min.js"></script>

How to change the colour of a scrollbar on a web page? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
Can somebody tell me how to change the colour of a scrollbar on a web page?

You can do this with CSS
body::-webkit-scrollbar {
width: 1em;
}
body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
}
body::-webkit-scrollbar-thumb {
background-color: red;
outline: 1px solid darkgrey;
}

You May Use SlimScroll. It also helps more features than adding color.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="http://rocha.la/misc/jsdemos/slimScroll/jquery.slimscroll.js"></script>
<script>
$(function() {
$('#id_of_div_you_need_scroll').slimScroll({
width: '300px',
height: '200px',
color: '#ffcc00',
/* size: '10px',
position: 'left',
alwaysVisible: true,
distance: '20px',
start: $('#child_image_element'),
railVisible: true,
railColor: '#222',
railOpacity: 0.3,
wheelStep: 10,
allowPageScroll: false,
disableFadeOut: false*/
});
});
</script>

enter code here
$(document).ready(function () {
if (!$.browser.webkit) {
$('.wrapper').html('<p>Sorry! Non webkit users. :(</p>');
}
});
header
{
font-family: 'Lobster', cursive;
text-align: center;
font-size: 25px;
}
#info
{
font-size: 18px;
color: #555;
text-align: center;
margin-bottom: 25px;
}
a{
color: #074E8C;
}
.scrollbar
{
margin-left: 30px;
float: left;
height: 300px;
width: 65px;
background: #F5F5F5;
overflow-y: scroll;
margin-bottom: 25px;
}
.force-overflow
{
min-height: 450px;
}
#wrapper
{
text-align: center;
width: 500px;
margin: auto;
}
/*
* STYLE 1
*/
#style-1::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
#style-1::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
#style-1::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}
/*
* STYLE 2
*/
#style-2::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
#style-2::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
#style-2::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #D62929;
}
/*
* STYLE 3
*/
#style-3::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
#style-3::-webkit-scrollbar
{
width: 6px;
background-color: #F5F5F5;
}
#style-3::-webkit-scrollbar-thumb
{
background-color: #000000;
}
/*
* STYLE 4
*/
#style-4::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
#style-4::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#style-4::-webkit-scrollbar-thumb
{
background-color: #000000;
border: 2px solid #555555;
}
/*
* STYLE 5
*/
#style-5::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
#style-5::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#style-5::-webkit-scrollbar-thumb
{
background-color: #0ae;
background-image: -webkit-gradient(linear, 0 0, 0 100%,
color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(.5, transparent), to(transparent));
}
/*
* STYLE 6
*/
#style-6::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
#style-6::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#style-6::-webkit-scrollbar-thumb
{
background-color: #F90;
background-image: -webkit-linear-gradient(45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent)
}
/*
* STYLE 7
*/
#style-7::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
border-radius: 10px;
}
#style-7::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#style-7::-webkit-scrollbar-thumb
{
border-radius: 10px;
background-image: -webkit-gradient(linear,
left bottom,
left top,
color-stop(0.44, rgb(122,153,217)),
color-stop(0.72, rgb(73,125,189)),
color-stop(0.86, rgb(28,58,148)));
}
/*
* STYLE 8
*/
#style-8::-webkit-scrollbar-track
{
border: 1px solid black;
background-color: #F5F5F5;
}
#style-8::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#style-8::-webkit-scrollbar-thumb
{
background-color: #000000;
}
/*
* STYLE 9
*/
#style-9::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
#style-9::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#style-9::-webkit-scrollbar-thumb
{
background-color: #F90;
background-image: -webkit-linear-gradient(90deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent)
}
/*
* STYLE 10
*/
#style-10::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
border-radius: 10px;
}
#style-10::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#style-10::-webkit-scrollbar-thumb
{
background-color: #AAA;
border-radius: 10px;
background-image: -webkit-linear-gradient(90deg,
rgba(0, 0, 0, .2) 25%,
transparent 25%,
transparent 50%,
rgba(0, 0, 0, .2) 50%,
rgba(0, 0, 0, .2) 75%,
transparent 75%,
transparent)
}
/*
* STYLE 11
*/
#style-11::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
border-radius: 10px;
}
#style-11::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#style-11::-webkit-scrollbar-thumb
{
background-color: #3366FF;
border-radius: 10px;
background-image: -webkit-linear-gradient(0deg,
rgba(255, 255, 255, 0.5) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.5) 50%,
rgba(255, 255, 255, 0.5) 75%,
transparent 75%,
transparent)
}
/*
* STYLE 12
*/
#style-12::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
border-radius: 10px;
background-color: #444444;
}
#style-12::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
#style-12::-webkit-scrollbar-thumb
{
border-radius: 10px;
background-color: #D62929;
background-image: -webkit-linear-gradient(90deg,
transparent,
rgba(0, 0, 0, 0.4) 50%,
transparent,
transparent)
}
/*
* STYLE 13
*/
#style-13::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
border-radius: 10px;
background-color: #CCCCCC;
}
#style-13::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
#style-13::-webkit-scrollbar-thumb
{
border-radius: 10px;
background-color: #D62929;
background-image: -webkit-linear-gradient(90deg,
transparent,
rgba(0, 0, 0, 0.4) 50%,
transparent,
transparent)
}
/*
* STYLE 14
*/
#style-14::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
background-color: #CCCCCC;
}
#style-14::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#style-14::-webkit-scrollbar-thumb
{
background-color: #FFF;
background-image: -webkit-linear-gradient(90deg,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 1) 25%,
transparent 100%,
rgba(0, 0, 0, 1) 75%,
transparent)
}
/*
* STYLE 15
*/
#style-15::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
background-color: #F5F5F5;
border-radius: 10px;
}
#style-15::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#style-15::-webkit-scrollbar-thumb
{
border-radius: 10px;
background-color: #FFF;
background-image: -webkit-gradient(linear,
40% 0%,
75% 84%,
from(#4D9C41),
to(#19911D),
color-stop(.6,#54DE5D))
}
/*
* STYLE 16
*/
#style-16::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
background-color: #F5F5F5;
border-radius: 10px;
}
#style-16::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
#style-16::-webkit-scrollbar-thumb
{
border-radius: 10px;
background-color: #FFF;
background-image: -webkit-linear-gradient(top,
#e4f5fc 0%,
#bfe8f9 50%,
#9fd8ef 51%,
#2ab0ed 100%);
}
<div id="wrapper">
<div class="scrollbar" id="style-default">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-1">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-2">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-3">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-4">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-5">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-6">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-7">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-8">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-9">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-10">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-11">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-13">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-14">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-15">
<div class="force-overflow"></div>
</div>
</div>

Changing scrollbar colour is a bit tricky. You can do it using the specific CSS rules, but it's going to be very dependent on the browser you are using.
To solve this, there are plenty of JavaScript plugins that hidde the original scrollbar and set a new one made by html elements, which is fully customizable. You can review this, for example.

JQuery Datepicker - vertically center date

I'm currently styling the jquery datepicker but im struggeling with vertically centering the dates positions.
This is what I got so far:
https://jsfiddle.net/L4vrkpmc/1/
Since the datepicker is using a table I tried
.ui-datepicker-calendar td{
vertical-align:center;
}
but it won't work. Anyone know how to vertical center the days?
html,
body {
height: 100%;
}
/* DatePicker Container */
#calendar {
height: 100%;
}
.ui-datepicker {
width: 100%;
height: 100%;
margin: 5px auto 0;
font: 9pt Arial, sans-serif;
-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
-moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
}
.ui-datepicker a {
text-decoration: none;
}
/* DatePicker Table */
.ui-datepicker table {
width: 100%;
height: 100%;
text-align: center;
}
.ui-datepicker-header {
background: url('../img/dark_leather.png') repeat 0 0 #000;
color: #e0e0e0;
font-weight: bold;
-webkit-box-shadow: inset 0px 1px 1px 0px rgba(250, 250, 250, 2);
-moz-box-shadow: inset 0px 1px 1px 0px rgba(250, 250, 250, .2);
box-shadow: inset 0px 1px 1px 0px rgba(250, 250, 250, .2);
text-shadow: 1px -1px 0px #000;
filter: dropshadow(color=#000, offx=1, offy=-1);
line-height: 30px;
border-width: 1px 0 0 0;
border-style: solid;
border-color: #111;
}
.ui-datepicker-title {
text-align: center;
}
.ui-datepicker-prev,
.ui-datepicker-next {
display: inline-block;
width: 30px;
height: 30px;
text-align: center;
cursor: pointer;
line-height: 600%;
overflow: hidden;
}
.ui-datepicker-prev {
float: left;
background-position: center -30px;
}
.ui-datepicker-next {
float: right;
background-position: center 0px;
}
.ui-datepicker thead {
background-color: #f7f7f7;
background-image: -moz-linear-gradient(top, #f7f7f7 0%, #f1f1f1 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f7f7f7), color-stop(100%, #f1f1f1));
background-image: -webkit-linear-gradient(top, #f7f7f7 0%, #f1f1f1 100%);
background-image: -o-linear-gradient(top, #f7f7f7 0%, #f1f1f1 100%);
background-image: -ms-linear-gradient(top, #f7f7f7 0%, #f1f1f1 100%);
background-image: linear-gradient(top, #f7f7f7 0%, #f1f1f1 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#f1f1f1', GradientType=0);
border-bottom: 1px solid #bbb;
}
.ui-datepicker th {
text-transform: uppercase;
font-size: 6pt;
padding: 5px 0;
color: #666666;
text-shadow: 1px 0px 0px #fff;
filter: dropshadow(color=#fff, offx=1, offy=0);
}
.ui-datepicker tbody td {
padding: 0;
border-right: 1px solid #bbb;
}
.ui-datepicker tbody td:last-child {
border-right: 0px;
}
.ui-datepicker tbody tr {
border-bottom: 1px solid #bbb;
}
.ui-datepicker tbody tr:last-child {
border-bottom: 0px;
}
.ui-datepicker td span,
.ui-datepicker td a {
display: inline-block;
font-weight: bold;
text-align: center;
width: 100%;
height: 100%;
color: #666666;
text-shadow: 1px 1px 0px #fff;
filter: dropshadow(color=#fff, offx=1, offy=1);
}
.ui-datepicker-calendar .ui-state-default {
background: #ededed;
background: -moz-linear-gradient(top, #ededed 0%, #dedede 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ededed), color-stop(100%, #dedede));
background: -webkit-linear-gradient(top, #ededed 0%, #dedede 100%);
background: -o-linear-gradient(top, #ededed 0%, #dedede 100%);
background: -ms-linear-gradient(top, #ededed 0%, #dedede 100%);
background: linear-gradient(top, #ededed 0%, #dedede 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#dedede', GradientType=0);
-webkit-box-shadow: inset 1px 1px 0px 0px rgba(250, 250, 250, .5);
-moz-box-shadow: inset 1px 1px 0px 0px rgba(250, 250, 250, .5);
box-shadow: inset 1px 1px 0px 0px rgba(250, 250, 250, .5);
}
.ui-datepicker-calendar .ui-state-hover {
background: #f7f7f7;
}
.ui-datepicker-calendar .ui-state-active {
background: #6eafbf;
-webkit-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);
-moz-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);
box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);
color: #e0e0e0;
text-shadow: 0px 1px 0px #4d7a85;
filter: dropshadow(color=#4d7a85, offx=0, offy=1);
border: 1px solid #55838f;
position: relative;
margin: -1px;
}
.ui-datepicker-unselectable .ui-state-default {
background: #f4f4f4;
color: #b4b3b3;
}
.ui-datepicker-calendar td:first-child .ui-state-active {
margin-left: 0;
}
.ui-datepicker-calendar td:last-child .ui-state-active {
margin-right: 0;
}
.ui-datepicker-calendar tr:last-child .ui-state-active {
margin-bottom: 0;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
$('#calendar').datepicker({
inline: true,
showOtherMonths: true,
firstDay: 1,
dayNamesMin: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
});
});
</script>
<div id="calendar"></div>
Thanks for your help :)

You Can't vertical align text in "a" tag if its not containing any child tag. I wrapped the text with <span> under 'a' tag using jQuery. here is the code:
$(".ui-datepicker td").each(function(){
var dateText = $(this).find("a").text();
$(this).find("a").html("<span>"+dateText+"</span>");
});
and some simple CSS changes :
.ui-datepicker td a{
display: table;
position: relative;
height: 100%;
width: 100%;
}
.ui-datepicker td a span{
display: table-cell;
text-align:center;
vertical-align: middle;
}

You can achieve this using only CSS by simply setting the line-height of the number to the same height of the square:
.ui-state-default {
height: 45px;
line-height: 45px;
padding: 0;
}

How to get value from toggle-button yes/No And show retrieve data in button active

Hiii Everyone,
Below is my code to display toggle button yes/no.What i want to do is based on user selection i want to retrieve data.If they choose Yes toggle button javascript variable should have yes string or else no string.
HTML Code
<label class="switch">
<input class="switch-input" type="checkbox" />
<span class="switch-label" data-on="Yes" data-off="No"></span>
<span class="switch-handle"></span>
</label>
CSS
.switch {
position: relative;
display: block;
vertical-align: top;
width: 100px;
height: 30px;
padding: 3px;
margin: 0 10px 10px 0;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
border-radius: 18px;
box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
cursor: pointer;
}
.switch-input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.switch-label {
position: relative;
display: block;
height: inherit;
font-size: 10px;
text-transform: uppercase;
background: #eceeef;
border-radius: inherit;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
}
.switch-label:before, .switch-label:after {
position: absolute;
top: 50%;
margin-top: -.5em;
line-height: 1;
-webkit-transition: inherit;
-moz-transition: inherit;
-o-transition: inherit;
transition: inherit;
}
.switch-label:before {
content: attr(data-off);
right: 11px;
color: #aaaaaa;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch-label:after {
content: attr(data-on);
left: 11px;
color: #FFFFFF;
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
opacity: 0;
}
.switch-input:checked ~ .switch-label {
background: #0088cc;
border-color: #0088cc;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked ~ .switch-label:before {
opacity: 0;
}
.switch-input:checked ~ .switch-label:after {
opacity: 1;
}
.switch-handle {
position: absolute;
top: 4px;
left: 4px;
width: 28px;
height: 28px;
background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
border-radius: 100%;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch-handle:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -6px 0 0 -6px;
width: 12px;
height: 12px;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
border-radius: 6px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}
.switch-input:checked ~ .switch-handle {
left: 74px;
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
/* Transition
========================== */
.switch-label, .switch-handle {
transition: All 0.3s ease;
-webkit-transition: All 0.3s ease;
-moz-transition: All 0.3s ease;
-o-transition: All 0.3s ease;
}
I refreed this code from http://www.htmllion.com/css3-toggle-switch-button.html
Below is the output
I tried this jquery to get get:
alert($(this).attr("data-on"));
I dont know how to get selected button data and similarly after get data it will store in database and i want to retrieve from database either yes or no it should be selected as default which will retrieve from database.How can i do with this.Result which i tried in jquery is returning undefined values.Please anyone help me to get out of this problem.Thanks in advance.

Try this:
(function() {
$(document).ready(function() {
$('.switch-input').on('change', function() {
var isChecked = $(this).is(':checked');
var selectedData;
var $switchLabel = $('.switch-label');
console.log('isChecked: ' + isChecked);
if(isChecked) {
selectedData = $switchLabel.attr('data-on');
} else {
selectedData = $switchLabel.attr('data-off');
}
console.log('Selected data: ' + selectedData);
});
});
})();
For Ref: http://jsbin.com/zizuxo/edit?js,console,output

in pure JS :
var result = document.getElementsByClassName("switch-input")[0].checked ? 'yes' : 'no'
jQuery in compatibility mode :
var result = jQuery('.switch-input').is(':checked')?'yes':'no';

I combined the above
$('.switch-input').on('change', function() {
result = document.getElementsByClassName("switch-input")[0].checked ? 'yes' : 'no';
alert(result);
});

Categories

Resources