The video element is not showing on the page - html

Recently I used app.js as the framework to design the layout of my web app. The web app is to stream from webcam and show on the webpage html video element.
The webcam is working and running, however the video doesn't show on my webpage, in fact the whole video element like being hidden underneath something.
Could anyone point to me where is my error? at first I though it is about the z-index of the elements, but I couldn't solve it,so it might not be the case.
I will attach snippets of my html and Css files below.
thanks in advance
HTML:
<!DOCTYPE html>
<html>
<head>
<title>PasarOnline</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
<link rel="stylesheet" href="../appjsFile/app.min.css">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="manifest" href="../manifest.json">
<!-- Add to home screen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="PasarOnline">
<link rel="apple-touch-icon" href="../images/icons/icon-152x152.png">
<meta name="msapplication-TileImage" content="../images/icons/icon-144x144.png">
<meta name="msapplication-TileColor" content="#2F3BA2">
<style>
.navbar {
background-color: #000;
overflow: hidden;
position: fixed;
bottom: 0;
width: 100%;
z-index: 3000;
}
/* Style the links inside the navigation bar */
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.navbar a:hover {
background-color: #ddd;
color: black;
}
.navbar a.active {
background-color: #4CAF50;
color: white;
}
.navbar .icon {
display: none;
}
.form-popup {
display: none;
position: fixed;
bottom: 0;
right: 15px;
border: 3px solid #f1f1f1;
z-index: 1001;
}
.form-container {
max-width: 300px;
padding: 10px;
background-color: white;
}
/* Full-width input fields */
.form-container input[type=text],
input[type=number] {
width: 100%;
padding: 15px;
margin: 5px 0 10px 0;
border: none;
background: #f1f1f1;
}
.form-container input[type=text]:focus {
background-color: #ddd;
outline: none;
}
.form-container .btn {
background-color: #4CAF50;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
width: 40%;
margin-left: 10px;
margin-bottom: 10px;
opacity: 0.8;
}
.form-container .cancel {
background-color: red;
}
.centerVideo {
margin: 0 auto;
display: block;
position: relative;
width: 350px;
margin-top: 20px;
}
b {
margin: 0 auto;
}
hr {
margin-top: 32px;
}
.bottom1 {
margin-bottom: 16px;
margin: 0 auto;
}
.card {
/* Add shadows to create the "card" effect */
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.container {
padding: 2px 16px;
}
.semi-square {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.wrap {
right: 0;
width: 0 auto;
left: 0;
margin: 16px auto;
}
/* select starting stylings ------------------------------*/
.select {
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
position: relative;
width: 350px;
margin-top: 20px;
}
.select-text {
position: relative;
font-family: inherit;
background-color: transparent;
width: 350px;
padding: 10px 10px 10px 0;
font-size: 18px;
border-radius: 0;
border: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
/* Remove focus */
.select-text:focus {
outline: none;
border-bottom: 1px solid rgba(0, 0, 0, 0);
}
/* Use custom arrow */
.select .select-text {
appearance: none;
-webkit-appearance: none
}
.select:after {
position: absolute;
top: 18px;
right: 10px;
/* Styling the down arrow */
width: 0;
height: 0;
padding: 0;
content: '';
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid rgba(0, 0, 0, 0.12);
pointer-events: none;
}
/* LABEL ======================================= */
.select-label {
color: rgba(0, 0, 0, 0.26);
font-size: 18px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 0;
top: 10px;
transition: 0.2s ease all;
}
/* active state */
.select-text:focus~.select-label,
.select-text:valid~.select-label {
color: #228B22;
top: -5px;
transition: 0.2s ease all;
font-size: 14px;
}
/* BOTTOM BARS ================================= */
.select-bar {
position: relative;
display: block;
width: 350px;
}
.select-bar:before,
.select-bar:after {
content: '';
height: 2px;
width: 0;
bottom: 1px;
position: absolute;
background: #228B22;
transition: 0.2s ease all;
}
.select-bar:before {
left: 50%;
}
.select-bar:after {
right: 50%;
}
/* active state */
.select-text:focus~.select-bar:before,
.select-text:focus~.select-bar:after {
width: 50%;
}
/* HIGHLIGHTER ================================== */
.select-highlight {
position: absolute;
height: 60%;
width: 100px;
top: 25%;
left: 0;
pointer-events: none;
opacity: 0.5;
}
.center {
margin: 0 auto;
}
</style>
</head>
<body>
<div class="app-page" data-page="addItemPage">
<div class="app-topbar">
<div class="app-title">Add Item Page</div>
</div>
<div class="app-content">
<div class="app-section">
<h1>Scan Item Barcode:</h1>
<div class="card" >
<video muted playsinline id="qr-video" width="60%" height="60%" class="centerVideo">Video not showing</video>
</div>
<div class="select">
<select id="inversion-mode-select" class="select-text">
<option value="original" selected="original">Scan original</option>
<option value="invert">Scan with inverted colors</option>
<option value="both">Scan both</option>
</select>
<label class="select-label"><b>Select Barcode Type:</b></label>
<span class="select-highlight"></span>
<span class="select-bar"></span>
<br>
</div>
</div>
</div>
</div>
<div class="app-page" data-page="deleteItemPage">
<div class="app-topbar">
<div class="app-button left" data-back data-autotitle></div>
<div class="app-title">Delete Item</div>
</div>
<div class="app-content">
Page 2 is delete item
</div>
</div>
<div class="app-page" data-page="listItemPage">
<div class="app-topbar">
<div class="app-button left" data-back data-autotitle></div>
<div class="app-title">List Item</div>
</div>
<div class="app-content">
Page 3 is list item
</div>
</div>
<div class="form-popup" id="myForm">
<form action="/action_page.php" class="form-container">
<h1>Add Item</h1>
<b>Serial</b>
<input type="number" placeholder="Enter Serial Number" name="vSerial" id="vSerialID" required>
<b>Veggie Name</b>
<input type="text" placeholder="Enter Veggie Name" name="vName" required>
<b>Weight</b>
<input type="number" placeholder="Enter Weight(KG)" name="vWeight" required>
<div align="center">
<button type="submit" class="btn">Add Item</button>
<span><button type="button" class="btn cancel" id="closeBut">Close</button></span>
</div>
</form>
</div>
<div class="navbar" id="bottomNavbar">
Add Item
Delete Item
List Item
</div>
<script src="../appjsFile/zepto.js"></script>
<script src="../appjsFile/app.min.js"></script>
<script type="module">
import QrScanner from "../qr-scanner.min.js";
QrScanner.WORKER_PATH = '../qr-scanner-worker.min.js';
const video = document.getElementById('qr-video');
// const camHasCamera = document.getElementById('cam-has-camera');
const camQrResult = document.getElementById('cam-qr-result');
const closeFormButton = document.getElementById('closeBut');
const deleteBut = document.getElementById("deleteItemBut");
const addBut = document.getElementById("addItemBut");
const listBut = document.getElementById("listItemBut");
const scanner = new QrScanner(video, result => setResult(camQrResult, result));
scanner.start();
App.controller('addItemPage', function(page) {
// put stuff here
});
App.controller('deleteItemPage', function(page) {
// put stuff here
});
App.controller('listItemPage', function(page) {
// put stuff here
});
deleteBut.addEventListener("click", function() {
App.load('deleteItemPage');
});
addBut.addEventListener("click", function() {
App.load('addItemPage');
});
listBut.addEventListener("click", function() {
App.load('listItemPage');
});
closeFormButton.addEventListener("click",closeForm);
// QRManualBut.addEventListener('click',function(){
// document.getElementById("myForm").style.display = "block";
// });
//########## check result #############//
function setResult(label, result) {
openForm(result);
label.textContent = result;
label.style.color = 'teal';
clearTimeout(label.highlightTimeout);
label.highlightTimeout = setTimeout(() => label.style.color = 'inherit', 100);
}
// ####### Web Cam Scanning #######//
document.getElementById('inversion-mode-select').addEventListener('change', event => {
scanner.setInversionMode(event.target.value);
});
//################pop up form ###########//
function openForm(serialNum) {
document.getElementById("myForm").style.display = "block";
document.getElementById("vSerialID").value = serialNum;
}
function closeForm() {
document.getElementById("myForm").style.display = "none";
}
//##########install pop up in homescreen########//
// if (location.protocol != 'https:')
// {
// location.href = 'https:' + window.location.href.substring(window.location.protocol.length);
// }
try {
App.restore();
} catch (err) {
App.load('addItemPage');
}
</script>
</body>
</html>
app.min.css:
html,
body,
div,
form,
p,
ul,
li,
span,
label,
img {
margin: 0;
padding: 0;
outline: 0
}
html,
body {
height: 100%;
width: 100%
}
body {
position: relative;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
overflow: hidden
}
.app-android {
font-family: "Roboto", sans-serif
}
.app-no-scrollbar ::-webkit-scrollbar {
height: 0 !important;
width: 0 !important
}
* {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
tap-highlight-color: rgba(0, 0, 0, 0) !important
}
.clear {
clear: both
}
.app-android .app-ios-only,
.app-ios .app-android-only {
display: none
}
.app-clickblocker {
z-index: 9000;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #FFF;
opacity: 0
}
.app-page {
display: none;
position: relative;
height: 100%;
width: 100%;
overflow: hidden
}
.app-loaded .app-page {
display: block
}
.app-ios-7 .app-page,
.app-ios-8 .app-page {
box-shadow: 0 0 12px rgba(0, 0, 0, 0.2)
}
.app-topbar {
z-index: 3000;
position: relative;
height: 44px;
width: 100%;
background-color: #000;
color: #FFF;
-webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.15);
box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.15)
}
.app-android .app-topbar {
height: 56px;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3)
}
.app-topbar .app-button {
position: absolute;
bottom: 0;
padding: 0 16px;
height: 100%;
line-height: 44px
}
.app-android .app-topbar .app-button {
line-height: 56px
}
.app-topbar .app-button.left {
left: 0
}
.app-topbar .app-button.right {
right: 0
}
.app-topbar .app-title {
margin: 0 auto;
height: 100%;
width: 100%;
line-height: 44px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.app-android .app-topbar .app-title {
line-height: 56px
}
.app-ios-statusbar .app-topbar {
padding-top: 20px
}
.app-android-statusbar .app-topbar {
padding-top: 24px
}
.app-android-statusbar .app-topbar:before {
position: absolute;
top: 0;
height: 24px;
width: 100%;
background-color: rgba(0, 0, 0, 0.3);
content: ""
}
.app-ios-statusbar .app-topbar .app-button {
height: 44px
}
.app-android-statusbar .app-topbar .app-button {
height: 56px
}
.app-content {
z-index: 2000;
position: relative;
background-color: #FFF;
overflow: auto;
-webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 12px rgba(0, 0, 0, 0.2)
}
.app-android-2 .app-content {
-webkit-box-shadow: none;
box-shadow: none
}
.app-scrollhack>* {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
.app-section {
position: relative;
margin: 8px;
border: 1px solid #AAA
}
.app-list {
list-style: none
}
.app-list>li,
.app-list>li.app-button {
padding-left: 20px;
padding-right: 8px;
height: 43px;
border-bottom: 1px solid #AAA;
line-height: 43px;
overflow: hidden;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap
}
.app-android .app-list>li,
.app-android .app-list>li.app-button {
padding-top: 2px;
padding-bottom: 2px
}
.app-section .app-list>li:last-child,
.app-section .app-list>li.app-button:last-child {
border-bottom: 0
}
.app-list>label {
display: block;
padding-left: 12px;
height: 24px;
background-color: #000;
color: #FFF;
line-height: 24px
}
.app-list>li+label {
margin-top: -1px
}
.app-content .app-button {
margin: 0 auto;
height: 40px;
border-bottom: 1px solid #AAA;
line-height: 40px;
overflow: hidden;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap
}
.app-button:last-child {
border-bottom: 0
}
.app-content .app-button.green {
background-color: #7F7
}
.app-content .app-button.red {
background-color: #F77
}
.app-content .app-button.blue {
background-color: #77F
}
.app-topbar.teal {
background-color: #2B9;
color: #f3f4f5
}
.app-topbar.green {
background-color: #3C7;
color: #f3f4f5
}
.app-topbar.yellow {
background-color: #EC1;
color: #f3f4f5
}
.app-topbar.orange {
background-color: #E82;
color: #f3f4f5
}
.app-topbar.red {
background-color: #dd4539;
color: #f3f4f5
}
.app-topbar.blue {
background-color: #4486f0;
color: #f3f4f5
}
.app-topbar.dark-blue {
background-color: #345;
color: #f3f4f5
}
.app-topbar .app-title {
font-size: 17px;
font-weight: 500
}
.app-android .app-topbar .app-title {
float: left;
padding-left: 15px;
padding-right: 8px;
width: auto;
font-size: 19px;
font-weight: 700;
text-align: left
}
.app-android .app-topbar .app-button.left~.app-title {
padding-left: 60px
}
.app-topbar .app-button {
font-weight: 300;
-webkit-transition: opacity .25s ease-out;
transition: opacity .25s ease-out
}
.app-android .app-topbar .app-button {
padding: 0 13px;
font-weight: 400;
-webkit-transition: background-color .25s ease-out;
transition: background-color .25s ease-out
}
.app-topbar .app-button.active {
opacity: .65
}
.app-android .app-topbar .app-button.active {
opacity: 1;
background-color: rgba(0, 0, 0, 0.2)
}
.app-topbar .app-button.active,
.app-android .app-topbar .app-button.active,
.app-android-2 .app-topbar .app-button,
.app-android-4 .app-topbar .app-button {
-webkit-transition: none;
transition: none
}
.app-topbar .app-button[data-back].left {
padding: 15px 0 15px 27px;
height: 14px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAoCAYAAADkDTpVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAxJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RUQxQ0FCN0VGMjJGMTFFMjg0REFDNDBBRUVBRjJBNDkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RUQxQ0FCN0RGMjJGMTFFMjg0REFDNDBBRUVBRjJBNDkiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiBNYWNpbnRvc2giPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0iNTNBQzg4QkE2OTc3M0MxNDg4ODc1M0VDNzc3ODcwMDUiIHN0UmVmOmRvY3VtZW50SUQ9IjUzQUM4OEJBNjk3NzNDMTQ4ODg3NTNFQzc3Nzg3MDA1Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+dT5F6gAAAcNJREFUeNqslz8sA1Ecx+9UKi1ispkwMAgbs5XYTCJhlLB3uxrETsLGUgMbutaqJg0Jg5pqqqVCm1TaPt+X3ONp7n53fb/3kk/Su8v7fq/v3u/Pc4UQjsWRAQNg9/eONLDEtvgbnrpvS3wDdMT/4dkyWAUtETy8PuaaL4EcSIQ8T3HefBHURfg4Bq6p+Dz4JMTPQML0G8yCGiF+BZKmu2gKVAnxG5DW5/QiPg4qhPgdGOmeF1d8DJQJ8UcwGjQ3jric+ESIl/0XcEwM5F++J8TfwCSlQYkPgltC/B3MRK1A2IMUKBDiH34sOCYGcg9fE+INP4odEwMZfeeE+DdY6SV29AsXnBDibbDWa+TrFweCHlsmeUv92IsQz5hm3bj1wLxwx1yiDneJ1Ec+JUxa3I+stukFYdLkbFM90PKESZ0TaIp0RKqocVKFYggUCZMqJ9np6bpEmFQ46VovOM+EyQun4Ogl85UweeCUTMVERNEvcoq+YjqibSlw2hbFXETjdclpvBQL4IswyXFaR735bRAmR5zmV7Hs56ewsc89H+TBOmiHPG/aOkJtBhyhsjbPaJKdbnFJv8Uj7CEYBkmQVTd/BBgAAQDbZCXVLesAAAAASUVORK5CYII=);
background-repeat: no-repeat;
-webkit-background-size: 12px 20px;
background-size: 12px 20px;
background-position: 8px center;
line-height: 14px
}
.app-android .app-topbar .app-button[data-back].left {
padding: 0 16px;
height: 56px;
width: 24px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAABCRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOmV4aWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vZXhpZi8xLjAvIgogICAgICAgICAgICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iCiAgICAgICAgICAgIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyI+CiAgICAgICAgIDx0aWZmOlJlc29sdXRpb25Vbml0PjI8L3RpZmY6UmVzb2x1dGlvblVuaXQ+CiAgICAgICAgIDx0aWZmOkNvbXByZXNzaW9uPjU8L3RpZmY6Q29tcHJlc3Npb24+CiAgICAgICAgIDx0aWZmOlhSZXNvbHV0aW9uPjcyPC90aWZmOlhSZXNvbHV0aW9uPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICAgICA8dGlmZjpZUmVzb2x1dGlvbj43MjwvdGlmZjpZUmVzb2x1dGlvbj4KICAgICAgICAgPGV4aWY6UGl4ZWxYRGltZW5zaW9uPjcyPC9leGlmOlBpeGVsWERpbWVuc2lvbj4KICAgICAgICAgPGV4aWY6Q29sb3JTcGFjZT4xPC9leGlmOkNvbG9yU3BhY2U+CiAgICAgICAgIDxleGlmOlBpeGVsWURpbWVuc2lvbj43MjwvZXhpZjpQaXhlbFlEaW1lbnNpb24+CiAgICAgICAgIDxkYzpzdWJqZWN0PgogICAgICAgICAgICA8cmRmOkJhZy8+CiAgICAgICAgIDwvZGM6c3ViamVjdD4KICAgICAgICAgPHhtcDpNb2RpZnlEYXRlPjIwMTU6MDI6MTMgMjI6MDI6MzU8L3htcDpNb2RpZnlEYXRlPgogICAgICAgICA8eG1wOkNyZWF0b3JUb29sPlBpeGVsbWF0b3IgMy4zLjE8L3htcDpDcmVhdG9yVG9vbD4KICAgICAgPC9yZGY6RGVzY3JpcHRpb24+CiAgIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+ChTTdgYAAAF3SURBVHgB7dtBCsIwFIRh69o7eAhdiQdw53U9gFsP4dqt4LK+QANF6Dgp1FbyCyXCG2nz8aKQ1tWKFwIIIIAAAggggAACCCCAQNUCbdte0lE1wtDkO5xnjOkAqQ/1gQOSgbMYpHX/Yn/9vltKR3HeXWS2oj55aTYgA+cVsz83TXOfXGFpJxj4zsnLKo2POA5Lu+6fXA84ghkccISAKNE54AgBUaJzwBECokTngCMERInOAUcIiBKdA44QEKUaOqcR85elhBMBtdklPz9XMfaXNiXnHrVh9q84JTA5WwxUE05CKgbKsrWMxUCxhk+BcwVICNSGJCh0qYafeS1gVEECyRAwInQSSIaAEaGTQDIEjAidBJIhYEToJJAMASNCJ4FkCBgROgkkQ8CI/Esnjb6rYRh8jSSkCKk7I+lJ1/2cT7oWb7l+nXVBwNiZvM2JUzCVaaMDy43/a/TZP5DA6ePk9x0SOBmEEQEEEEAAAQQQQAABBBCoVOANecdGRmb5/CMAAAAASUVORK5CYII=);
-webkit-background-size: 24px 24px;
background-size: 24px 24px;
background-position: center;
color: transparent
}
.app-android .app-topbar>:last-child:after {
content: "";
clear: both
}
.app-page,
.app-content {
background-color: #efeff4
}
.app-section,
.app-list>li,
.app-list>li.app-button,
.app-content .app-button,
.app-input {
border: 0
}
.app-section {
margin: 16px;
padding: 8px;
background: #FFF;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-webkit-border-radius: 6px;
border-radius: 6px
}
.app-ios-7 .app-section,
.app-ios-8 .app-section {
border-bottom: 0
}
.app-section.app-button {
margin: 16px;
padding: 0
}
p.app-section {
padding: 12px 16px;
color: #665
}
.app-content .app-section>* {
margin: 8px 0 0;
-webkit-border-radius: 4px;
border-radius: 4px
}
.app-content .app-section>:first-child {
margin-top: 0
}
.app-list>label {
height: 28px;
background-color: #d5e5e6;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #778;
font-size: 14px;
font-weight: 600;
line-height: 28px
}
.app-android .app-list>label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase
}
.app-list>li {
background-color: #FFF;
color: #444
}
.app-list>li,
.app-list>li.app-button {
border-top: 1px solid rgba(0, 0, 0, 0.05);
-webkit-box-sizing: border-box;
box-sizing: border-box
}
.app-android .app-list>li,
.app-android .app-list>li.app-button {
padding-top: 0;
padding-bottom: 0;
height: 47px;
line-height: 47px
}
.app-list>li.app-button.active {
border-top: 1px solid rgba(0, 0, 0, 0.0)
}
.app-list>li:first-child,
.app-list>li.app-button:first-child,
.app-list>label+li,
.app-list>label+li.app-button,
.app-list>label+li.app-button.active,
.app-list>li.app-button.active+li,
.app-list>li.app-button.active+li.app-button {
border-top-color: transparent
}
.app-input[type="search"].no-icon,
.app-android .app-input[type="search"].no-icon-android,
.app-ios .app-input[type="search"].no-icon-ios {
padding-left: 12px;
background-image: none
}


You can check this blog post regarding accessing the webcam in html5.
Here is the basic code for this:
HTML file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="stuff, to, help, search, engines, not" name="keywords">
<meta content="What this page is about." name="description">
<meta content="Display Webcam Stream" name="title">
<title>Display Webcam Stream</title>
<style>
#container {
margin: 0px auto;
width: 500px;
height: 375px;
border: 10px #333 solid;
}
#videoElement {
width: 500px;
height: 375px;
background-color: #666;
}
</style>
</head>
<body>
<div id="container">
<video autoplay="true" id="videoElement">
</video>
</div>
<script>
</script>
</body>
</html>
JS file:
var video = document.querySelector("#videoElement");
if (navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({video: true})
.then(function(stream) {
video.srcObject = stream;
})
.catch(function(err0r) {
console.log("Something went wrong!");
});
}
Try and implement the following using the getUserMedia method. All we are telling getUserMedia is to specify a constraints object whose video property is set to true. This means that default settings will be used in capturing the visuals and displaying them.

Related

How to stop divs from overlapping as well as scroll along with messages

I'm creating a SignalR Web Application for messaging. The messages being sent seem to overlap with the footer (textbox, send button), and additionally, not scroll along with the messages being sent.
My CSS is as follows:
body {
background-color: #2d3436;
}
.container {
background-color: #2d3436;
padding: 20px;
color: white;
max-height: 80%;
}
.textmessaging {
background-color: #474f52;
padding: 20px;
position:fixed;
bottom: 0;
width: 100%;
}
#message::-webkit-scrollbar {
width: 8px;
}
/* Track */
#message::-webkit-scrollbar-track {
-webkit-border-radius: 10px;
border-radius: 10px;
}
/* Handle */
#message::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(67, 74, 139, 0.8);
}
#message::-webkit-scrollbar-thumb:window-inactive {
background: rgba(67, 74, 139, 0.4);
}
#message {
resize: none;
outline: none;
background-color: rgba(0, 0, 0, 0.1);
width: 94%;
color: white;
}
#sendmessage {
margin: 0;
position: absolute;
height: 50%;
width: 5%;
outline: none;
top: 50%;
margin-left: 1%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.25);
border: none;
border-radius: 6px;
font-size: x-large;
}
#sendmessage:hover {
transition: all 0.3s ease;
background-color: rgba(0, 0, 0, 0.4);
}
#lightmodetoggle {
background-color: rgba(0, 0, 0, 0.25);
border: none;
margin: 10px;
border-radius: 6px;
font-size: x-large;
position: fixed;
outline: none;
}
#lightmodetoggle:hover {
transition: all 0.3s ease;
background-color: rgba(0, 0, 0, 0.4);
}
#discussion {
list-style-type: none;
}
#messagestyle {
padding: 5px;
border: 1px solid grey;
border-radius: 6px;
margin-bottom: 3px;
}
My HTML is as follows:
<div id="maincontent">
<div class="container" id="data">
<ul id="discussion">
</ul>
</div>
<div class="textmessaging">
<textarea id="message" placeholder="Message..." rows="3" cols="50"></textarea><button id="sendmessage" data-toggle="tooltip" title="Send!"><i class='far fa-paper-plane'></i></button>
<input type="hidden" id="displayname" />
</div>
</div>
JS as follows
<script src="Scripts/jquery-3.4.1.min.js"></script>
<!--Reference the SignalR library. -->
<script src="Scripts/jquery.signalR-2.2.2.min.js"></script>
<!--Reference the autogenerated SignalR hub script. -->
<script src="signalr/hubs"></script>
<!--Add script to update the page and send messages.-->
<script type="text/javascript">
$(function () {
// Declare a proxy to reference the hub.
var chat = $.connection.chatHub;
// Create a function that the hub can call to broadcast messages.
chat.client.broadcastMessage = function (name, message) {
// Html encode display name and message.
var encodedName = $('<div />').text(name).html();
var encodedMsg = $('<div />').text(message).html();
// Add the message to the page.
$('#discussion').append('<div><li id="appendedmsg"><strong>' + encodedName
+ '</strong><br><a id="messagestyle">' + encodedMsg + '<a></li></div>');
};
// Get the user name and store it to prepend to messages.
$('#displayname').val(prompt('Enter your name:', ''));
// Set initial focus to message input box.
$('#message').focus();
// Start the connection.
$.connection.hub.start().done(function () {
$('#sendmessage').click(function () {
// Call the Send method on the hub.
chat.server.send($('#displayname').val(), $('#message').val());
// Clear text box and reset focus for next comment.
$('#message').val('').focus();
});
});
});
// var msg = document.getElementById("message");
// var button = document.getElementById("sendmessage");
// textBox.addEventListener("keyup", function (event) {
// if (event.keyCode == 13) {
// button.click();
// }
// });
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
});
I've done some searching for a while and haven't found anything that suits my needs.

hope this can help, I make a little bit changes in your css code
body {
background-color: #2d3436;
margin: 0;
}
.container {
background-color: #2d3436;
padding: 20px;
color: white;
max-height: 80%;
}
.textmessaging {
background-color: #474f52;
padding: 20px;
position:fixed;
bottom: 0;
width: auto;
left: 0;
display: block;
right: 0;
}
#message::-webkit-scrollbar {
width: 8px;
}
/* Track */
#message::-webkit-scrollbar-track {
-webkit-border-radius: 10px;
border-radius: 10px;
}
/* Handle */
#message::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(67, 74, 139, 0.8);
}
#message::-webkit-scrollbar-thumb:window-inactive {
background: rgba(67, 74, 139, 0.4);
}
#message {
resize: none;
outline: none;
background-color: rgba(0, 0, 0, 0.1);
width: calc(100% - 92px);
color: white;
display: inline-block;
}
#sendmessage {
max-width: 72px;
margin: 0;
position: relative;
height: 49px;
width: 5%;
outline: none;
/* top: 50%; */
margin-left: 1%;
-ms-transform: translateY(-50%);
/* transform: translateY(-50%); */
background-color: rgba(0, 0, 0, 0.25);
border: none;
border-radius: 6px;
font-size: x-large;
display: inline-block;
float: right;
vertical-align: top;
}
#sendmessage:hover {
transition: all 0.3s ease;
background-color: rgba(0, 0, 0, 0.4);
}
#lightmodetoggle {
background-color: rgba(0, 0, 0, 0.25);
border: none;
margin: 10px;
border-radius: 6px;
font-size: x-large;
position: fixed;
outline: none;
}
#lightmodetoggle:hover {
transition: all 0.3s ease;
background-color: rgba(0, 0, 0, 0.4);
}
#discussion {
list-style-type: none;
}
#messagestyle {
padding: 5px;
border: 1px solid grey;
border-radius: 6px;
margin-bottom: 3px;
}
i.far.fa-paper-plane {}
<!-- FontAwesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="maincontent">
<div class="container" id="data">
<ul id="discussion">
</ul>
</div>
<div class="textmessaging">
<textarea id="message" placeholder="Message..." rows="3" cols="50"></textarea><button id="sendmessage" data-toggle="tooltip" title="Send!"><i class='far fa-paper-plane'></i></button>
<input type="hidden" id="displayname" />
</div>
</div>

CSS accordion opens on click, but won't close! Help would be appreciated

I've got a pure CSS accordion partly working on my site. It opens on click, however for some reason it won't close when clicked again.
I've tried lots of tweaks to try and get this sorted but nothing's helped so I'd love to know if anybody here could work it out for me.
The exact code I'm using is here on CodePen and pasted below.
.gohere-accordion {
margin-top: 7px;
margin-bottom: 7px;
margin-left: 4px;
margin-right: 15px;
width: 99%;
color: #484848;
}
.gohere-accordion input {
display: none;
}
.gohere-box {
position: relative;
background: white;
height: 64px;
transition: all .15s ease-in-out;
color: #484848;
}
.gohere-box::before {
content: '';
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
pointer-events: none;
box-shadow: 0 -1px 0 #e5e5e5,0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.24);
}
gohere-header.box {
background: #00BCD4;
color: #484848;
z-index: 100;
cursor: initial;
box-shadow: 0 -1px 0 #e5e5e5,0 0 2px -2px rgba(0,0,0,.12),0 2px 4px -4px rgba(0,0,0,.24);
}
gohere-header .gohere-box-title {
margin: 0;
font-weight: normal;
font-size: 16pt;
color: #484848;
cursor: initial;
}
.gohere-box-title {
width: calc(100% - 40px);
height: 64px;
line-height: 64px;
padding: 0 20px;
display: inline-block;
cursor: pointer;
color: #484848;
-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;
}
.gohere-box-content {
width: calc(100% - 40px);
padding: 30px 20px;
font-size: 11pt;
color: #484848;
color: rgba(0,0,0,.54);
display: none;
}
.gohere-box-close {
position: absolute;
height: 64px;
width: 100%;
top: 0;
left: 0;
cursor: pointer;
display: none;
}
input:checked + .gohere-box {
height: auto;
margin: 16px 0;
box-shadow: 0 0 6px rgba(0,0,0,.16),0 6px 12px rgba(0,0,0,.32);
}
input:checked + .gohere-box .gohere-box-title {
border-bottom: 1px solid rgba(0,0,0,.18);
}
input:checked + .gohere-box .gohere-box-content,
input:checked + .gohere-box .gohere-box-close {
display: inline-block;
}
.arrows section .gohere-box-title {
padding-left: 44px;
width: calc(100% - 64px);
}
.arrows section .gohere-box-title:before {
position: absolute;
display: block;
content: '\203a';
font-size: 18pt;
left: 20px;
top: -2px;
transition: transform .15s ease-in-out;
color: rgba(0,0,0,.54);
}
input:checked + section.gohere-box .gohere-box-title:before {
transform: rotate(90deg);
}
<nav class="gohere-accordion"><!-- THEN ONE OF THESE PER SINGLE ACCORDION --><input id="cb1" name="gohere-accordion" type="radio" />
<section class="gohere-box"><label class="gohere-box-title" for="cb1">This is a frequently asked question - opens, but won't close!</label>
<div class="gohere-box-content">Now it's open, how can I make it close on click?</div>
</section>
</nav>

Simply change your input element's type attribute from radio (which cannot be unclicked) to checkbox, like so:
.gohere-accordion {
margin-top: 7px;
margin-bottom: 7px;
margin-left: 4px;
margin-right: 15px;
width: 99%;
color: #484848;
}
.gohere-accordion input {
display: none;
}
.gohere-box {
position: relative;
background: white;
height: 64px;
transition: all .15s ease-in-out;
color: #484848;
}
.gohere-box::before {
content: '';
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
pointer-events: none;
box-shadow: 0 -1px 0 #e5e5e5, 0 0 2px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .24);
}
gohere-header.box {
background: #00BCD4;
color: #484848;
z-index: 100;
cursor: initial;
box-shadow: 0 -1px 0 #e5e5e5, 0 0 2px -2px rgba(0, 0, 0, .12), 0 2px 4px -4px rgba(0, 0, 0, .24);
}
gohere-header .gohere-box-title {
margin: 0;
font-weight: normal;
font-size: 16pt;
color: #484848;
cursor: initial;
}
.gohere-box-title {
width: calc(100% - 40px);
height: 64px;
line-height: 64px;
padding: 0 20px;
display: inline-block;
cursor: pointer;
color: #484848;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.gohere-box-content {
width: calc(100% - 40px);
padding: 30px 20px;
font-size: 11pt;
color: #484848;
color: rgba(0, 0, 0, .54);
display: none;
}
.gohere-box-close {
position: absolute;
height: 64px;
width: 100%;
top: 0;
left: 0;
cursor: pointer;
display: none;
}
input:checked+.gohere-box {
height: auto;
margin: 16px 0;
box-shadow: 0 0 6px rgba(0, 0, 0, .16), 0 6px 12px rgba(0, 0, 0, .32);
}
input:checked+.gohere-box .gohere-box-title {
border-bottom: 1px solid rgba(0, 0, 0, .18);
}
input:checked+.gohere-box .gohere-box-content,
input:checked+.gohere-box .gohere-box-close {
display: inline-block;
}
.arrows section .gohere-box-title {
padding-left: 44px;
width: calc(100% - 64px);
}
.arrows section .gohere-box-title:before {
position: absolute;
display: block;
content: '\203a';
font-size: 18pt;
left: 20px;
top: -2px;
transition: transform .15s ease-in-out;
color: rgba(0, 0, 0, .54);
}
input:checked+section.gohere-box .gohere-box-title:before {
transform: rotate(90deg);
}
<nav class="gohere-accordion">
<!-- THEN ONE OF THESE PER SINGLE ACCORDION --><input id="cb1" name="gohere-accordion" type="checkbox" />
<section class="gohere-box"><label class="gohere-box-title" for="cb1">This is a frequently asked question - opens, but won't close!</label>
<div class="gohere-box-content">Now it's open, how can I make it close on click?</div>
</section>
</nav>

Placing text inside range slider

I am new to CSS and have a question that is probably simple to answer, though I am not sure which class to start with.
My objective is to put text that fit neatly inside of range slider
I am using public range slider example:
let app = (() => {
function updateSlider(element) {
if (element) {
let parent = element.parentElement,
lastValue = parent.getAttribute('data-slider-value');
if (lastValue === element.value) {
return; // No value change, no need to update then
}
parent.setAttribute('data-slider-value', element.value);
let $thumb = parent.querySelector('.range-slider__thumb'),
$bar = parent.querySelector('.range-slider__bar'),
pct = element.value * ((parent.clientHeight - $thumb.clientHeight) / parent.clientHeight);
$thumb.style.bottom = `${pct}%`;
$bar.style.height = `calc(${pct}% + ${$thumb.clientHeight / 2}px)`;
$thumb.textContent = `${element.value}%`;
}
}
return {
updateSlider: updateSlider };
})();
(function initAndSetupTheSliders() {
const inputs = [].slice.call(document.querySelectorAll('.range-slider input'));
inputs.forEach(input => input.setAttribute('value', '50'));
inputs.forEach(input => app.updateSlider(input));
// Cross-browser support where value changes instantly as you drag the handle, therefore two event types.
inputs.forEach(input => input.addEventListener('input', element => app.updateSlider(input)));
inputs.forEach(input => input.addEventListener('change', element => app.updateSlider(input)));
})();
.range-slider {
position: relative;
text-align: center;
height: 300px;
max-height: 100%;
margin-top: 15%;
/*margin-bottom: 5vh;*/
}
/*.range-slider:before {
position: absolute;
top: -2em;
//left: .5em;
content: attr(data-slider-value) "%";
color: red;
font-size: 25px;
}*/
.range-slider__thumb {
position: absolute;
left: 32%;
width: 45px;
height: 45px;
line-height: 45px;
font-weight: bold;
background: white;
color: black;
background: url('../../../assets/images/button_round_dark.png');
font-size: 80%;
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.9);
border-radius: 50%;
pointer-events: none;
z-index:999;
// position: absolute;
// left: 42%;
// width: 30px;
// height: 30px;
// line-height: 30px;
// background: white;
// color: black;
// font-size: 50%;
// font-size: 80%;
// box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.9);
// border-radius: 50%;
// pointer-events: none;
// z-index:999;
}
.range-slider__thumb_start{
position: absolute;
left: 33%;
width: 45px;
height: 45px;
line-height: 30px;
background: white;
color: black;
background: url('../../../assets/images/button_round_dark.png');
font-size: 60%;
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.9);
border-radius: 50%;
pointer-events: none;
z-index:99;
bottom: 0px;
}
.range-slider__bar {
left: 42%;
bottom: 0;
position: absolute;
background: linear-gradient(to bottom, #c00000 0%, #ffe200 100%);
pointer-events: none;
width: 20px;
border-radius: 10px;
}
.range-slider input[type=range][orient=vertical] {
position: relative;
margin: 0;
height: 100%;
width: 100%;
display: inline-block;
position: relative;
writing-mode: bt-lr;
-webkit-appearance: slider-vertical;
}
.range-slider input[type=range][orient=vertical]::-webkit-slider-runnable-track, .range-slider input[type=range][orient=vertical]::-webkit-slider-thumb {
-webkit-appearance: none;
}
.range-slider input[type=range][orient=vertical]::-webkit-slider-runnable-track {
border: none;
background: orangered;
width: 18px;
border-color: #B94F1B;
border-radius: 10px;
//box-shadow: 0 0 0 20px rgba(96, 96, 96, 0.1);
//-webkit-box-shadow: 5px 38px 0px 53px rgba(0,0,0,0.35);
//-moz-box-shadow: 5px 38px 0px 53px rgba(0,0,0,0.35);
box-shadow: 0px 20px 0px 40px rgba(96, 96, 96, 0.1);
}
.range-slider input[type=range][orient=vertical]::-moz-range-track {
border: none;
background: white;
width: 18px;
border-color: #343440;
border-radius: 10px;
//box-shadow: 0 0 0 2px #3D3D4A;
}
.range-slider input[type=range][orient=vertical]::-ms-track {
border: none;
background: white;
width: 18px;
border-color: #343440;
border-radius: 10px;
box-shadow: 0 0 0 2px #3D3D4A;
color: transparent;
height: 100%;
}
.range-slider input[type=range][orient=vertical]::-ms-fill-lower, .range-slider input[type=range][orient=vertical]::-ms-fill-upper, .range-slider input[type=range][orient=vertical]::-ms-tooltip {
display: none;
}
.range-slider input[type=range][orient=vertical]::-webkit-slider-thumb {
width: 30px;
height: 30px;
opacity: 0;
}
.range-slider input[type=range][orient=vertical]::-moz-range-thumb {
width: 30px;
height: 30px;
opacity: 0;
}
.range-slider input[type=range][orient=vertical]::-ms-thumb {
width: 30px;
height: 30px;
opacity: 0;
}
.range-slider-text{
font-size: 1rem;
color: red;
text-transform: uppercase;
letter-spacing: 3px;
position: absolute;
bottom: 0;
left: 0;
margin-left: -30px;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
}
<div class="range-slider" id="range_slider">
<input type="range" orient="vertical" id="desire" name="desire" min="{{min}}" max="{{max}}" />
<div class="range-slider__bar"></div>
<div class="range-slider-text">Header Two</div>
<div class="range-slider__thumb"></div>
<div class="bubble" id="me" style="display: none">slide to provide your feedback</div>
<!-- <div class="range-slider__thumb_start"></div> -->
<div class="range-slider__line"></div>
</div>
I am new to CSS and have a question that is probably simple to answer, though I am not sure which class to start with.
My objective is to put text that fit neatly inside of range slider
I am using public range slider example:
Like

I just update your code with few CSS and HTML changes, I hope it'll help you out. Thanks
Add display: flex;, justify-content: center; and align-items: center CSS in .range-slider__bar.
.range-slider__bar {
left: 42%;
bottom: 0;
position: absolute;
background: linear-gradient(to bottom, #c00000 0%, #ffe200 100%);
pointer-events: none;
width: 20px;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
}
Also, add slider-text css.
.slider-text {
transform: rotate(-90deg);
white-space: nowrap;
}
In HTML i just add <div class="slider-text">My Desire</div> inside of your <div class="range-slider__bar">.
let app = (() => {
function updateSlider(element) {
if (element) {
let parent = element.parentElement,
lastValue = parent.getAttribute('data-slider-value');
if (lastValue === element.value) {
return; // No value change, no need to update then
}
parent.setAttribute('data-slider-value', element.value);
let $thumb = parent.querySelector('.range-slider__thumb'),
$bar = parent.querySelector('.range-slider__bar'),
pct = element.value * ((parent.clientHeight - $thumb.clientHeight) / parent.clientHeight);
$thumb.style.bottom = `${pct}%`;
$bar.style.height = `calc(${pct}% + ${$thumb.clientHeight / 2}px)`;
$thumb.textContent = `${element.value}%`;
}
}
return {
updateSlider: updateSlider };
})();
(function initAndSetupTheSliders() {
const inputs = [].slice.call(document.querySelectorAll('.range-slider input'));
inputs.forEach(input => input.setAttribute('value', '50'));
inputs.forEach(input => app.updateSlider(input));
// Cross-browser support where value changes instantly as you drag the handle, therefore two event types.
inputs.forEach(input => input.addEventListener('input', element => app.updateSlider(input)));
inputs.forEach(input => input.addEventListener('change', element => app.updateSlider(input)));
})();
.range-slider {
position: relative;
text-align: center;
height: 300px;
max-height: 100%;
margin-top: 15%;
/*margin-bottom: 5vh;*/
}
/*.range-slider:before {
position: absolute;
top: -2em;
//left: .5em;
content: attr(data-slider-value) "%";
color: red;
font-size: 25px;
}*/
.range-slider__thumb {
position: absolute;
left: 32%;
width: 45px;
height: 45px;
line-height: 45px;
font-weight: bold;
background: white;
color: black;
background: url('../../../assets/images/button_round_dark.png');
font-size: 80%;
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.9);
border-radius: 50%;
pointer-events: none;
z-index:999;
// position: absolute;
// left: 42%;
// width: 30px;
// height: 30px;
// line-height: 30px;
// background: white;
// color: black;
// font-size: 50%;
// font-size: 80%;
// box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.9);
// border-radius: 50%;
// pointer-events: none;
// z-index:999;
}
.range-slider__thumb_start{
position: absolute;
left: 33%;
width: 45px;
height: 45px;
line-height: 30px;
background: white;
color: black;
background: url('../../../assets/images/button_round_dark.png');
font-size: 60%;
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.9);
border-radius: 50%;
pointer-events: none;
z-index:99;
bottom: 0px;
}
.range-slider__bar {
left: 42%;
bottom: 0;
position: absolute;
background: linear-gradient(to bottom, #c00000 0%, #ffe200 100%);
pointer-events: none;
width: 20px;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.slider-text {
transform: rotate(-90deg);
white-space: nowrap;
}
.range-slider input[type=range][orient=vertical] {
position: relative;
margin: 0;
height: 100%;
width: 100%;
display: inline-block;
position: relative;
writing-mode: bt-lr;
-webkit-appearance: slider-vertical;
}
.range-slider input[type=range][orient=vertical]::-webkit-slider-runnable-track, .range-slider input[type=range][orient=vertical]::-webkit-slider-thumb {
-webkit-appearance: none;
}
.range-slider input[type=range][orient=vertical]::-webkit-slider-runnable-track {
border: none;
background: orangered;
width: 18px;
border-color: #B94F1B;
border-radius: 10px;
//box-shadow: 0 0 0 20px rgba(96, 96, 96, 0.1);
//-webkit-box-shadow: 5px 38px 0px 53px rgba(0,0,0,0.35);
//-moz-box-shadow: 5px 38px 0px 53px rgba(0,0,0,0.35);
box-shadow: 0px 20px 0px 40px rgba(96, 96, 96, 0.1);
}
.range-slider input[type=range][orient=vertical]::-moz-range-track {
border: none;
background: white;
width: 18px;
border-color: #343440;
border-radius: 10px;
//box-shadow: 0 0 0 2px #3D3D4A;
}
.range-slider input[type=range][orient=vertical]::-ms-track {
border: none;
background: white;
width: 18px;
border-color: #343440;
border-radius: 10px;
box-shadow: 0 0 0 2px #3D3D4A;
color: transparent;
height: 100%;
}
.range-slider input[type=range][orient=vertical]::-ms-fill-lower, .range-slider input[type=range][orient=vertical]::-ms-fill-upper, .range-slider input[type=range][orient=vertical]::-ms-tooltip {
display: none;
}
.range-slider input[type=range][orient=vertical]::-webkit-slider-thumb {
width: 30px;
height: 30px;
opacity: 0;
}
.range-slider input[type=range][orient=vertical]::-moz-range-thumb {
width: 30px;
height: 30px;
opacity: 0;
}
.range-slider input[type=range][orient=vertical]::-ms-thumb {
width: 30px;
height: 30px;
opacity: 0;
}
.range-slider-text{
font-size: 1rem;
color: red;
text-transform: uppercase;
letter-spacing: 3px;
position: absolute;
bottom: 0;
left: 0;
margin-left: -30px;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
}
<div class="range-slider" id="range_slider">
<input type="range" orient="vertical" id="desire" name="desire" min="{{min}}" max="{{max}}" />
<div class="range-slider__bar">
<div class="slider-text">My Desire</div>
</div>
<div class="range-slider-text">Header Two</div>
<div class="range-slider__thumb"></div>
<div class="bubble" id="me" style="display: none">slide to provide your feedback</div>
<!-- <div class="range-slider__thumb_start"></div> -->
<div class="range-slider__line"></div>
</div>

Making expandable material search bar with algolia autocomplete

I am using algolia autocomplete in my app. And I would like to build a search bar that expands like the expandable example on this page. I have a layout with a header bar that has a search input for bigger screens. On small screens I only have a magnifying glass icon, that on click toggles another header with a search bar, that I initially have it hidden. Here is the fiddle, which I wasn't able to get working, but hope it can still give you some overview. This is the layout:
<header class="mdc-toolbar mdc-toolbar--fixed toolbar--custom">
<div class="mdc-toolbar__row">
<section class="menu mdc-toolbar__section mdc-toolbar__section--align-start">
menu
<span class="mdc-toolbar__title">Title</span>
</section>
<section class="mdc-toolbar__section">
<form action="/search" method="get" class="search-field-desktop">
<div class="mdc-text-field mdc-text-field--box mdc-text-field--with-leading-icon autocomplete-search-field">
<i class="material-icons mdc-text-field__icon" tabindex="0">search</i>
<input name="q"
type="text"
class="mdc-text-field__input search-input-js aa-input-search"
placeholder="Search for players and videos ..."
aria-label="Full-Width Text Field">
</div>
</form>
</section>
<section class="mdc-toolbar__section mdc-toolbar__section--align-end" role="toolbar">
search
more_vert
</section>
</div>
</header>
<header class="search-field-phone mdc-toolbar mdc-toolbar--fixed toolbar--custom">
<div class="mdc-toolbar__row">
<a id="search-input-close" class="material-icons mdc-toolbar__menu-icon" tabindex="0">arrow_back</a>
<form action="/search" method="get">
<div class="mdc-text-field mdc-text-field--box autocomplete-search-field">
<input name="q"
type="text"
class="mdc-text-field__input search-input-js aa-input-search"
placeholder="Search for players and videos ..."
aria-label="Full-Width Text Field"
autofocus>
</div>
</form>
</div>
</header>
The problem I have is that the dropdown menu is not visible on small screens for some reason and on bigger screens it is. This is the scss/css:
.algolia-autocomplete {
display: flex!important;
flex: auto!important;
height: 100%;
}
.aa-dropdown-menu {
position: relative;
top: -6px;
border-radius: 3px;
margin: 6px 0 0;
padding: 0;
text-align: left;
height: auto;
position: relative;
background: $white;
border: 1px solid #ccc;
width: 100%;
left: 0 !important;
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2), 0 2px 3px 0 rgba(0, 0, 0, 0.1);
}
.aa-dropdown-menu .aa-suggestions {
position: relative;
z-index: 1000;
}
.aa-dropdown-menu [class^="aa-dataset-"] {
position: relative;
border: 0;
border-radius: 3px;
overflow: auto;
padding: 0;
color: #3c3e42;
font-weight: 500;
}
.aa-dropdown-menu * {
box-sizing: border-box;
}
.aa-suggestion {
display: block;
width: 100%;
height: 72px;
clear: both;
.mdc-list-item {
height: 72px;
}
}
.aa-suggestion span {
white-space: nowrap !important;
text-overflow: ellipsis;
overflow: hidden;
display: block;
float: left;
line-height: 1em;
width: calc(100% - 30px);
}
.aa-suggestion.aa-cursor {
background-color: transparent;
}
.aa-suggestion em {
color: #00bcd4;
font-weight: 700;
}
.aa-suggestion img {
float: left;
height: 44px;
width: 44px;
margin-right: 6px;
}
.aa-suggestion a {
color: #3c3e42;
}
.aa-suggestions-category {
font-weight: 700;
color: #3c3e42;
border-bottom: 1px solid rgba(102, 105, 105, 0.17);
}
.powered-by-algolia {
padding-left: 15px;
border-top: 1px solid rgba(102, 105, 105, 0.17);
display: flex;
align-items: center;
height: 30px;
}
.aa-input-container {
display: inline-block;
position: relative; }
.aa-input-search {
width: 100%;
height: 30px;
padding: 12px 28px 12px 12px;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; }
.aa-input-search::-webkit-search-decoration,
.aa-input-search::-webkit-search-cancel-button,
.aa-input-search::-webkit-search-results-button,
.aa-input-search::-webkit-search-results-decoration {
display: none;
}
.media {
margin: 10px 0;
}
.media-body {
p {
margin: 0;
}
}
.toolbar--custom {
color: $white;
.mdc-toolbar__row {
min-height: 56px;
}
form, .autocomplete-search-field {
width: 100%;
}
.mdc-text-field--box:not(.mdc-text-field--upgraded) {
height: 36px;
}
.mdc-text-field--box {
overflow: visible;
margin: auto;
.mdc-text-field__icon {
bottom: 8px;
font-size: 22px;
}
}
.mdc-text-field--box:after,
.mdc-text-field--box:before {
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#search-input-open {
display: none;
}
#media only screen and (max-width: 782px) {
#search-input-open {
display: block;
}
.search-field-desktop {
display: none;
}
}
}
.search-field-phone {
clip-path: circle(0%);
visibility: hidden;
.mdc-text-field {
clip-path: circle(0%);
}
}
#mixin search-animated-open {
-webkit-animation: open 0.3s forwards;
animation: open 0.3s forwards;
animation-timing-function: $mdc-animation-standard-curve-timing-function;
}
#mixin search-animated-close {
-webkit-animation: close 0.3s forwards;
animation: close 0.3s forwards;
animation-timing-function: $mdc-animation-standard-curve-timing-function;
}
.search-field-phone-open, {
visibility: visible;
#include search-animated-open;
.mdc-text-field {
#include search-animated-open;
}
}
.search-field-phone-close, {
#include search-animated-close;
.mdc-text-field {
#include search-animated-close;
}
}
#keyframes open {
from {
clip-path: circle(0 at calc(100% - 68px) 50%);
}
to {
clip-path: circle(150% at calc(100% - 68px) 50%);
}
}
#keyframes close {
from {
clip-path: circle(150% at calc(100% - 68px) 50%);
}
to {
clip-path: circle(0 at calc(100% - 68px) 50%);
visibility: hidden;
}
}
The layout of the whole page looks like this:
<div id="app">
#include('layouts.partials.sidebar')
#include('layouts.partials.navigation')
<div class="page-content">
#yield('content')
</div>
</div>
Where the navigation partial is the file with headers shown above. This is the sidebar partial:
<aside class="mdc-drawer mdc-drawer--temporary mdc-typography">
<nav class="mdc-drawer__drawer">
<header class="mdc-drawer__header">
<div class="mdc-drawer__header-content">
Header here
</div>
</header>
<nav id="icon-with-text-demo" class="mdc-drawer__content mdc-list">
<a class="mdc-list-item mdc-list-item--activated" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>Inbox
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">star</i>Star
</a>
</nav>
</nav>
</aside>
This is the css for the page:
body {
margin: 0;
}
#app {
display: flex;
}
.page-content {
display: inline-flex;
flex-direction: column;
flex-grow: 1;
height: 100%;
box-sizing: border-box;
}
I am not sure what is causing this behaviour, why is the dropdown menu for bigger screens visible, and the one for smaller screens not?
Update
I have noticed that when I have opened search input on small screens, if I remove the search-field-phone-open then the dropdown menu is visible, I am not sure what is in that class causing that the dropdown is not visible?
.search-field-phone-open, {
visibility: visible;
#include search-animated-open;
.mdc-text-field {
#include search-animated-open;
}
}

I am not sure I understood what you need but check the snippet below:
var client = algoliasearch('latency', '6be0576ff61c053d5f9a3225e2a90f76');
var index = client.initIndex('contacts');
$('.input-search').autocomplete({ hint: false }, [
{
source: function(searchBar, cb) {
index.search(searchBar, { hitsPerPage: 5 }, function(error, content) {
if (error) {
cb([]);
return;
}
cb(content.hits, content);
});
},
displayKey: 'name',
templates: {
suggestion: function(suggestion) {
return suggestion._highlightResult.name.value;
}
}
}
]);
.algolia-autocomplete {
display: flex!important;
flex: auto!important;
height: 100%;
}
.aa-dropdown-menu {
position: relative;
top: -6px;
border-radius: 3px;
margin: 6px 0 0;
padding: 0;
text-align: left;
height: auto;
position: relative;
background: $white;
border: 1px solid #ccc;
width: 100%;
left: 0 !important;
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2), 0 2px 3px 0 rgba(0, 0, 0, 0.1);
}
.aa-dropdown-menu:before {
position: absolute;
content: '';
width: 14px;
height: 14px;
background: #fff;
z-index: 0;
top: -7px;
border-top: 1px solid #D9D9D9;
border-right: 1px solid #D9D9D9;
transform: rotate(-45deg);
border-radius: 2px;
z-index: 999;
display: block;
left: 24px;
}
.aa-dropdown-menu .aa-suggestions {
position: relative;
z-index: 1000;
}
.aa-dropdown-menu [class^="aa-dataset-"] {
position: relative;
border: 0;
border-radius: 3px;
overflow: auto;
padding: 8px 8px 8px;
color: #3c3e42;
font-weight: 500;
}
.aa-dropdown-menu * {
box-sizing: border-box;
}
.aa-suggestion {
padding: 0 4px 0;
display: block;
width: 100%;
height: 38px;
clear: both;
}
.aa-suggestion span {
white-space: nowrap !important;
text-overflow: ellipsis;
overflow: hidden;
display: block;
float: left;
line-height: 1em;
width: calc(100% - 30px);
}
.aa-suggestion.aa-cursor {
background-color: transparent;
}
.aa-suggestion em {
color: #00bcd4;
font-weight: 700;
}
.aa-suggestion img {
float: left;
height: 44px;
width: 44px;
margin-right: 6px;
}
.aa-suggestion a {
color: #3c3e42;
}
.aa-suggestions-category {
font-weight: 700;
color: #3c3e42;
border-bottom: 1px solid rgba(102, 105, 105, 0.17);
}
.mdl-textfield {
margin: -20px !important;
}
/* fallback */
#font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/materialicons/v36/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-moz-font-feature-settings: 'liga';
-moz-osx-font-smoothing: grayscale;
}
<link href="https://storage.googleapis.com/code.getmdl.io/1.0.1/material.teal-red.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/material-components-web#0.8.0/dist/material-components-web.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
<script src="https://cdn.jsdelivr.net/autocomplete.js/0/autocomplete.jquery.min.js"></script>
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.1/material.min.js"></script>
<script src="https://unpkg.com/material-components-web#0.8.0/dist/material-components-web.min.js"></script>
<header class="mdc-toolbar">
<div class="mdc-toolbar__row">
<section class="mdc-toolbar__section mdc-toolbar__section--align-start">
menu
<span class="mdc-toolbar__title">Title</span>
</section>
<section class="mdc-toolbar__section">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
<label class="mdl-button mdl-js-button mdl-button--icon" for="site-search">
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input input-search" name="searchBar" type="search" id="site-search" />
<label class="mdl-textfield__label" for="site-search">Search</label>
</div>
</div>
</section>
<section class="mdc-toolbar__section mdc-toolbar__section--align-end">
Custom icon
</section>
</div>
</header>
Hope this helps you.
References
I referred to mdc-toolbar available on GitHub.

Simulate select box with CSS only

Based on some code I found, I was able to make a kind of select menu with CSS only.
But now I have a problem with overlaying divs. It means, all divs below that "select menu" are moving down on hover or click that menu.
I've tried to play with z-index and positioning without success. I believe its quite simple but I'm seeing this code for many hours that I'm going crazy.
body {
width: 100%;
min-height: 500px;
margin: 3em auto;
font-family: 'Roboto', sans-serif;
letter-spacing: 1px;
}
h1 {
text-align: center;
color: #fff;
font-weight: 300;
font-size: 50px;
font-family: ProximaNovaSoftW03-Semibold;
letter-spacing: 0px;
text-shadow: 1px 1px rgba(0, 0, 0, 0.02), 2px 2px rgba(0, 0, 0, 0.02), 3px 3px rgba(0, 0, 0, 0.02), 4px 4px rgba(0, 0, 0, 0.02), 5px 5px rgba(0, 0, 0, 0.02), 6px 6px rgba(0, 0, 0, 0.02), 7px 7px rgba(0, 0, 0, 0.02);
}
h1 i {
position: relative;
font-size: 70px;
}
p {
text-align: center;
color: #000;
font-size: 14px;
margin-bottom: 2em;
line-height: 30px;
}
p img {
position: relative;
top: 8px;
right: 10px;
}
.paragrafo {
width: 100%;
background-color: #e1e1e1;
position: fixed;
}
.reserve-select {
position: relative;
overflow: hidden;
display: block;
margin: auto;
width: 330px;
height: 100%;
border-bottom: 0px;
border-radius: 3px;
font-size: 12px;
box-shadow: 0px 1em 1em -1.5em rgba(0, 0, 0, 0.5);
border: 1px solid rgba(0, 0, 0, 0.05);
}
.reserve-select:not(:hover)>i.toggle.icon-arrow-down {
display: block !important;
}
.reserve-select:not(:hover)>i.toggle.icon-arrow-up {
display: none !important;
}
.reserve-select:not(:hover) label.option>input:not(:checked)~span.title {
display: none !important;
}
.reserve-select>i.toggle {
position: absolute;
z-index: 4;
right: 1.5em;
top: 1.6em;
color: #ccc;
}
.reserve-select .title,
.reserve-select .placeholder {
position: relative;
display: block;
width: 100%;
height: 100%;
padding: 1.5em 2em;
background: white;
border-top: 1px solid rgba(0, 0, 0, 0.05);
cursor: pointer;
}
.reserve-select>input {
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
width: 100%;
height: 100%;
display: block;
opacity: 0;
cursor: pointer;
}
.reserve-select>input:checked~i.toggle.icon-arrow-down {
display: none;
}
.reserve-select>input:checked~i.toggle.icon-arrow-up {
display: block;
}
.reserve-select>input:checked div.options label.option .title {
display: none !important;
}
.reserve-select>input:not(:checked) {
z-index: 4;
}
.reserve-select>input:not(:checked)~label.option>span.title {
display: none;
}
.reserve-select>input:not(:checked)~i.toggle.icon-arrow-up {
display: none;
}
.reserve-select>input:not(:checked)~i.toggle.icon-arrow-down {
display: block;
}
.reserve-select>input:disabled {
cursor: no-drop;
}
.reserve-select>span.placeholder {
position: relative;
z-index: 0;
display: inline-block;
width: 100%;
color: #999;
border-top: 0px;
}
.reserve-select label.option {
display: block;
overflow: hidden;
z-index: 1;
width: 100%;
transition: all 1s ease-out;
}
.reserve-select label.option span.title {
position: relative;
z-index: 2;
transition: background .3s ease-out;
}
.reserve-select label.option span.title i.icon {
padding-right: 8px;
color: #92a8d1;
}
.reserve-select label.option span.title:hover {
color: white;
background: #3498db;
box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.1);
}
.reserve-select label.option input {
display: none;
}
.reserve-select label.option input:checked~span.title {
position: absolute;
display: block;
z-index: 3;
top: 0px;
font-size: 12px;
background: #fff;
border-top: 0px;
box-shadow: none;
color: inherit;
width: 100%;
}
.reserve-select label.option input:disabled~span.title {
background: #f9f9f9 !important;
color: #aaa;
}
.reserve-select label.option input:disabled~span.title:hover {
color: #aaa;
background: none;
cursor: no-drop;
}
<div class="reserve-select">
<input type="radio" name="option">
<span class="placeholder">Choose...</span>
<label class="option">
<input type="radio" name="option">
<span class="title">Speedometer</span>
</label>
<label class="option">
<input type="radio" name="option">
<span class="title">Fire</span>
</label>
<label class="option">
<input type="radio" name="option">
<span class="title">Badge</span>
</label>
</div>
<div class="paragrafo">
<p>Teste</p>
</div>
LINK: https://jsfiddle.net/o2gxgz9r/13580/

try this.Wrap options in a div and give position absolute for that div
body {
width: 100%;
min-height: 500px;
margin: 3em auto;
background: white;
/* IE6-9 fallback on horizontal gradient */
font-family: 'Roboto', sans-serif;
letter-spacing: 1px;
}
h1 {
text-align: center;
color: #fff;
font-weight: 300;
font-size: 50px;
font-family: ProximaNovaSoftW03-Semibold;
letter-spacing: 0px;
text-shadow: 1px 1px rgba(0, 0, 0, 0.02), 2px 2px rgba(0, 0, 0, 0.02), 3px 3px rgba(0, 0, 0, 0.02), 4px 4px rgba(0, 0, 0, 0.02), 5px 5px rgba(0, 0, 0, 0.02), 6px 6px rgba(0, 0, 0, 0.02), 7px 7px rgba(0, 0, 0, 0.02);
}
h1 i {
position: relative;
font-size: 70px;
}
p {
text-align: center;
color: #000;
font-size: 14px;
margin-bottom: 2em;
line-height: 30px;
}
p img {
position: relative;
top: 8px;
right: 10px;
}
.paragrafo {
width:100%;
background-color: #e1e1e1;
z-index: 1;
}
.reserve-select {
position: relative;
//overflow: hidden;
display: block;
margin: auto;
width: 330px;
height: 100%;
border-bottom: 0px;
border-radius: 3px;
font-size: 12px;
box-shadow: 0px 1em 1em -1.5em rgba(0, 0, 0, 0.5);
border: 1px solid rgba(0, 0, 0, 0.05);
}
.reserve-select:not(:hover) > i.toggle.icon-arrow-down {
display: block !important;
}
.reserve-select:not(:hover) > i.toggle.icon-arrow-up {
display: none !important;
}
.reserve-select:not(:hover) label.option > input:not(:checked) ~ span.title {
display: none !important;
}
.reserve-select > i.toggle {
position: absolute;
z-index: 4;
right: 1.5em;
top: 1.6em;
color: #ccc;
}
.reserve-select .title,
.reserve-select .placeholder {
position: relative;
display: block;
width: 100%;
height: 100%;
padding: 1.5em 2em;
background: white;
border-top: 1px solid rgba(0, 0, 0, 0.05);
cursor: pointer;
}
.reserve-select > input {
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
width: 100%;
height: 100%;
display: block;
opacity: 0;
cursor: pointer;
}
.reserve-select > input:checked ~ i.toggle.icon-arrow-down {
display: none;
}
.reserve-select > input:checked ~ i.toggle.icon-arrow-up {
display: block;
}
.reserve-select > input:checked div.options label.option .title {
display: none !important;
}
.reserve-select > input:not(:checked) {
z-index: 4;
}
.reserve-select > input:not(:checked) ~ label.option > span.title {
display: none;
}
.reserve-select > input:not(:checked) ~ i.toggle.icon-arrow-up {
display: none;
}
.reserve-select > input:not(:checked) ~ i.toggle.icon-arrow-down {
display: block;
}
.reserve-select > input:disabled {
cursor: no-drop;
}
.reserve-select > span.placeholder {
position: relative;
z-index: 0;
display: inline-block;
width: 100%;
color: #999;
border-top: 0px;
}
.reserve-select label.option {
display: block;
overflow: hidden;
z-index: 1;
width: 100%;
transition: all 1s ease-out;
}
.reserve-select label.option span.title {
position: relative;
z-index: 2;
transition: background .3s ease-out;
}
.reserve-select label.option span.title i.icon {
padding-right: 8px;
color: #92a8d1;
}
.reserve-select label.option span.title:hover {
color: white;
background: #3498db;
box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.1);
}
.reserve-select label.option input {
display: none;
}
.reserve-select label.option input:checked ~ span.title {
position: absolute;
display: block;
z-index: 3;
top: 0px;
font-size: 12px;
background: #fff;
border-top: 0px;
box-shadow: none;
color: inherit;
width: 100%;
}
.reserve-select label.option input:disabled ~ span.title {
background: #f9f9f9 !important;
color: #aaa;
}
.reserve-select label.option input:disabled ~ span.title:hover {
color: #aaa;
background: none;
cursor: no-drop;
}
.options{
position:absolute;
top:50px;
width:100%;
}
<body>
<div class="reserve-select">
<input type="radio" name="option">
<span class="placeholder">Choose...</span>
<div class="options">
<label class="option">
<input type="radio" name="option">
<span class="title">Speedometer</span>
</label>
<label class="option">
<input type="radio" name="option">
<span class="title">Fire</span>
</label>
<label class="option">
<input type="radio" name="option">
<span class="title">Badge</span>
</label>
</div>
</div>
<div class="paragrafo">
<p>Teste</p>
</div>