html checkbox select list with collapsible children - javascript

I am using Vue.js and HTML, SCSS to create a website and am in need of creating a drop-down similar to the below gif
The above gif show how the drop-down should function when the hotel is selected the dropdown should show the room types available within that hotel.
I have already created the above example using HTML, and vue v-if. but the code is bulky and has bugs, is there any packages, or examples that provide a similar drop-down. can anyone suggest me for this?
Thanks in advance...
my code,
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-family: "Open Sans";
font-weight: normal;
font-style: normal;
font-stretch: normal;
letter-spacing: normal;
color: grey;
line-height: 1.5;
margin-left: 20px;
font-size: 16px;
width: 229px;
height: 60px;
border: solid 1px #e9e9e9;
border-radius: 5px;
padding-left: 15px;
margin-top: 7px;
margin-left: 20px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* background: url("../assets/First_Picker/icon-copy-2.svg") no-repeat; */
background-size: 12px;
background-position: calc(100% - 20px) center;
background-color: white;
background-repeat: no-repeat;
}
.navbar a:hover,
.dropdown:hover .dropbtn,
.dropbtn:focus {
background-color: white;
outline: none;
}
.dropdown-content {
display: none;
position: relative;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1000;
line-height: 1.5;
margin-left: 20px;
font-size: 16px;
min-width: 229px;
width: 229px;
border-radius: 0;
padding-left: 15px;
margin-top: 7px;
margin-left: 20px;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
#arrow1 {
padding-left: 50px;
width: 5.4px;
height: 8.8px;
/* transform: rotate(-270deg); */
color: #a9a9a9;
}
.dropdown-header {
color: #a9a9a9;
}
.show {
display: block;
}
/*CHECK BOX STYLES*/
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* width: 102px; */
height: 24px;
font-family: "Open Sans";
font-size: 14px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 1.71;
letter-spacing: normal;
color: #272729;
}
/* Hide the browser's default checkbox */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 5px;
left: 0;
height: 18px;
width: 18px;
background-color: white;
border: 1px solid grey;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
/* background-color: #283fb0; */
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #283fb0;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: inline-block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 6px;
top: 2px;
width: 6px;
height: 9px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.checkout_btn {
width: 114px;
margin-top: 6px;
margin-left: 20px;
height: 60px;
border-radius: 5px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
background-color: #283fb0;
}
.checkout_txt {
width: 76px;
height: 24px;
font-family: "Open Sans";
font-size: 14px;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: 1.71;
letter-spacing: normal;
text-align: center;
color: #ffffff;
}
<div class="dropdown">
<button class="dropbtn" #click="PickHotel">
{{ hotel_selected ? selected_hotel.name: 'Select Hotel' }}
<i
class="fa fa-chevron-down"
id="arrow1"
></i>
</button>
<div
id="myDropdown3"
v-bind:class="[hotelPicker == true ? 'dropdown-content show' : 'dropdown-content']"
>
<p
class="dropdown-header"
v-if="hotel_selected ==false || hotel_selected==true & roomTypes_selected.length >1"
>Select Hotel</p>
<p class="dropdown-header" v-else>Select a Room Type</p>
<label class="container" v-if="!hotel_selected" v-for="(item,i) in Hotel" :key="i">
{{ item.hotel }}
<input
type="checkbox"
:value="item.hotel"
:name="i"
:id="i"
#input="selectHotel($event.target.value,$event.target.name)"
>
<span class="checkmark"></span>
</label>
<!-- ROOMTYPES -->
<label
class="container"
v-if="hotel_selected"
v-for="rmType in Hotel[selected_hotel ? selected_hotel.id : 0].roomTypes"
:key="rmType.id"
>
{{ rmType.type }}
<input
type="checkbox"
:value="rmType.type"
:name="rmType.id"
:id="rmType.id"
#input="selectRoomType($event.target.value,$event.target.name)"
>
<span class="checkmark"></span>
</label>
</div>
</div>


Check this solution out. I just created a small component that will help you modify your code a little. I hope this helps.
<template>
<div class="container">
<form>
<div class="row">
<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<div class="form-group">
<select v-model="selectedValue">
<option v-for="(val,key) in formData" :key="key">{{key}}</option>
</select>
</div>
<div class="form-group">
<app-checkbox :childData="selectedChildData"></app-checkbox>
</div>
</div>
</div>
{{selectedChildData}}
</form>
</div>
</template>
<script>
import AppCheckbox from "./AppCheckbox"
export default {
data(){
return {
formData:{
test1:["single","double"],
test2:["sample1","sample2"]
},
selectedValue:"",
selectedChildData:[],
formDataSelected:[]
}
},
watch:{
selectedValue(val){
this.selectedChildData = this.formData[val]
}
},
components:{
"app-checkbox": AppCheckbox
}
}
</script>
<style>
</style>
This is the code for AppCheckbox Component
<template>
<div>
<div class="form-group" v-if="customData.length != 0 || customData.length != null" v-for="(val,index) in customData" :key="index">
<input type="checkbox" :value="val" v-model="childSelectedData">{{val}}
</div>
</div>
</template>
<script>
export default {
props:{
childData:Array
},
data(){
return {
childSelectedData:[]
}
},
computed:{
customData:{
get(){
return this.childData;
}
}
}
}
</script>

Related

Hovering on animated navbar goes wrong

I have a problem.
I have an animated navigation bar on my html website, so that if you scroll it'll change. But I want that if I'm hovering on the changed navbar, it'll change back to his normal state. But that doesn't work at all. I hope you guys can help me.
Code here:
window.addEventListener("scroll", function(){
var header = document.querySelector(".navbar");
header.classList.toggle("sticky", window.scrollY > 0);
});
let navbar = document.querySelector(".sticky");
navbar.addEventListener("mouseover", function( event ){
navbar.classList.toggle("navbar", navbar.onmouseover);}
, false);
body{
margin: 0 0 0 0;
padding: 0;
}
.head {
display: inline-block;
position: absolute;
margin: 0;
background-image: url('pictures/head.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 0;
text-align: center;
height: 500px;
width: 100%;
}
.head h1 {
color: white;
text-align: center;
padding: 100px 100px 25px;
font-family: Copperplate, Monaco, "Lucida Console", monospace;
font-size: 50px;
}
.head h2 {
font-family: Copperplate, Monaco, "Lucida Console", monospace;
font-size: 30px;
color: white;
}
.navbar .dropbtn {
background-color: white;
color: black;
padding: 16px 16px 14px 16px;
font-size: 20px;
border: none;
cursor: pointer;
border-left: none;
border-right: 1px solid grey;
color: black;
transition: 0.6s;
}
.sticky .dropbtn {
background: none;
color: black;
padding: 16px 16px 14px 16px;
font-size: 16px;
border: none;
cursor: pointer;
border-left: none;
border-right: 1px solid grey;
color: white;
transition: 0.6s;
}
.navbar {
z-index: 1;
overflow: visible;
background-color: white;
position: fixed;
top: 0;
width: 100%;
float: left;
transition: 0.6s;
.navbar .dropdownlinks {
float: left;
}
}
.dropdown {
position: relative;
display: inline-block;
margin: -2px;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
background-color: white;
z-index: 1;
box-shadow: 0px 8px 16px 0px black;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
border-bottom: 1px solid black;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: red;
color: white;
}
.navbar img {
width: 50px;
height: 50px;
border-right: 1px solid grey;
padding-right: 4px;
top: 0;
float: left;
}
.dropdown-content a:hover {
color: white;
background-color: red;
}
.sticky {
background: none;
transition: 0.6s;
}
<header>
<div class="navbar">
<img src="pictures/gear_icon.png" alt="icon">
<div class="dropdownlinks">
<div class="dropdown">
<button class="dropbtn">F1 history</button>
<div class="dropdown-content">
All the teams
All world champions
</div>
</div>
<div class="dropdown">
<button class="dropbtn">News and times</button>
<div class="dropdown-content">
Driver and team news
Liveblog
Calender
Archives
</div>
</div>
<div class="dropdown">
<button class="dropbtn">This season</button>
<div class="dropdown-content">
Driver's standings
Constructor's standings
All current drivers
All current teams
</div>
</div>
</div>
</div>
</header>
It's a formula 1 website btw, so if you love formula 1 please help me:)

3 popup div click outside to close

I have 3 popup divs that open onclick. At first it you clicked inside the div it closed, i fixed that. Then i found a code to click outside the div and it would close the div. So I edited that code and it works fine, if you click outside the div it closed. So I added that code to all 3 and now none of the click outside the divs to close work. I do not understand why this is happening as I am extremely new to java script coding. If someone could help me I would be extremely grateful.Thanks
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
// Prevents menu from closing when clicked inside
document.getElementById("myPopup").addEventListener('click', function (event) {
event.stopPropagation();
});
// Closes the menu in the event of outside click
window.onclick = function(event) {
if (!event.target.matches('.amount')) {
var dropdowns =
document.getElementsByClassName("tooltiptext");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openmyPopup = dropdowns[i];
if (openmyPopup.classList.contains('show')) {
openmyPopup.classList.remove('show');
}
}
}
}
function myFunctions() {
var popup = document.getElementById("mypopup");
popup.classList.toggle("shows");
}
// Prevents menu from closing when clicked inside
document.getElementById("mypopup").addEventListener('click', function (event) {
event.stopPropagation();
});
// Closes the menu in the event of outside click
window.onclick = function(event) {
if (!event.target.matches('.furbm')) {
var dropdowns =
document.getElementsByClassName("tooltipstext");
var i;
for (i = 0; i < dropdownss.length; i++) {
var openmypopup = dropdowns[i];
if (openmypopup.classList.contains('shows')) {
openmypopup.classList.remove('shows');
}
}
}
}
function myFunctionss() {
var popup = document.getElementById("mYpopup");
popup.classList.toggle("showS");
}
// Prevents menu from closing when clicked inside
document.getElementById("mYpopup").addEventListener('click', function (event) {
event.stopPropagation();
});
// Closes the menu in the event of outside click
window.onclick = function(event) {
if (!event.target.matches('.furbc')) {
var dropdowns =
document.getElementsByClassName("toolstiptext");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openmYpopup = dropdowns[i];
if (openmypopup.classList.contains('showS')) {
openmypopup.classList.remove('showS');
}
}
}
}
/******************************************************************************************************************************************************Header*/
.s-header {
background-color: red;
bottom: 0;
height: 65px;
left: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
}
.s-header-inner {
background-color: red;
border: 1px solid red;
height: 63px;
margin: auto;
width: 95%;
}
.s-header-links-left {
float: left;
margin-top: 12px;
}
/********************************************************************************************************************************************************Logo*/
.s-logo {
height: 65px;
position: absolute;
width: 150px;
}
.s-logo img {
position: absolute;
width: 185px;
}
/***********************************************************************************************************************************************Amount Raised*/
.s-header-links-right {
float: right;
margin-top: 20px;
}
.amount {
color: red;
cursor: pointer;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 18px;
font-weight: 600;
}
.amount:hover {
color: red;
cursor: pointer;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 18px;
font-weight: 600;
}
.tooltip {
display: inline-block;
-moz-user-select: none;
-ms-user-select: none;
position: relative;
-webkit-user-select: none;
user-select: none;
}
.tooltip .tooltiptext {
background-color: rgba(0, 0, 0, 0.36);
border-radius: 5px;
border-top: 4px solid #da291c;
color: #ffffff;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 400;
left: 50%;
margin-left: -190px;
margin-top: 1px;
opacity: 1;
padding: 10px ;
position: absolute;
text-align: left;
visibility: hidden;
width: 205px;
z-index: 1;
}
/* Toggle this class - hide and show the popup */
.tooltip .show {
animation: fadeIn 1s;
visibility: visible;
-webkit-animation: fadeIn 1s;
}
/***************************************************************************************************************************************Fur Baby Of The Month*/
.furbm {
cursor: pointer;
margin-left: 25px;
margin-right: 25px;
}
.furbm .fa-trophy {
color: red!important;
font-size: 18px!important;
}
.furbm .fa-trophy:hover {
color: red!important;
font-size: 18px!important;
}
.tooltips {
display: inline-block;
-moz-user-select: none;
-ms-user-select: none;
position: relative;
-webkit-user-select: none;
user-select: none;
}
.tooltips .tooltipstext {
background-color: rgba(0, 0, 0, 0.36);
border-radius: 5px;
border-top: 4px solid #da291c;
color: #ffffff;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 400;
left: 50%;
margin-left: -215px;
margin-top: 1px;
opacity: 1;
padding: 10px ;
position: absolute;
text-align: center;
visibility: hidden;
width: 205px;
z-index: 1;
}
.tooltips .shows {
animation: fadeIn 1s;
visibility: visible;
-webkit-animation: fadeIn 1s;
}
.tooltipstext img {
height: 150px;
margin-top: 20px;
width: 150px
}
/***************************************************************************************************************************************Fur Baby Contest*/
.furbc {
cursor: pointer;
}
.furbc .fa-comments {
color: red!important;
font-size: 20px!important;
}
.furbc .fa-comments:hover {
color: #ffffff!important;
font-size: 20px!important;
}
.toolstip {
display: inline-block;
-moz-user-select: none;
-ms-user-select: none;
position: relative;
-webkit-user-select: none;
user-select: none;
}
.toolstip .toolstiptext {
background-color: rgba(0, 0, 0, 0.36);
border-radius: 5px;
border-top: 4px solid #da291c;
color: #ffffff;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 400;
left: 50%;
margin-left: -281px;
margin-top: 1px;
opacity: 1;
padding: 10px ;
position: absolute;
text-align: left;
visibility: hidden;
width: 275px;
z-index: 1;
}
.toolstip .showS {
animation: fadeIn 1s;
visibility: visible;
-webkit-animation: fadeIn 1s;
}
.furbcf form {
display: flex;
position: relative;
width: 100%;
}
.furbcf input[type=text] {
border: 1px solid #C2C2C2;
border-radius: 5px;
box-sizing: border-box;
color: #242527;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 300;
margin: 0px 0px;
padding: 5px 5px;
width: 175px;
}
.furbcf input:focus {
border: 1px solid #da291c;
border-radius: 5px;
outline: none;
}
.furbcf textarea {
border: 1px solid #C2C2C2;
border-radius: 5px;
box-sizing: border-box;
color: #242527;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 300;
margin: 0px 0;
padding: 5px 5px;
width: 175px;
}
.furbcf textarea:focus {
border: 1px solid #da291c;
border-radius: 5px;
outline: none;
}
.furbcf input[type="submit"] {
background-color: #ffffff;
border: 2px solid #da291c;
border-radius: 5px;
box-sizing: border-box;
color: #da291c;
cursor: pointer;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 300;
outline: none;
padding: 5px;
width: 100px;
}
.furbcf input[type="submit"]:hover {
background-color: #da291c;
border: 2px solid #da291c;
border-radius: 5px;
box-sizing: border-box;
color: #ffffff;
cursor: pointer;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 15px;
font-weight: 300;
padding: 5px;
width: 100px;
}
/********************************************************************************************************************************************************Menu*/
i.fa-bars {
color: rgba(255, 255, 255, 0.8);
font-size: 20px;
margin-left: 25px;
}
i.fa-bars:hover {
color: #ffffff;
font-size: 20px;
margin-left: 25px;
}
.sidenav {
border-left: 1px solid #ccd1d4;
background-color: #ffffff;
height: 100%;
overflow-x: hidden;
padding-top: 50px;
position: fixed;
right: -1px;
top: 0;
transition: 0.5s;
width: 0;
z-index: 1;
}
.sidenav p {
color: #242527;
display: block;
font-family: Netflix Sans,Helvetica,Arial,sans-serif;
font-size: 13px;
font-weight: 400;
padding: 12px 8px 0px 32px;
text-decoration: none;
text-transform: uppercase;
transition: 0.3s;
}
.sidenav a {
color: #242527!important;
display: block!important;
font-family: Netflix Sans,Helvetica,Arial,sans-serif!important;
font-size: 13px!important;
font-weight: 400!important;
padding: 3px 8px 3px 32px!important;
text-decoration: none!important;
transition: 0.3s!important;
}
.sidenav a:hover {
color: #242527!important;
display: block!important;
font-family: Netflix Sans,Helvetica,Arial,sans-serif!important;
font-size: 13px!important;
font-weight: 400!important;
padding: 3px 8px 3px 32px!important;
text-decoration: underline!important;
transition: 0.3s!important;
}
.sidenav a img {
height: 12px;
margin-left: -0px;
margin-right: 10px;
}
.sidenav .closebtn {
color: #aaaaaa!important;
font-size: 34px!important;
margin-left: 50px!important;
position: absolute!important;
right: 23px!important;
top: 5px!important;
}
.sidenav .closebtn:hover {
color: #353748!important;
font-size: 34px!important;
margin-left: 50px!important;
position: absolute!important;
right: 23px!important;
text-decoration: none!important;
top: 5px!important;
}
<!---------------------------------------------------------------------------------------------------------------------------------------------------- Logo -->
<div class="s-header-links-left">
<div class="s-logo">
<a href="https://www.capebretoncares.com/Start/" target="_top">
<img src="https://www.capebretoncares.com/Start/images/cape-breton-cares-logo-1.png"></a>
</div>
</div>
<!-------------------------------------------------------------------------------------------------------------------------------------- Header Links Right -->
<div class="s-header-links-right">
<!------------------------------------------------------------------------------------------------------------------------------------------- Amount Raised -->
<span class="tooltip" onclick="myFunction()">
<div class="amount">$234.41</div>
<span class="tooltiptext" id="myPopup">This is how much money our community has raised to help provide meals and support to animal charities in our local communities.</span>
</span>
<!----------------------------------------------------------------------------------------------------------------------------------- Fur Baby Of The Month -->
<span class="tooltips" onclick="myFunctions()" title="Contest Winner">
<div class="furbm">
<i class="fa fa-trophy"></i>
</br>
</div>
<span class="tooltipstext" id="mypopup">Fur Baby Of The Month
</br>
<img src="https://www.capebretoncares.com/images/search-icons/duck.png">
</br>
congratulations "Fluffy"
</span>
</span>
<!--------------------------------------------------------------------------------------------------------------------------- Fur Baby Of The Month Contest -->
<span class="toolstip" onclick="myFunctionss()">
<div class="furbc">
<i class='fas fa-comments'></i>
</div>
<span class="toolstiptext" id="mYpopup">
Enter Octobers cutest Fur Baby contest and win a bag of your Fur Babies food of choice.
</br>
</br>
<form class="furbcf" method="post" action="send_contact.php" enctype="multipart/form-data">
<label for="first_name">First Name: <font color="red">*</font></label>
</br>
<input type="text" id="first_name" name="first_name" autocomplete="off" required>
</br>
</br>
<label for="last_name">Fur Babies Name: <font color="red">*</font></label>
</br>
<input type="text" id="last_name" name="last_name" autocomplete="off" required>
</br>
</br>
<label for="email">Email: <font color="red">*</font></label>
</br>
<input type="text" id="email" name="email" autocomplete="off" required>
</br>
</br>
<input type="file" name="uploaded_file"autocomplete="off" required>
</br>
</br>
<input type="submit" name="Submit" value="Submit">
</form>
</span>
</span>
<!---------------------------------------------------------------------------------------------------------------------------------------------------- Menu -->
<span style="cursor:pointer" onclick="openNav()" title="Menu">
<i class="fa fa-bars"></i>
</span>
<div id="mySidenav" class="sidenav">
×
<p>WHO WE ARE:</p>
Home
About Us
Privacy Policy
Terms of Use
<p>RESOURCES:</p>
Contact Us
FAQ
Our Donations
Spread The Word
<p>KEEP IN TOUCH:</p>
<a href="https://www.facebook.com/CapeBretonCares/" target="_top">
<img src="https://www.capebretoncares.com/images/icons/facebook.png">Facebook</a>
<a href="https://twitter.com/WeCapersCare/" target="_top">
<img src="https://www.capebretoncares.com/images/icons/twitter.png">Twitter</a>
<p>AVAILABLE ON:</p>
<a href="https://chrome.google.com/webstore/detail/cape-breton-start-page/gcjbmfbjnmkfnjgdpkamohobejbpdinb/" target="_top">
<img src="https://www.capebretoncares.com/images/available-on/brave.png">Brave</a>
<a href="https://chrome.google.com/webstore/detail/cape-breton-start-page/gcjbmfbjnmkfnjgdpkamohobejbpdinb/" target="_top">
<img src="https://www.capebretoncares.com/images/available-on/chrome.png">Google Chrome</a>
<a href="https://chrome.google.com/webstore/detail/cape-breton-start-page/gcjbmfbjnmkfnjgdpkamohobejbpdinb/" target="_top">
<img src="https://www.capebretoncares.com/images/available-on/edge.png">Microsoft Edge</a>
<a href="https://addons.mozilla.org/en-CA/firefox/addon/cape-breton-start-page/" target="_top">
<img src="https://www.capebretoncares.com/images/available-on/firefox.png">Mozilla Firefox</a>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src='https://kit.fontawesome.com/a076d05399.js'></script>

JS Function Not Defined Chrome Extension Popup.js

I am trying to add this button On Codepen to my chrome extension, my HTML and CSS work perfectly fine. The JS is popup.js and is on the same level as the rest of the code, but it doesn't seem to be linked to the popup.html. Manifest is in the image . I did convert the SCSS to CSS using an online converter. I need help linking the js to popup.html so the button works as it does in Codepen.
Html, CSS & JS:
$('button.cooldown').click(function(){
var btn = $(this);
btn.prop('disabled', true);
setTimeout(function(){
btn.prop('disabled', false);
},15000);
});
body {
background-image: linear-gradient( 72.5deg, rgba(0,175,255,1) 27.9%, rgba(0,224,254,1) 84.2% );
width: 250px;
height: 400px;
}
#header {
padding-top: 2px;
padding-bottom: 2px;
text-align: center;
background-color: #393e46;
color: white;
font-size: 15px;
border-radius: 10px;
}
.button {
background-color: rgb(80, 220, 100);
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 50px;
margin: 5px;
}
.button:hover {
background-color: #393e46;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 50px;
margin: 5px;
}
.button_cancel {
background-color: #f44444;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 50px;
margin: 5px;
}
.button_cancel:hover {
background-color: #393e46;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 50px;
margin: 5px;
}
/* The container */
.container {
display: block;
position: relative;
padding-left: 10px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
font-size: 18px;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=file], select {
padding-left: 15%;
}
.form-item {
padding-top: 2px;
padding-bottom: 2px;
text-align: center;
}
.wallpaper-title {
display: block;
padding-bottom: 3px;
font-size: 11px;
}
button.cooldown {
background: #336699;
min-height: 48px;
min-width: 144px;
position: relative;
margin: 5px;
border-radius: 5px;
border: 0;
color: #fff;
padding: 0 15px;
font-size: 16px;
outline: none;
overflow: hidden;
cursor: pointer;
}
button.cooldown:active, button.cooldown:focus {
outline: none;
}
button.cooldown:disabled {
background: #264d73;
color: #d9d9d9;
cursor: default;
box-shadow: inset 3px 3px 10px 0px rgba(0, 0, 0, 0.2);
}
button.cooldown:disabled:after {
content: '';
position: absolute;
bottom: 0;
width: 100%;
left: 0;
height: 5px;
background: #1a334d;
animation: cooldown 15s linear;
}
#keyframes cooldown {
0% {
width: 100%;
}
100% {
width: 0;
}
}
/* layout stuff */
section {
text-align: center;
margin-top: 100px;
color: #333;
}
p {
font-size: 12px;
}
<!doctype html>
<html>
<head>
<title>Home+</title>
<link rel="stylesheet" type="text/css" href="popup.css">
<script src="popup.js"></script>
<div id="header">
<h2>Home+</h2>
<h6>Settings</h6>
</div>
</head>
<body>
<!-- The settings pane, expand at will -->
<div class="tab-pane" id="settings">
<form class="settings">
<div class="form-item">
<label for="zip">Zip Code: </label>
<div class="form-item">
<input id="zip" name="zip" type="text" pattern="[0-9]*">
</div>
</div>
<div class="form-item">
<label class="container">Show Weather
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
<div class="form-item">
<button class="cooldown">Refresh Weather</button>
</div>
<div class="form-item">
<label for="hompagebg" class="wallpaper-title">Upload Wallpaper</label>
<center>
<input type="file" id="hompage-background" name="hompagebg" accept="image/png, image/jpeg" size="20">
</center>
</div>
<div class="form-item">
<button type="button" class="button">Save</button>
<button type="button" class="button_cancel">Cancel</button>
</div>
</form>
</div>
</div>
</body>
</html>

I needed to download jquery and link it to popup.html using and my JS code needed to be placed inside
$(document).ready(function () {
//code goes here
});

How to reset a placeholder whenever you exit a search box event?

I've got an overlay search box (check code). The search box got a placeholder "Sök", let's say the user writes something in the textbox but then exits (presses the x in the right upper corner). Then I want the text that the user wrote to be removed and the placeholder reset, so whenever the user enters the search box again the text is removed and the placeholder is back. How do I create this event?
Code:
body{
background: white;
font-family: 'Montserrat', sans-serif;
padding-bottom: -1px;
}
span{
display: inline-block;
}
.backgroundlogo{
margin-top:-1400px;
z-index: -1;
position: relative;
width: 100%;
}
.container{
width: 80%;
margin: 0 auto;
}
header{
background: none;
}
* {
margin:0;
padding:0;
}
header ::after {
content: "";
display: table;
clear: both;
}
nav{
float: right;
padding-right: 230px;
}
nav li{
display: inline-block;
padding-left: 45px;
padding-top: 20px;
padding-bottom: 20px;
}
nav ul{
list-style: none;
display: inline-block;
padding-top: 25px;
}
nav a {
font-size: 12px;
color: black;
font-weight: 600;
text-decoration: none;
text-align: center;
text-transform: uppercase;
}
nav a:hover{
color: red;
}
nav li:hover{
}
.fa-bars{
color: black;
font-size: 14px;
padding-left: 15px;
}
.fa-bars:hover{
color: red;
cursor: pointer;
}
.wrapper{
position: relative;
height: 100%;
width: 100%;
}
.backgroundlogo{
}
.bild1{
height: 350px;
width: 600px;
margin-top: 100px;
margin-left: 80px;
position: absolute;
z-index: 4;
background-image: url('Img/KBA.jpg');
background-position: 10% 30% ;
background-size: 180%;
}
.bild2{
height: 350px;
width: 600px;
margin-top: 140px;
margin-left: 120px;
z-index: 3;
position:absolute;
background-color: #3D6BB8;
}
.entrytext{
float: right;
margin-right: 90px;
margin-top: 175px;
clear: both;
}
.entrytext>h1{
font-weight: 800;
font-style: normal;
font-size: 54px;
}
.entrytext>button{
border: none;
display: inline-block;
background-color: #38b272;
color: white;
padding: 8px 10px 8px 15px;
letter-spacing: 6px;
border-radius: 8px;
font-weight: 500;
font-size: 17px;
text-align: left;
margin-top: 20px;
box-shadow: 20px 15px black;
}
.entrytext>button:hover{
border: none;
display: inline-block;
background-color: #c12147;
color: white;
padding: 8px 10px 8px 15px;
letter-spacing: 6px;
border-radius: 8px;
font-weight: 500;
font-size: 17px;
text-align: left;
margin-top: 20px;
}
button:focus {outline:0;}
.fa-angle-right{
font-size: 20px;
padding-left: 30px;
}
.entrytext>h2{
font-size: 14px;
font-weight: 600;
margin-top: 20px;
}
.citygalleria{
color: #CC2244;
}
.brand{
height: 110px;
width: 750px;
margin: 600px auto;
background-color: #CFCFCF;
clear: both;
z-index: 11;
}
.openBtn {
background: #f1f1f1;
border: none;
padding: 10px 15px;
font-size: 20px;
cursor: pointer;
}
.openBtn:hover {
background: #bbb;
}
.overlay {
height: 100%;
width: 100%;
display: none;
position: fixed;
z-index: 10;
top: 0;
left: 0;
background-color: white;
background-color: rgba(255,255,255, 0.8);
}
.overlay-content {
position: relative;
top: 20%;
width: 80%;
text-align: center;
margin-top: 30px;
margin: auto;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
cursor: pointer;
color: black;
}
.overlay .closebtn:hover {
color: #ccc;
}
.overlay input[type=text] {
padding: 15px;
font-size: 50px;
font-weight: bold;
border: none;
background:none;
margin: 0 auto;
text-decoration: none;
border-bottom: 6px solid black;
border-bottom-left-radius: 5px;
color:black;
text-align:center;
width: 100%;
}
input::placeholder {
color: black;
}
.overlay input[type=text]:hover {
background: none;
}
.overlay button {
float: left;
width: 20%;
padding: 15px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
input:focus {outline:0;}
.overlay button:hover {
background: #bbb;
}
.type1{
width: 1700px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<meta charset="utf-8">
<script src="https://kit.fontawesome.com/908c2e5c96.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<title>Kungsmässan — Måste upplevas!</title>
</head>
<body>
<header>
<div class="container">
<nav>
<ul>
<li>Butiker</li>
<li>Resturang & Café</li>
<li>Utbyggnad</li>
<li>Öppetider</li>
<div id="myOverlay" class="overlay">
<span class="closebtn" onclick="closeSearch()" title="Close Overlay">×</span>
<div class="overlay-content">
<form action="/action_page.php">
<input class="type1" id="type2" onblur="this.placeholder = 'Sök'" onfocus="this.placeholder = ''" type="text" placeholder="Sök" name="search">
</form>
</div>
</div>
<i onclick="openSearch()" id="openBtn" class="fas fa-search"></i>
<script>
function openSearch() {
document.getElementById("myOverlay").style.display = "block";
}
document.addEventListener('keydown',function(){document.getElementById('type2').focus();});
function closeSearch() {
document.getElementById("myOverlay").style.display = "none";
}
</script>
<i class="fas fa-bars"></i>
</ul>
</nav>
</div>
</header>
<div class="bild1">
</div>
<div class="bild2">
</div>
<div class="entrytext">
<h1>Sveriges bästa <br/> <span class="citygalleria">citygalleria.</span> Mitt <br/> i Kungsbacka.</h1>
<h2>35 000 KVADRATMETER OCH ÖVER 100 AFFÄRER!</h2>
<button type="LÄS MER" name="button ">LÄS MER<i class="fas fa-angle-right"></i></button>
</div>
<div class="brand">
</div>
<span>
<img class="backgroundlogo" src="Img/bg.png" alt="">
</span>
</body>
</html>

If you set the value of the input back to nothing when the closing button is clicked, the placeholder should appear again:
const button = document.querySelector( 'button' );
const input = document.querySelector( 'input' );
button.addEventListener( 'click', event => {
input.value = '';
});
<input type="text" placeholder="Sok">
<button>Close</button>

Try with setValue('') method to reset any element value.

how to fix this overlapping issue of select-box options and toggle-buttons

company.html
<section class="main">
<h1>Company Management</h1>
<md-card>
<button class="md-fab md-mini add-task" md-mini-fab title="Add" (click)="addCompany.show()">
<md-icon style="color:white;">add</md-icon>
</button>
<div class="table-responsive">
<table class="table adminTable">
<thead>
<th>Name</th>
<th>Email</th>
<th>country</th>
<th>Action</th>
</thead>
<tbody>
<tr *ngFor="let company of companies">
<td>{{company.user_name}}</td>
<td>{{company.email}}</td>
<td>{{company.country}}</td>
<td>
<button class="btn" md-raised-button>Guide</button>
<button class="btn" md-raised-button>Pin</button>
<button class="iconBtn first">
<i class="fa fa-pencil" aria-hidden="true"></i>
</button>
<button class="iconBtn second">
<i class="fa fa-trash-o" aria-hidden="true"></i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</md-card>
</section>
<div bsModal #addCompany="bs-modal" class="modal fade " tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Add Company</h4>
</div>
<div class="modal-body row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<md-input-container class="mat-input-container ng-pristine ng-valid ng-touched">
<input type="text" class="ng-pristine ng-valid mat-input-element ng-touched" id="md-input-33" aria-describedby="" mdInput name="email" pattern="^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$" placeholder="E-mail" [(ngModel)]="email" required>
<div class="mat-input-underline"><span class="mat-input-ripple"></span></div>
</md-input-container>
<md-input-container class="mat-input-container ng-pristine ng-valid ng-touched">
<input type="password" class="ng-pristine ng-valid mat-input-element ng-touched" id="md-input-33" aria-describedby="" mdInput name="password" placeholder="Password" [(ngModel)]="password" required>
<div class="mat-input-underline"><span class="mat-input-ripple"></span></div>
</md-input-container>
<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1">
<mat-slide-toggle class="mat-slide-toggle ng-valid ng-dirty ng-touched"> Active </mat-slide-toggle>
</div>
<md-input-container class="mat-input-container ng-pristine ng-valid ng-touched">
<input type="text" class="ng-pristine ng-valid mat-input-element ng-touched" id="md-input-33" aria-describedby="" mdInput name="username" placeholder="User name" [(ngModel)]="username" required>
<div class="mat-input-underline"><span class="mat-input-ripple"></span></div>
</md-input-container>
<md-input-container class="mat-input-container ng-pristine ng-valid ng-touched">
<input type="text" class="ng-pristine ng-valid mat-input-element ng-touched" id="md-input-33" aria-describedby="" mdInput name="country" placeholder="Country" [(ngModel)]="country" required>
<div class="mat-input-underline"><span class="mat-input-ripple"></span></div>
</md-input-container>
<div class="form-group">
<label class="mat-input-container ng-pristine ng-valid ng-touched"> Membership* </label>
<ng-select [options]="status" name="option" [(ngModel)]="option" class="filterDropDown"></ng-select>
</div>
<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1">
<mat-slide-toggle class="mat-slide-toggle ng-valid ng-dirty ng-touched">Is notification on</mat-slide-toggle>
<mat-slide-toggle class="mat-slide-toggle ng-valid ng-dirty ng-touched">Is GPS on</mat-slide-toggle>
</div>
</div>
</div>
<div class="modal-footer cat-btn">
<button md-raised-button class="md-raised cancel color-white" (click)="addCompany.hide()">Cancel</button>
<button md-raised-button class="md-raised save color-white">Save</button>
</div>
</div>
</div>
</div>
styles.css
.row {
margin: 0px !important;
}
ul li {
list-style-type: none;
}
.loginMainDiv {
position: fixed;
height: 100%;
width: 100%;
background: #55595c;
top: 0px;
z-index: 9999999999999;
}
.btn-info.disabled,
.btn-info:disabled {
background-color: #17a2b8;
border-color: #17a2b8;
cursor: no-drop;
}
.loginpageForm {
margin: 100px auto auto auto;
width: 370px;
height: auto;
background-color: white;
padding: 60px 15px 70px 15px;
}
.loginpageForm h2 {
font-family: 'Roboto', sans-serif;
color: #b7b7b7;
text-align: center;
font-size: 20px;
line-height: 25px;
margin-bottom: 45px;
}
.loginpageForm .form-group {
margin-bottom: 25px;
}
.loginbtn {
margin-top: 35px;
}
.loginbtn button {
cursor: pointer;
width: 92%;
margin: auto;
margin-left: 4%;
font-family: Tahoma;
font-size: 18px;
transition: all 0.4s linear;
height: 45px;
margin-top: 0px;
margin-bottom: 15px;
}
.loginbtn button:hover {
background-color: floralwhite;
color: #00b8e6;
transition: all 0.4s linear;
transform: translateY(-0.20em);
}
p.forgetpwd {
font-size: 16px;
margin: auto;
text-align: right;
font-family: Arial;
letter-spacing: 0.7px;
margin-right: 16px;
color: #b7b7b7;
}
.loginpageForm input {
color: #b7b7b7;
}
.forgetpwd a {
cursor: pointer;
color: #0275d8 !important;
}
.forgetpwd a:hover {
color: #014c8c !important;
text-decoration: underline !important;
}
.error {
padding-left: 8px !important;
margin-top: -20px;
margin-bottom: 10px;
color: red;
}
button.navbar-toggle {
border: 0px;
background: none;
cursor: pointer;
outline: none !important;
padding: 0px;
}
header {
background-color: #55595c;
padding: 20px 15px;
position: fixed;
width: 100%;
top: 0px;
z-index: 99999;
}
.admin {
text-align: right;
}
.admin span {
color: white;
font-family: 'Roboto', sans-serif;
font-size: 22px;
letter-spacing: 0.8px;
position: fixed;
top: 0px;
padding-top: 20px;
right: 20px;
padding-bottom: 10px;
padding-left: 25px;
padding-right: 25px;
cursor: pointer;
}
.admin span:hover {
color: #55595c;
background-color: white;
box-shadow: 0px 2px 3px rgba(0, 0, 0, .2);
}
.admin span img {
margin-left: 15px;
}
header img {
border-radius: 100%;
width: 50px;
min-height: 50px;
}
.col-xs-6 {
max-width: 50%;
}
.logoutDiv {
color: white;
font-family: 'Roboto', sans-serif;
font-size: 20px;
letter-spacing: 0.8px;
position: fixed;
margin-top: 10px;
padding-top: 25px;
right: 20px;
padding-bottom: 15px;
padding-left: 43px;
padding-right: 35px;
display: none;
background-color: white;
box-shadow: 0px 2px 3px rgba(0, 0, 0, .2);
}
.logoutDiv i {
margin-right: 20px;
color: #7e8890;
font-size: 18px;
}
.logoutDiv h4:hover {
color: #64bbfb;
}
.logoutDiv h4:hover i {
color: #64bbfb;
}
.admin span:hover .logoutDiv {
display: block;
color: #55595c;
}
.navigation {
width: 100%;
background-color: #676a6d;
height: 75px;
margin-top: -16px;
padding: 0 7.4%;
margin-top: 90px;
0 3px 1px -2px rgba(0, 0, 0, .2),
0 2px 2px 0 rgba(0, 0, 0, .14),
0 1px 5px 0 rgba(0, 0, 0, .12)
}
.navigation ul {
padding: 0px;
}
.navigation ul li {
float: left;
height: 75px;
display: block;
padding: 22px 35px;
font-size: 20px;
font-family: 'Roboto', sans-serif;
color: white;
letter-spacing: 0.5px;
cursor: pointer;
transition: all 0.3s ease-in;
outline: none !important
}
li.activeTab {
background-color: rgb(248, 248, 248);
color: #4d87c5 !important;
cursor: context-menu !important;
}
.navigation ul li:hover {
background-color: rgb(248, 248, 248);
color: #4d87c5;
}
footer {
bottom: 0px;
width: 100%;
background-color: #55595c;
padding: 30px 0;
}
.no-padding {
padding: 0 !important;
}
.padingClass {
padding: 0 7.4%;
}
footer p,
footer p a {
font-family: 'Roboto', sans-serif;
font-weight: 400;
color: #ecf0f1;
font-size: 18px;
text-decoration: none;
margin: 6px 0 0;
transition: all 0.3s linear;
}
footer p a:hover,
footer p a:active,
footer p a:focus {
color: darkgray
}
.back-fa {
background: #fff;
border-radius: 30px;
}
.social-bar li {
float: left;
margin: 5px 10px;
}
.social-bar li a {
color: #434343;
-webkit-transition: all 300ms linear 0s;
transition: all 300ms linear 0s;
}
.social-bar li a:hover {
color: #4d88c6;
}
.main h1 {
margin-top: 10px;
font-family: 'Roboto', sans-serif;
font-size: 30px;
color: #55595c;
margin-bottom: 40px;
}
section.main {
padding: 30px 7.4%;
}
.add-task {
position: absolute !important;
float: right;
right: 2%;
top: -22px;
overflow: hidden;
background-color: #58B6A2 !important;
outline: none !important;
width: 50px !important;
height: 50px !important;
}
.add-task md-icon {
font-size: 28px;
line-height: 33px !important;
height: 32px;
width: 32px;
}
.add-task:hover {
background-color: #367c6d !important;
}
md-card {
padding: 50px 0px !important;
background: white;
}
.md-content {
padding-bottom: 0px;
font-family: 'roboto', sans-serif;
color: #727272;
text-align: center;
white-space: nowrap;
}
.title {
text-align: center;
}
.title span {
font-family: 'Roboto', sans-serif;
font-size: 22px;
color: #727272;
letter-spacing: 0.5px;
}
.content span {
color: #727272;
cursor: pointer;
font-size: 16px;
}
.content span:hover {
color: #333;
}
.iconBtn {
background: none;
border: 0px;
padding: 0px;
outline: none !important;
margin-right: 10px;
}
.iconBtn i {
color: #727272;
cursor: pointer;
font-size: 18px;
}
.iconBtn i:hover {
color: #333;
}
.cat-img {
width: 75px;
height: 60px;
}
.adminTable th {
border-top: 0px !important;
text-align: center;
font-family: 'Roboto', sans-serif;
color: #727272;
}
.adminTable td {
text-align: center;
font-family: 'Roboto', sans-serif;
color: #727272;
}
.box {
margin-bottom: 25px;
width: 200px;
height: 40px;
color: #727272;
padding: 5px;
cursor: pointer;
outline: none !important
}
.page {
float: right;
margin-right: 5%;
cursor: pointer;
font-size: 22px;
}
.page .current {
cursor: pointer !important;
background: #58B6A2 !important;
}
.page a:hover,
.page button:hover {
background: none !important;
text-decoration: none !important;
}
.page .disabled {
cursor: no-drop !important;
}
.page a::after,
.page .disabled::after,
.page a::before,
.page .disabled::before {
content: none !important;
}
li.pagination-next,
li.pagination-previous {
font-size: 43px;
position: relative;
top: 7px;
}
td .btn {
color: white;
margin-right: 5px;
margin-bottom: 10px;
background-color: #58B6A2 ;
}
td .btn:hover {
background-color: #367c6d ;
}
.modal {
z-index: 999999999 !important;
top: 30px !important;
box-shadow: 1px 2px 5px #000000;
}
.modal.fade.in {
opacity: 1;
background-color: rgba(0, 0, 0, 0.6);
}
.modal-content {
border-radius: 6px !important;
margin: 180px auto auto auto !important;
}
.modal-header {
background-color: #58B6A2 ;
color: white;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.modal-title {
margin:auto;
}
.modal-body {
padding: 30px 40px 15px 40px !important;
}
.form-group {
margin-top: 15px;
}
.filterDropDown {
margin-bottom: 20px;
}
.mat-input-container {
width: 100%;
color: #727272 !important;
}
.mat-input-underline .mat-input-ripple.mat-focused {
background-color: #58B6A2 !important;
}
.mat-input-placeholder:not(.mat-empty),
.mat-input-placeholder.mat-focused {
color: #58B6A2 !important;
font-weight: 700 !important;
padding-left: 8px;
}
.toggleClass md-slide-toggle {
float: right;
margin: auto 40px auto auto;
}
.mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
background-color: #58B6A2 !important;
opacity: 0.4;
cursor:pointer;
}
.mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
background-color: #58B6A2 !important;
}
.mat-slide-toggle-thumb {
cursor: pointer;
background-color: white;
overflow: hidden;
}
.mat-slide-toggle-bar {
background-color: gray;
}
.mat-slide-toggle-container {
cursor: pointer !important;
overflow: hidden;
}
.mat-slide-toggle-input {
margin-left: -15px;
}
.cat-btn .cancel {
color: white;
background-color: #FF5252;
outline: none !important;
}
.cat-btn .save {
color: white;
outline: none !important;
cursor: no-drop;
}
.cat-btn .cancel:hover , .cat-btn .save:hover {
box-shadow: 5px 5px 5px grey;
}
company.component.ts
import { Component } from '#angular/core';
import { Router } from '#angular/router';
#Component({
templateUrl: './company.html'
})
export class CompanyComponent {
companies = [{"user_name":"company1","email":"test#test.com","country":"India"},
{"user_name":"company2","email":"test1#test.com","country":"India"},
{"user_name":"company3","email":"test2#test.com","country":"India"},
{"user_name":"company4","email":"test3#test.com","country":"India"},
{"user_name":"company5","email":"test4#test.com","country":"India"},
];
status = [{ label: 'Free' }, { label: 'Premium'}];
}
how to fix this overlapping issue of select-box options and toggle-buttons
here,
in the output when i click-on select-box(membership) its also displaying the toggle buttons over the options of the select-box
in simple they(select-box options and toggle buttons) are overlapping
help me in fixing this problem

Categories