I'm trying to add a text search field that will filter content. The code I have, however, will filter out literally anything that doesn't match, including parts of the <div> I want to include.
In other words, I want to have a text search that will search throughout the headers/titles of a series of <div>'s and then return the entire content of that <div> based on the title.
<input id="ddInput" type="text" placeholder="Search...">
<div class="grpContainer">
<div class="ddCard">
<div class="ddCardHeader">
<h3>Header/Title</h3>
</div>
<div class="ddCardContent">
<p>This is the content.</p>
<div class="ddMoreInfo">
More Info
</div>
<div class="ddCardFooter">
<p>Footer content</p>
</div>
</div>
</div>
$(document).ready(function() {
$("#ddInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$(".grpContainer *").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
Check out my fiddle: https://codepen.io/anon/pen/zQVreM
In the fiddle, try searching for "header" to see what happens. What I'd like to happen, is that the entire card is shown.
You don't need to use both toggle and filter.
You could hide all of the cards, filter out the ones that match, and show those only.
var $cards = $(".grpContainer .ddCard");
$cards
.hide()
.filter(function() { return $(this).text().toLowerCase().indexOf(value) > -1 })
.show();
$("#ddInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
var $cards = $(".grpContainer .ddCard");
$cards
.hide()
.filter(function() { return $(this).text().toLowerCase().indexOf(value) > -1 })
.show();
});
html {
scroll-behavior: smooth;
}
.now-content ul li:before {
background-image: none;
}
.pageFooter {
width: 100%;
background-color: #000;
}
.ddPageWrap {
min-height: 750px;
}
.grpContainer {
width: 95%;
margin: 20px auto 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.ddCard {
display: flex;
width: 100%;
box-sizing: border-box;
flex-direction: column;
flex: 0 0 100%;
margin: 1rem auto;
border: 1px solid #323232;
}
.ddCardHeader {
display: flex;
flex-direction: column;
margin-bottom: auto;
align-self: flex-start;
padding: .5em;
}
.ddCardFooter {
margin-top: auto;
display: block;
padding: .5em;
border-top: .5px solid #ccc;
}
.ddCardFooter p {
color: #626262;
font-size: 15px;
}
.fa-ul {
padding-left: 0 !important;
margin-left: 1em !important;
}
.fa-ul li {
color: #626262 !important;
font-size: 15px !important;
margin-bottom: 0 !important;
margin-top: 0 !important;
}
.ddCardContent {
padding: .5em;
}
.ddMoreInfo {
display: inline-block;
padding: 10px;
background-color: #0052e7;
margin-bottom: 10px;
border-radius: 5%;
border: 1px solid #0052e7;
cursor: pointer;
}
.ddMoreInfo a {
color: #fff;
text-decoration: none;
font-weight: bold;
font-size: 16px;
}
.ddMoreInfo:hover {
background-color: #fff;
transition: .1s ease;
border: 1px solid #0052e7;
}
.ddMoreInfo:hover a {
color: #0052e7;
}
.ddBtn {
display: inline-block;
border: none;
outline: none;
padding: 12px 16px;
margin: 0.4em auto;
background-color: #f1f1f1;
cursor: pointer;
transition: all 0.2s;
}
.ddBtn:hover {
background-color: #ddd;
}
.ddBtn.active {
background-color: #666;
color: white;
}
#media all and (max-width: 800px) {
.ddBtn {
display: block;
margin: 0.4em auto;
width: 100%;
}
}
.ddToolTip {
position: relative;
display: inline-block;
border-bottom: 1px dotted #0052e7;
cursor: pointer;
width: auto;
}
.ddToolTip .ddToolTipText {
visibility: hidden;
min-width: 240px;
background-color: black;
color: #fff;
border-radius: 5%;
left: 50%;
padding: 5px 10px;
position: absolute;
z-index: 1;
bottom: 125%;
margin-left: -60px;
opacity: 0;
transition: opacity 1s;
line-height: 1.2;
font-size: 13px;
}
.ddToolTip .ddToolTipText::after {
content: "";
position: absolute;
top: 100%;
left: 30%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
.ddToolTip:hover .ddToolTipText {
visibility: visible;
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="ddInput" type="text" placeholder="Search...">
<div class="grpContainer">
<div class="ddCard">
<div class="ddCardHeader">
<h3>Header/Title</h3>
</div>
<div class="ddCardContent">
<p>This is the content.</p>
<div class="ddMoreInfo">
More Info
</div>
<div class="ddCardFooter">
<p>Footer content</p>
</div>
</div>
</div>
<div class="ddCard">
<div class="ddCardHeader">
<h3>Other Card</h3>
</div>
<div class="ddCardContent">
<p>More stuff</p>
<div class="ddMoreInfo">
Other info
</div>
<div class="ddCardFooter">
<p>Footer</p>
</div>
</div>
</div>
</div>
Here is an updated version of your script:
$(document).ready(function() {
$("#ddInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$(".grpContainer .ddCard").each(function() {
$(this).toggle(this.innerText.toLowerCase().indexOf(value) > -1)
});
});
});
It uses each instead of filter
It looks in the whole card for a matching text
It uses the innerText property to look for a match
Related
I have no code to show yet because I have no idea how to do that... my question is: How do I make the text scroll continously i.e., as soon the line 9 is getting up, rather show the blank space, show the contents of line 1 and so on, so there's no empty space. I supposed to do that with JS, I guess but I don't know how to get those offsets or show the contents from top right after the bottom lines is moving up... my current code goes like this:
#jobs_container {
background: transparent;
width: 600px;
height: 300px;
border: 3px solid #e4e4e4;
border-radius: 12px;
border-style: dashed;
padding: 1px;
font-size: 12px;
}
#jobs_header {
display: flex;
justify-content: space-between;
height: 25px;
background-color: #e4e4e4;
border-radius: 12px 12px 0 0;
padding: 1rem;
}
#jobs_header_left {
display: flex;
align-items: center;
}
#jobs_header_left > span {
padding-right: 4px;
cursor: pointer;
color: #0048FF;
}
#jobs_header_center {
text-align: center;
font: 20px Verdana;
color: darkblue;
}
#jobs_header_right {
display: flex;
align-items: center;
}
#jobs_today {
margin-inline: 5px;
cursor: pointer;
color: #0048FF;
}
#jobs_nextButton {
background: transparent;
border: none;
padding: 0px 3px;
cursor: pointer;
}
#jobs_prevButton {
background: transparent;
border: none;
transform: scaleX(-1);
padding: 0px 3px;
cursor: pointer;
}
#jobs_content {
font-style: calibre;
margin-left: 10px;
margin-top: 10px;
position: relative;
overflow-x: scroll;
max-height: 300px;
text-align: justify;
}
#jobs_content #jobs_listOfEvents {
overflow: hidden;
animation-name: jobs_agendaSlide;
animation-duration: 25s;
animation-iteration-count: infinite;
animation-timing-function: linear;
position: relative;
}
#jobs_listOfEvents:hover {
animation-play-state: paused;
}
#keyframes jobs_agendaSlide {
from {
top: 10px;
}
to {
top: -200px;
}
}
<div id="jobs_container">
<div id="jobs_header">
<div id="jobs_header_left">
</div>
<div id="jobs_header_center">
Center text
</div>
<div id="jobs_header_right">
</div>
</div>
<div id="jobs_content">
<div id="jobs_listOfEvents">
line1<hr>
line2<hr>
line3<hr>
line4<hr>
line5<hr>
line6<hr>
line7<hr>
line8<hr>
line9<hr>
</div>
</div>
</div>
So when i click "chat with us", the full chat box must appear but it doesn't. The console announces mistake as:'Uncaught TypeError: Cannot read property 'style' of null
at HTMLButtonElement. '
Anything wrong with my codes? somebody can help me? Thank you so much!
This is my html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Snake</title>
<link rel="stylesheet" href="chat.css">
<script src="https://kit.fontawesome.com/48a972c999.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="chat-bar-collapsible">
<button id="chat-bar-button" type="button" class="collapsible">Chat With Us!
<i id="chat-icon" style="color: #fff;" class="fas fa-fw fa-comment-o"></i>
</button>
</div>
<div class="content">
<div class="full-chat-block">
<!--Mesage Container-->
<div class="outer-container">
<div class="container">
<!--Messages-->
<div id="chatbox">
<h5 id="chat-timestamp"></h5>
<p id="botStarterMessages " class="botText"><span>loading...</span></p>
</div>
<!--User Input Box-->
<div class="chat-bar-input-block">
<div id="user-input">
<input type="text" id="textInput" class="input-box" placeholder="Tap 'enter' to send a mesage" />
<p></p>
</div>
<div class="chat-bar-icons">
</div>
</div>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
</html>
This is my css:
.chat-bar-collapsible {
position: fixed;
bottom: 0;
right: 50px;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.collapsible {
background-color: rgb(82, 151, 255);
color: white;
cursor: pointer;
padding: 18px;
width: 350px;
text-align: left;
outline: none;
font-size: 18px;
border-radius: 10px 10px 0px 0px;
border: 3px solid white;
border-bottom: none;
}
.content {
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}
.full-chat-block {
width: 350px;
background: white;
text-align: center;
overflow: auto;
scrollbar-width: none;
height: max-content;
transition: max-height 0.2s ease-out;
}
.outer-container {
min-height: 500px;
bottom: 0%;
position: relative;
}
.chat-container {
max-height: 500px;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
scroll-behavior: smooth;
hyphens: auto;
}
.chat-container::-webkit-scrollbar {
display: none;
}
.chat-bar-input-block {
display: flex;
float: left;
box-sizing: border-box;
justify-content: space-between;
width: 100%;
align-items: center;
background-color: rgb(235, 235, 235);
border-radius: 10px 10px 0px 0px;
padding: 10px 0px 10px 10px;
}
.chat-bar-icons {
display: flex;
justify-content: space-evenly;
box-sizing: border-box;
width: 25%;
float: right;
font-size: 20px;
}
#chat-icon:hover {
opacity: .7;
}
/* Chat bubbles */
#userInput {
width: 75%;
}
.input-box {
float: left;
border: none;
box-sizing: border-box;
width: 100%;
border-radius: 10px;
padding: 10px;
font-size: 16px;
color: #000;
background-color: white;
outline: none
}
.userText {
color: white;
font-family: Helvetica;
font-size: 16px;
font-weight: normal;
text-align: right;
clear: both;
}
.userText span {
line-height: 1.5em;
display: inline-block;
background: #5ca6fa;
padding: 10px;
border-radius: 8px;
border-bottom-right-radius: 2px;
max-width: 80%;
margin-right: 10px;
animation: floatup .5s forwards
}
.botText {
color: #000;
font-family: Helvetica;
font-weight: normal;
font-size: 16px;
text-align: left;
}
.botText span {
line-height: 1.5em;
display: inline-block;
background: #e0e0e0;
padding: 10px;
border-radius: 8px;
border-bottom-left-radius: 2px;
max-width: 80%;
margin-left: 10px;
animation: floatup .5s forwards
}
#keyframes floatup {
from {
transform: translateY(14px);
opacity: .0;
}
to {
transform: translateY(0px);
opacity: 1;
}
}
#media screen and (max-width:600px) {
.full-chat-block {
width: 100%;
border-radius: 0px;
}
.chat-bar-collapsible {
position: fixed;
bottom: 0;
right: 0;
width: 100%;
}
.collapsible {
width: 100%;
border: 0px;
border-top: 3px solid white;
border-radius: 0px;
}
}
This is my JS:
var coll = document.getElementsByClassName('collapsible')
for (let i = 0; i < coll.length; i++) {
coll[i].addEventListener('click', function() {
this.classList.toggle('active')
var content = this.nextElementSibling
if (content.style.maxHeight) {
content.style.maxHeight = null
} else {
content.style.maxHeight = content.scrollHeight + "px"
}
})
}
Using .nextSibling will look directly for the next child element under your parent div. Since this refers to your button inside of chat-bar-collapsible there are no more child elements that are adjacent to your button element under the char-bar-collapsible div. You need to walk up to the parent element using .parentNode, and then access the adjacent content div from that using .nextElementSibling:
var content = this.parentNode.nextElementSibling;
var coll = document.getElementsByClassName('collapsible');
for (let i = 0; i < coll.length; i++) {
coll[i].addEventListener('click', function() {
this.classList.toggle('active');
var content = this.parentNode.nextElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight = null
} else {
content.style.maxHeight = content.scrollHeight + "px"
}
})
}
.chat-bar-collapsible {
position: fixed;
bottom: 0;
right: 50px;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.collapsible {
background-color: rgb(82, 151, 255);
color: white;
cursor: pointer;
padding: 18px;
width: 350px;
text-align: left;
outline: none;
font-size: 18px;
border-radius: 10px 10px 0px 0px;
border: 3px solid white;
border-bottom: none;
}
.content {
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}
.full-chat-block {
width: 350px;
background: white;
text-align: center;
overflow: auto;
scrollbar-width: none;
height: max-content;
transition: max-height 0.2s ease-out;
}
.outer-container {
min-height: 500px;
bottom: 0%;
position: relative;
}
.chat-container {
max-height: 500px;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
scroll-behavior: smooth;
hyphens: auto;
}
.chat-container::-webkit-scrollbar {
display: none;
}
.chat-bar-input-block {
display: flex;
float: left;
box-sizing: border-box;
justify-content: space-between;
width: 100%;
align-items: center;
background-color: rgb(235, 235, 235);
border-radius: 10px 10px 0px 0px;
padding: 10px 0px 10px 10px;
}
.chat-bar-icons {
display: flex;
justify-content: space-evenly;
box-sizing: border-box;
width: 25%;
float: right;
font-size: 20px;
}
#chat-icon:hover {
opacity: .7;
}
/* Chat bubbles */
#userInput {
width: 75%;
}
.input-box {
float: left;
border: none;
box-sizing: border-box;
width: 100%;
border-radius: 10px;
padding: 10px;
font-size: 16px;
color: #000;
background-color: white;
outline: none
}
.userText {
color: white;
font-family: Helvetica;
font-size: 16px;
font-weight: normal;
text-align: right;
clear: both;
}
.userText span {
line-height: 1.5em;
display: inline-block;
background: #5ca6fa;
padding: 10px;
border-radius: 8px;
border-bottom-right-radius: 2px;
max-width: 80%;
margin-right: 10px;
animation: floatup .5s forwards
}
.botText {
color: #000;
font-family: Helvetica;
font-weight: normal;
font-size: 16px;
text-align: left;
}
.botText span {
line-height: 1.5em;
display: inline-block;
background: #e0e0e0;
padding: 10px;
border-radius: 8px;
border-bottom-left-radius: 2px;
max-width: 80%;
margin-left: 10px;
animation: floatup .5s forwards
}
#keyframes floatup {
from {
transform: translateY(14px);
opacity: .0;
}
to {
transform: translateY(0px);
opacity: 1;
}
}
#media screen and (max-width:600px) {
.full-chat-block {
width: 100%;
border-radius: 0px;
}
.chat-bar-collapsible {
position: fixed;
bottom: 0;
right: 0;
width: 100%;
}
.collapsible {
width: 100%;
border: 0px;
border-top: 3px solid white;
border-radius: 0px;
}
}
<script src="https://kit.fontawesome.com/48a972c999.js" crossorigin="anonymous"></script>
<div class="chat-bar-collapsible">
<button id="chat-bar-button" type="button" class="collapsible">Chat With Us!<i id="chat-icon" style="color: #fff;" class="fas fa-fw fa-comment-o"></i></button>
</div>
<div class="content">
<div class="full-chat-block">
<!--Mesage Container-->
<div class="outer-container">
<div class="container">
<!--Messages-->
<div id="chatbox">
<h5 id="chat-timestamp"></h5>
<p id="botStarterMessages " class="botText"><span>loading...</span></p>
</div>
<!--User Input Box-->
<div class="chat-bar-input-block">
<div id="user-input">
<input type="text" id="textInput" class="input-box" placeholder="Tap 'enter' to send a mesage" />
<p></p>
</div>
<div class="chat-bar-icons">
</div>
</div>
</div>
</div>
</div>
</div>
i have a div with 7 children, on hover an item changes background and text pads left from center. I've done that with CSS.
now i want when the user clicks on an item it shows another div (.wrapper) with JavaScript. if the user click again it hides the particular div.
how can i achieve this logic with JavaScript?
here is my html snippet
<div class="category">
<div class="furniture">Furniture</div>
<div class="tableware">Tableware</div>
<div class="jewellery">Jewellery</div>
<div class="shoes">Shoes</div>
<div class="water_bottles">Water Bottles</div>
<div class="clothes">Clothes</div>
<div class="textiles">Fabric Patterns</div>
</div>
<div class="upload">
<div class="wrapper">
<div class="control"><img src="back.png"></div>
<div class="content"></div>
<div class="content_desc"></div>
<div class="control"><img src="forward.png"></div>
</div>
</div>
CSS code
/*styles individual divs in the category class*/
.category > div:hover {
cursor: pointer;
transform-style: flat;
animation-delay: 0.1s;
display: flex;
border: 1px 1px 1px 1px solid;
background-color: #898488;
color: #7AC4EE;
border-left-color: yellow;
box-sizing: border-box;
}
/*class that i want to display on click*/
.wrapper {
display: none;
flex-wrap: wrap;
justify-content: space-between;
background-color: white;
box-sizing: border-box;
width: 623px;
padding: 0;
align-self: center;
height: 100%;
margin-bottom: auto;
box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.3);
}
/*the classes below are in .wrapper*/
.control {
flex: 1;
background:white;
position: relative;
}
.content {
flex: 4;
height: 92%;
width: 415px;
margin-top: 5px;
margin-bottom: 5px;
background: lightblue;
position: relative;
}
.content_desc {
flex: 2;
height: 22px;
width: 415px;
margin-top: 370px ;
margin-left: 104px;
margin-right: 98.5px;
background-color: white;
border: 0.3px solid;
position: absolute;
}
.control img {
position: absolute;
left: 50%;
top: 50%;
height: 40px;
width: 40px;
background: white;
box-sizing: border-box;
transform: translate(-50%, -50%);
}
.control img:hover {
cursor: pointer;
background-color: yellow;
transition-delay: 0.2s;
animation: 0.1s ease-in;
}
JavaScript
$(document).ready(function() {
$('.category' > div ).on('click', function(){
$('.wrapper').show();
})
});
I am not sure about the term particular div here. May be you can try with toggle(). You also have syntax error in wrapping the selector:
$(document).ready(function() {
$('.category > div').on('click', function(){
$('.wrapper').toggle();
})
});
/*styles individual divs in the category class*/
.category > div:hover {
cursor: pointer;
transform-style: flat;
animation-delay: 0.1s;
display: flex;
border: 1px 1px 1px 1px solid;
background-color: #898488;
color: #7AC4EE;
border-left-color: yellow;
box-sizing: border-box;
}
/*class that i want to display on click*/
.wrapper {
display: none;
flex-wrap: wrap;
justify-content: space-between;
background-color: white;
box-sizing: border-box;
width: 623px;
padding: 0;
align-self: center;
height: 100%;
margin-bottom: auto;
box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.3);
}
/*the classes below are in .wrapper*/
.control {
flex: 1;
background:white;
position: relative;
}
.content {
flex: 4;
height: 92%;
width: 415px;
margin-top: 5px;
margin-bottom: 5px;
background: lightblue;
position: relative;
}
.content_desc {
flex: 2;
height: 22px;
width: 415px;
margin-top: 370px ;
margin-left: 104px;
margin-right: 98.5px;
background-color: white;
border: 0.3px solid;
position: absolute;
}
.control img {
position: absolute;
left: 50%;
top: 50%;
height: 40px;
width: 40px;
background: white;
box-sizing: border-box;
transform: translate(-50%, -50%);
}
.control img:hover {
cursor: pointer;
background-color: yellow;
transition-delay: 0.2s;
animation: 0.1s ease-in;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="category">
<div class="furniture">Furniture</div>
<div class="tableware">Tableware</div>
<div class="jewellery">Jewellery</div>
<div class="shoes">Shoes</div>
<div class="water_bottles">Water Bottles</div>
<div class="clothes">Clothes</div>
<div class="textiles">Fabric Patterns</div>
</div>
<div class="upload">
<div class="wrapper">
<div class="control"><img src="back.png"></div>
<div class="content"></div>
<div class="content_desc"></div>
<div class="control"><img src="forward.png"></div>
</div>
</div>
You made a mistake in your css selector, it's not '.category' > div, it should be '.category > div'
$(document).ready(function() {
$('.category > div').on('click', function(){
$('.wrapper').toggle();
})
});
use this code
$(document).ready(function() {
$('.category>div' ).on('click', function(){
$('.wrapper').toggle();
})
});
and add this css to hide div in starting
.wrapper{
display:none
}
I am testing my navigation bar for a project and I am using basic Html/css
and i have added Jquery so that the hover effect could affect the parent element.
$(document).ready(function () {
$(".nav-level-2").hover(
function () {
$("li>a").css("background", "white");
}
);
$(".nav-level-2").mouseleave(
function () {
$("li>a").css("background", "none");
});
});
.main-nav {
background: #000;
height: 30px;
position: relative;
overflow: visible;
z-index: 2;
width: 100%;
left: 0;
cursor: default;
}
.main-nav .inner{
height: 100%;
}
.main-nav>.inner{
text-align: justify;
}
.nav-links-container {
position: static;
/* background: red; */
height: 100%;
}
.nav-links{
padding: 0 0 0 3px;
display: inline;
margin-bottom: 20px;
overflow: hidden;
/*background-color: green; */
}
li {
vertical-align: top;
padding: 5px;
display: inline-block;
/* background: blue; */
}
li>a {
color: #FFF;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 10px 9px 9px;
margin: 0 -3px;
}
li>a:hover {
background-color: white;
color:#000;
}
.nav-level-2 {
display: none;
position: absolute;
top: 30px;
left: 0;
width: 100%;
height: auto;
border-bottom: 5px solid #000;
background: red;
text-align: left;
}
.nav-level-2-container {
padding-top: 40px;
padding-bottom: 40px;
-ms-flex: 0px 1px auto;
-webkit-box-flex: 0;
-webkit-flex: 0px 1px auto;
flex: 0px 1px auto;
}
li>a:hover + .nav-level-2{
display: block;
}
.nav-level-2:hover {
display:block;
}
.row{
display: flex;
flex: 0 1 auto;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
}
.list-container {
padding: 0px;
}
.col-lg-2{
flex-basis: 16.666666667%;
max-width: 16.666666667%;
box-sizing: border-box;
display: flex;
flex: 0 1 auto;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-flex: 0;
background: red;
margin-left: 5px;
}
.main-nav>.inner .nav-level-2 .nav-level-2-container .heading {
text-transform: uppercase;
color: #000;
letter-spacing: 1px;
margin-bottom: 20px;
font-size: 14px;
margin: 0 0 20px;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<nav class="main-nav">
<div class="inner max-girdle-width">
<div class="nav-links-container">
<ul class="nav-links">
<li class="nav-whats-new"> <a class="nav-level-1" href="#">What's New</a>
<div class="nav-level-2">
<div class="nav-level-2-container row max-girdle-width">
<div class="list-container shop col-lg-2">
<h3 class="heading"> Shop by</h3>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
What I am trying to achieve is when I hover over the red block,I am trying to make parent element ('What's New') to show with color #000 and background white;
SEE THIS IMAGE <--
I know that when i hover 'What's New' it does change color to white, but when I hover over redblock for navigation, the background disappears with 'What's New' disappearing with black background.
No need for JavaScript to do what you want. I think this is what you are looking for? Basically, I am using the :hover on the parent div to change the child element's background and colour.
.nav-whats-new:hover a {
background:white;
color:black;
}
Example:
.main-nav {
background: #000;
height: 30px;
position: relative;
overflow: visible;
z-index: 2;
width: 100%;
left: 0;
cursor: default;
}
.nav-whats-new:hover a {
background:white;
color:black;
}
.main-nav .inner{
height: 100%;
}
.main-nav>.inner{
text-align: justify;
}
.nav-links-container {
position: static;
/* background: red; */
height: 100%;
}
.nav-links{
padding: 0 0 0 3px;
display: inline;
margin-bottom: 20px;
overflow: hidden;
/*background-color: green; */
}
li {
vertical-align: top;
padding: 5px;
display: inline-block;
/* background: blue; */
}
li>a {
color: #FFF;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 10px 9px 9px;
margin: 0 -3px;
}
li>a:hover {
background-color: white;
color:#000;
}
.nav-level-2 {
display: none;
position: absolute;
top: 30px;
left: 0;
width: 100%;
height: auto;
border-bottom: 5px solid #000;
background: red;
text-align: left;
}
.nav-level-2-container {
padding-top: 40px;
padding-bottom: 40px;
-ms-flex: 0px 1px auto;
-webkit-box-flex: 0;
-webkit-flex: 0px 1px auto;
flex: 0px 1px auto;
}
li>a:hover + .nav-level-2{
display: block;
}
.nav-level-2:hover {
display:block;
}
.row{
display: flex;
flex: 0 1 auto;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
}
.list-container {
padding: 0px;
}
.col-lg-2{
flex-basis: 16.666666667%;
max-width: 16.666666667%;
box-sizing: border-box;
display: flex;
flex: 0 1 auto;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-flex: 0;
background: red;
margin-left: 5px;
}
.main-nav>.inner .nav-level-2 .nav-level-2-container .heading {
text-transform: uppercase;
color: #000;
letter-spacing: 1px;
margin-bottom: 20px;
font-size: 14px;
margin: 0 0 20px;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<nav class="main-nav">
<div class="inner max-girdle-width">
<div class="nav-links-container">
<ul class="nav-links">
<li class="nav-whats-new"> <a class="nav-level-1" href="#">What's New</a>
<div class="nav-level-2">
<div class="nav-level-2-container row max-girdle-width">
<div class="list-container shop col-lg-2">
<h3 class="heading"> Shop by</h3>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
See the edited jQuery. It's what I changed. Change background none to transparent and add the color css styles.
Is this what you wanted?
$(document).ready(function () {
$(".nav-level-2").hover(
function () {
$("li>a").css("background", "white");
$("li>a").css("color", "black");
}
);
$(".nav-level-2").mouseleave(
function () {
$("li>a").css("background", "transparent");
$("li>a").css("color", "white");
}
);
});
.main-nav {
background: #000;
height: 30px;
position: relative;
overflow: visible;
z-index: 2;
width: 100%;
left: 0;
cursor: default;
}
.main-nav .inner{
height: 100%;
}
.main-nav>.inner{
text-align: justify;
}
.nav-links-container {
position: static;
/* background: red; */
height: 100%;
}
.nav-links{
padding: 0 0 0 3px;
display: inline;
margin-bottom: 20px;
overflow: hidden;
/*background-color: green; */
}
li {
vertical-align: top;
padding: 5px;
display: inline-block;
/* background: blue; */
}
li>a {
color: #FFF;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 10px 9px 9px;
margin: 0 -3px;
}
li>a:hover {
background-color: white;
color:#000;
}
.nav-level-2 {
display: none;
position: absolute;
top: 30px;
left: 0;
width: 100%;
height: auto;
border-bottom: 5px solid #000;
background: red;
text-align: left;
}
.nav-level-2-container {
padding-top: 40px;
padding-bottom: 40px;
-ms-flex: 0px 1px auto;
-webkit-box-flex: 0;
-webkit-flex: 0px 1px auto;
flex: 0px 1px auto;
}
li>a:hover + .nav-level-2{
display: block;
}
.nav-level-2:hover {
display:block;
}
.row{
display: flex;
flex: 0 1 auto;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
}
.list-container {
padding: 0px;
}
.col-lg-2{
flex-basis: 16.666666667%;
max-width: 16.666666667%;
box-sizing: border-box;
display: flex;
flex: 0 1 auto;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-flex: 0;
background: red;
margin-left: 5px;
}
.main-nav>.inner .nav-level-2 .nav-level-2-container .heading {
text-transform: uppercase;
color: #000;
letter-spacing: 1px;
margin-bottom: 20px;
font-size: 14px;
margin: 0 0 20px;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<nav class="main-nav">
<div class="inner max-girdle-width">
<div class="nav-links-container">
<ul class="nav-links">
<li class="nav-whats-new"> <a class="nav-level-1" href="#">What's New</a>
<div class="nav-level-2">
<div class="nav-level-2-container row max-girdle-width">
<div class="list-container shop col-lg-2">
<h3 class="heading"> Shop by</h3>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
This question already has answers here:
flex property not working in IE
(5 answers)
Closed 6 years ago.
My website is running well with chrome but not in IE 11.It display warning.required Cross Origin Resource Sharing (CORS).All the alignment are breaking. Not looking good.
chrom screen sort
IE 11 screensort
How can I resolve the problem.
I am getting required Cross Origin Resource Sharing (CORS) on IE 11.How can I resolve this.I am using Angular2 Please help me here is my code.
details.html
<div class="content-area">
<div class="container-fluid flex-row scrollPage">
<div class="details">
<div class="brand-prop">
<div class="title">Input</div>
<div class="brand-detail">
<!-- Audit First row start-->
<div class="detail-sec" >
<h3 class="m-heading bg-color">Input files</h3>
<!--<a [routerLink]="['/dashboard', 'drilldown', activeClient,'Expected','Received']">-->
<!--<a [routerLink]="['/dashboard', 'drilldown', activeClient]" (click)="onDrillDown(tabs = ['Expected', 'Received'])">-->
<a [routerLink]="['/dashboard', 'drilldown', activeClient,'Expected','Received']">
<!--<a (click)="onDrillDown('Expected')">-->
<div class="flex-row">
<div class="flex-col-left">
<div class="number-cont">
<h4>Expected</h4>
<span class="label">{{summaryDetail?.input?.inputFile?.expected}}</span>
<span class="dollar"></span>
</div>
<div class="chart-cont">
<div class="chart lineChart"></div>
</div>
</div>
<div class="v-spacer"></div>
<div class="flex-col-right">
<div class="number-cont">
<h4>Received</h4>
<span class="label">{{summaryDetail?.input?.inputFile?.received}}</span>
<span class="dollar"></span>
</div>
<div class="chart-cont">
<div class="chart barChart"></div>
</div>
</div>
</div>
</a>
</div>
<!--Audit First row end -->
<!---My Non Parcel -->
<div class="detail-sec">
<h3 class="m-heading">New billings</h3>
<a [routerLink]="['/dashboard', 'drilldown', activeClient,'Parcel','Non Parcel']" (click)="drillDowns('Expected')">
<div class="flex-row">
<div class="flex-col-left">
<div class="number-cont">
<h4>Parcel</h4>
<span class="label">{{summaryDetail?.input?.newBilling?.parcel}}</span>
<span class="dollar"></span>
</div>
<div class="chart-cont">
<div id="parcelSparkId" class="chart lineChart"></div>
</div>
</div>
<div class="v-spacer"></div>
<div class="flex-col-right">
<div class="number-cont">
<h4>Non Parcel</h4>
<span class="label">{{summaryDetail?.input?.newBilling?.nonParcel}}</span>
<span class="dollar"></span>
</div>
<div class="chart-cont">
<div id="nonParcelSparkId" class="chart barChart"></div>
</div>
</div>
</div>
</a>
<div class="flex-row input-align">
<div class="flex-col-left">
<div class="number-cont">
<h4>Electronic</h4>
<span class="label">{{summaryDetail?.input?.newBilling?.electronic}}</span>
<span class="dollar"></span>
</div>
<div class="chart-cont">
<div id="chartElectronic" class="chart lineChart"></div>
</div>
</div>
<div class="v-spacer"></div>
<div class="flex-col-right">
<div class="number-cont">
<h4>Manual</h4>
<span class="label">{{summaryDetail?.input?.newBilling?.manual}}</span>
<span class="dollar"></span>
</div>
<div class="chart-cont">
<div id="chartManual" class="chart barChart"></div>
</div>
</div>
</div>
</div>
<div class="extra-space"></div>
<div class="detail-sec">
<div class="errors-wpr">
<div class="err-title">
<h4>ERRORS</h4>
<a (click)="navigateTo(0)">View All</a>
</div>
<div class="err-content">
<ul>
<li class="error" *ngFor="let input of inputData | limitFirstN:limit; let i = index" [routerLink]="['/dashboard', 'errors', activeClient]" (click)="navigateTo(i,activeClient)">
<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
<span class="ellipsis">
{{input?.taskName }}
</span>
</li>
<!--<li (click)="navigateTo(0)">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh </li>
<li (click)="navigateTo(1)">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh</li>
<li (click)="navigateTo(2)">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh</li>-->
</ul>
</div>
</div>
</div>
</div>
</div><!--- /In Progress --->
</div>
</div>
details.css
.main-container{
padding: 0px;
}
.top-items-list{
padding-left: 20px;
float: left;
max-width: calc(100% - 20px);
margin-bottom: 30px;
}
.top-items-list > .logo
{
padding-top: 10px;
float: left;
width: 10%;
}
.top-items-list .data-list {
float: left;
}
.top-items-list .data-list .item {
float: left;
border-right: thin solid #DDDDDD;
position: relative;
min-width: 160px;
}
.top-items-list .data-list .item:last-child {
border-right: none;
}
.top-items-list .data-list .item .input {
font-size: 24px;
}
.top-items-list .data-list .item .input span {
font-size: 15px;
color: #878787;
}
.top-items-list .data-list .item .count {
background-color: #ee242c;
border-radius: 18px;
color: #fff !important;
float: right;
font-size: 11px !important;
height: 22px;
line-height: 22px;
text-align: center;
width: 22px;
display: block;
padding-bottom: 5px;
position: absolute;
right: 10px;
}
.content-area{ padding-top:20px;}
.content-area-full .container{ width:100%;}
.content{background-color:#fff; border-radius:3px; display:table; width:100%;}
.content-part, .more-popup{ display:table-cell; vertical-align:top;}
.details {
display: flex;
}
.brand-prop {
color:#000;
padding: 0 10px;
display: flex;
flex-direction: column;
}
.brand-prop .title{ font-size:24px; margin-bottom:20px; font-weight:300; }
.brand-prop .subheading{
font-size:13px;
font-weight:600;
}
.brand-prop .brand-detail {
background-color: #fff;
box-shadow: 0 1px 3px 0 rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12);
border-radius: 3px;
flex: 1;
display: flex;
flex-direction: column;
}
.detail-sec strong{
color:#888888;
font-weight: 400;
border-bottom: 1px solid #ddd;
}
.brand-prop .detail-sec{ padding:20px; border-bottom:1px solid #DDD; line-height:22px;}
.brand-prop .detail-sec:first-child{ padding-top:20px;}
.brand-prop .detail-sec .row{ margin-bottom:20px;}
.brand-prop .detail-sec .row:last-child{ margin-bottom: 0;}
.brand-prop .detail-sec {
color:#333;
padding-top:10px;
font-weight: 400;
&:first-child {
padding-top: 20px;
}
&.no-border {
border-bottom: none;
}
> span {
color:#333;
display:block;
}
.dollar {
font-size: 20px;
color: #999;
vertical-align: baseline;
}
span.label {
font-size: 25px;
display: inline-block;
font-weight: 400;
color:#333;
padding-left: 2px;
padding: 0;
}
}
.brand-prop .detail-sec span.viewall {
font-size: 13px;
float: right;
margin-top: -12px;
> a {
color: #87C328;
}
}
// .brand-prop .detail-sec li {
// background:url(../image2/error-list.png) left 5px no-repeat;
// background-size: 18px;
// padding-left:30px;
// padding-bottom:10px;
// font-size: 13px;
// font-family: "Open Sans", sans-serif;
// }
.extra-space {
flex: 1;
}
.extra-space + .detail-sec {
border-top: 1px solid #ddd;
}
.errors-wpr {
.err-title {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
h4 {
font-size: 14px;
font-weight: 600;
line-height: 22px;
}
> a {
color: #87C328;
font-weight: 600;
align-self: center;
font-size: 12px;
&:hover {
cursor: pointer;
}
}
}
}
.detail-sec.bg-color {
padding: 10px 20px !important;
background-color: #F9F9F9; font-weight:600;
}
.detail-sec.bg-color .row {
margin-bottom: 0;
}
.item.active-tab {
background-color:#eeeeee;
padding-bottom: 20px;
height: 63px;
position: absolute;
z-index: 100;
}
.data-list {
// max-width: 97%;
ul {
display: flex;
overflow-x: hidden;
flex-direction: row;
li {
flex: 1 1 100px;
}
}
}
.item {
background-color: #eeeeee;
display: table;
cursor: pointer;
height: 70px;
> div {
display: table-cell;
}
>.itm-wpr {
padding: 10px 20px;
background-color: #fff;
transition: display 0.9s;
img {
max-height: 16px;
}
}
>.logo {
display: none;
}
&.active {
box-shadow: none;
background-color: #eeeeee;
display: block;
>.itm-wpr {
display: none;
}
>.logo {
text-align: center;
padding: 10px 0;
display: block;
height: 100%;
img {
max-width: 150px;
}
}
}
}
/*.hover-this:hover + .graph-show-image{ display:block;}*/
.graph-show-image {
display: none;
position: absolute;
z-index: 99999; cursor:pointer;
width:100%; left:0;
}
.graph-show-image img{ width:100%;}
.screen2, .screen3{ display:none;}
.select-action, .select-action label{ float:left;}
.select-action label{ line-height:35px; margin-right:10px; font-weight:400;}
.select-action .select-style, .select-action .select-style select{ float:left; height:35px; line-height:35px; margin-bottom:0;}
.select-action .select-style select{ padding-right:20px;}
.section-details .actions{ background-color:#fff; padding:20px;}
/* reports popup */
.steps {
display: table;
width: 100%; margin:30px 0; font-weight:500;
}
.step {
display: inline-block;
text-align: center;
width: 50%; position:relative; z-index:1; float:left;
}
.step span:after {
content: "";
position: absolute; left:0;
height: 1px;
border-bottom: 1px solid #ccc;
top: 27%;
width: 100%; z-index:-1;
}
.step > span {
background-color: #ccc;
border-radius: 50%;
display: table;
font-weight: 400;
height: 30px;
line-height: 30px;
margin: 0 auto;
width: 30px;
}
.step > span.active{ background-color:#8FC058;}
.grid-table th{ padding:0;}
.grid-table th .btn{ border:0 none; min-width:0;}
.grid-table th .btn:hover{ border:0 none;}
.grid-table th .dropdown-popup{ min-width:170px;}
.grid-table th .list-items li:hover ul { display:block;}
.grid-table th .list-items ul {
background-color: #fff;
border: 1px solid #ccc;
left: 100%;
min-width: 150px;
position: absolute;
margin-top:-40px;
display:none;
}
.grid-table th.last .dropdown-popup{ margin-left:-14px;}
.grid-table th.last .list-items ul{ right:100%; left:inherit;}
#example th {
padding: 5px 10px;
}
.add-list-items .table-cell {
border: 1px solid #cccccc;
padding: 0 !important;
vertical-align: top;
width: 45% !important;
}
.add-list-items .table-cell:nth-child(2) {
border: 0 none;
width: 10% !important;
}
.add-list-items h4 {
background-color: #dfe2e7;
color: #00447f;
font-size: 14px;
font-weight: 400;
padding: 5px 10px; text-transform:uppercase;
}
.search-list {
position: relative;
}
.add-list-container{ height:210px; margin-bottom:0 !important;}
.list-options {
height: 145px;
overflow-y: scroll;
}
.add-list-items .table-cell:last-child .list-options {
height: 180px;
}
.add-remove-items{vertical-align:middle !important; text-align:center;}
.add-remove-items img{ cursor:pointer;}
.search-list > input[type="text"] {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: -moz-use-text-color -moz-use-text-color #cccccc;
border-image: none;
border-style: none none solid;
border-width: 0 0 1px;
}
.search-list > input[type="submit"] {
background: url(../images/search-icon.png) no-repeat 0 0;
border: 0 none;
height: 20px;
position: absolute;
right: 20px;
text-indent: -5000px;
top: 6px;
width: 20px;
}
.list-options li {
padding: 5px 10px; cursor:pointer;
}
.list-options li:hover, .list-options li.selected {
background-color:#EBF1F1;
}
.pager li:first-child > a, .pager li:first-child > span {
border-left: 1px solid #ddd;
}
.pager li > a:hover, .pager li > a:focus{ background-color:#fff;}
.pager li > a, .pager li > span{ border-radius:0;}
.pager{ text-align:right;}
.container-fluid{ max-width:98%;}
.detail-sec.bg-color {
padding: 10px 20px !important;
background-color: #F9F9F9;
}
.detail-sec.bg-color .row {
margin-bottom: 0;
}
.row-eq-height {
display: flex;
padding: 0 10px;
margin-bottom: 30px;
}
.detail-sec {
.m-heading {
font-size: 13px;
font-weight: 600;
margin-bottom: 20px;
line-height: 22px;
text-transform: uppercase;
}
}
.flex-row {
display: flex;
justify-content: space-between;
.subheading {
margin-bottom: 20px;
}
h4 {
color: #888888;
font-weight: 400;
font-size: 14px;
font-family: 'Open Sans', sans-serif;
margin-bottom: 10px;
}
span {
font-size: 25px;
font-weight: 400;
color: #333;
}
.flex-col {
flex: 1 1 100px;
}
}
.flex-col-left,
.flex-col-right {
display: flex;
flex-direction: row;
justify-content: space-between;
flex-basis: 40%;
> .flex-col {
flex: 1 1 50%;
.dollar {
height: 18px;
line-height: 18px;
font-weight: 400;
font-size: 12.6px;
display: inline-block;
}
&:first-child {
padding-right: 10px;
}
}
}
div.detail-sec .flex-row .lblSec {
// background-color:green;
padding-left:50px;
// width:60px;
}
.content-area {
margin-bottom: 50px;
}
.v-spacer {
width: 15px;
}
.flex-col-left, .flex-col-right {
display: flex;
flex-direction: column;
flex: 1 1;
.number-cont {
margin-bottom: 5px;
}
.chart-cont {
// text-align: center;
.chart {
padding: 20px 0px 0;
}
}
}
.chart-cont {
.chart {
// background-color: #dde6e9;
}
}
.item.active {
.logo {
display: flex;
justify-content: center;
align-items: center;
.lbl {
font-size: 18px;
}
}
}
///////////////////////////////////////////////////////////////////////////
// =========================== Task menu navigation ==================== //
///////////////////////////////////////////////////////////////////////////
$tasknav__height: 70px;
.task-nav-wpr {
width: 100%;
height: $tasknav__height;
// border: 1px solid red;
position: relative;
overflow: hidden;
&__pre, &__next {
width: 30px;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
height: $tasknav__height;
opacity: 1;
z-index: 100;
transition: all .3s ease;
&:hover {
border: 1px solid #ddd;
background-color: darken(#fff, 10%);
opacity: 1;
}
}
&__pre {
top: 0;
left: 0;
}
&__next {
top: 0;
right: 0;
}
}
.task-nav {
box-sizing: border-box;
list-style-type: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
margin: 0;
display: block;
padding: 0;
transition: all .3s ease-in-out;
&__item {
box-sizing: border-box;
width: 160px;
margin: 0;
height: 68px;
display: inline-block;
position: relative;
cursor: pointer;
}
}
////////////////////////////////////////////////////////////
// ===================== card =========================== //
////////////////////////////////////////////////////////////
.front {
display: flex;
flex-direction: column;
> * {
flex: 1;
}
}
.front-r1 {
position: relative;
display: block;
&__cc {
font-size: 18px;
padding: 5px 0 5px 15px;
}
&__ec {
position: absolute;
top: 5px;
right: 15px;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
border-radius: 50%;
font-size: 12px;
background-color: red;
color: #fff;
}
}
.front-r2 {
position: relative;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
height: 35px;
&__cc {
font-size: 20px;
}
&__ic {
color: lighten(#000, 10%);
}
}
.back {
display: none;
justify-content: center;
align-items: center;
&__cc {
font-size: 25px;
}
}
.card {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: transform .3s ease-in-out;
// box-shadow: 0 1px 3px 0 rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12);
}
.card.flipped {
border-bottom: none;
box-shadow: none;
.front {
display: none;
}
.back {
display: flex;
}
}
.card figure {
// display: block;
height: 100%;
width: 100%;
color: white;
position: absolute;
margin: 0;
// backface-visibility: hidden;
}
.card .front {
color: black;
}
.card .back {
background: #eee;
color: lighten(#000, 10%);
// transform: rotateY( 180deg );
}
// $lines-to-show:2;
// .errors-wpr {
// text-overflow:ellipsis;
// overflow: auto;
// display: block;
// }
$font-size: 26px;
$line-height: 1.4;
$lines-to-show: 2;
.errors-wpr {
display: block;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
height:230px;
position:relative;
min-width:100%;
//width: 370px;
width:27em;
.ellipsis{
display: inline-block;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
font-size: 13px;
vertical-align: bottom;
//width:33%;
width:27em;
}
}
.jqstooltip{
box-sizing: content-box;
// z-index:1;
// width:70px;
// height:25px!important;
}
.content-area {
position:relative;
top:130px;
padding-top:50px;
}
.fixed1 {
//padding-top: 20px;
display: flex;
top: 75px;
background-color: #eee;
width: 100%;
position:fixed;
}
// .scrollPage {
// max-height:calc(100vh - 111px);
// overflow-y: auto;
// }
.flex-col-right {
padding-left:14%;
}
.error {
i.fa-exclamation-triangle {
color: #f0ad4e;
}
}
.detail-sec .input-align {
margin-top:60px;
}
// .firsttab{
// margin-left:20px;
// }
Flex is not supported on IE. Use this site to check.
http://caniuse.com/#feat=flexbox