I'm trying to show element B (share) when hovering element A (project-footer). Any ideas?
body {
margin: 0px;
}
.main-wrapper {
max-width: 400px;
height: 100%;
margin: 0px auto;
}
.project-wrapper {
display: flex;
flex-direction: column;
height: 320px;
margin-top: 100px;
}
.project-header {
display: flex;
flex-direction: row;
height: 40px;
width: 100%
}
.column {
display: flex;
flex-direction: column;
width: 50%;
}
.title {
width: 100px;
height: 18px;
border-radius: 3px;
background-color: #533C86;
}
.owner {
width: 85px;
height: 14px;
border-radius: 3px;
background-color: #533C86;
margin-top: 8px;
}
.more {
height: 40px;
width: 40px;
background-color: #F4F4F4;
margin-left: auto;
border-radius: 100px;
}
.project-body {
width: 400px;
height: 265px;
background-color: #47C7C3;
border-radius: 3px;
margin-top: 10px;
display: inherit;
}
.project-footer {
width: 400px;
height: 60px;
background-color: #31A8A4;
margin-top: auto;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
display: inherit;
flex-direction: row;
transition: background-color 0.2s ease-out, padding 0.1s ease-out;
opacity: 1;
}
.project-footer:hover {
cursor: pointer;
background-color: #B5B5B5;
padding: 30px;
}
.share {
height: 40px;
width: 40px;
background-color: #F4F4F4;
margin-bottom: 10px;
margin-top: 10px;
border-radius: 100px;
margin-right: 10px;
margin-left: auto;
transition: width 0.1s ease-out, opacity 0.1s linear;
}
.share:hover {
width: 100px;
}
<body>
<div class="main-wrapper">
<div class="project-wrapper">
<div class="project-header">
<div class="column">
<div class="title"></div>
<div class="owner"></div>
</div>
<div class="column">
<div class="more icon"></div>
</div>
</div>
<div class="project-body">
<div class="badges">
<div class="badgde"></div>
<div class="badgde"></div>
</div>
<div class="project-footer">
<div class="column">
<div class="user"></div>
<div class="user"></div>
<div class="user"></div>
</div>
<div class="column">
<div class="share icon"></div>
</div>
</div>
</div>
</div>
</div>
</body>
http://jsfiddle.net/lombi/xx8n8dux/
try to add this jQuery, use mouseover and mouseout.
<script>
$(document).ready(function(e){
$(".project-footer").mouseover(function(){
$(".share").width(100);
});
$(".project-footer").mouseout(function(){
$(".share").width(40);
});
});
</script>
use the display property
.share{
display:none;
}
.project-footer:hover .share{
display:block;
}
Related
I am building a carousel and I want the container to have overflow-x hidden and overflow-y visible.When the items are hovered
a transform: scale() is applied and I want them to overflow from the container but only on the y axis.
I tried to set the container to overflow-x: hidden and the child to overflow-y: visible but that didn't work.
:root {
--item-margin: 5px;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
position: relative;
width: 80vw;
margin-top: 60px;
overflow-x: hidden;
}
.wrapper {
height: 90%;
display: flex;
position: relative;
left: calc(-20% - 5px);
transition: .5s ease all;
overflow-y: visible;
}
.left-arrow,
.right-arrow {
display: flex;
cursor: pointer;
justify-content: center;
align-items: center;
font-size: 2rem;
color: white;
width: 50px;
height: 50px;
background: #ED4956;
border-radius: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
.left-arrow {
left: 2%;
top: 50%;
}
.right-arrow {
left: 98%;
top: 50%;
}
.child {
display: inline-flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
height: 250px;
width: 20%;
font-weight: bold;
font-size: 4rem;
transition: .4s ease transform;
}
.child {
margin-right: var(--item-margin);
}
.child:hover {
transform: scale(1.5);
}
.child1 {
background: green;
}
.child2 {
background: blue;
}
.child3 {
background: yellow;
}
.child4 {
background: navy;
}
.child5 {
background: red;
}
.child6 {
background: pink;
}
.child7 {
background: grey;
}
.child8 {
background: brown;
}
.child9 {
background: #ff80ed;
}
#media (max-width: 1400px) {
.child {
width: calc(25% - var(--item-margin));
}
.wrapper {
left: -25%;
}
}
<div class="container">
<div class="wrapper">
<div class="child child1">1</div>
<div class="child child2">2</div>
<div class="child child3">3</div>
<div class="child child4">4</div>
<div class="child child5">5</div>
<div class="child child6">6</div>
<div class="child child7">7</div>
<div class="child child8">8</div>
<div class="child child9">9</div>
</div>
<div class="left-arrow"> ← </div>
<div class="right-arrow"> → </div>
</div>
You just have to give the .container a height, for example: 100vh.
Because the tops of the children are cut off i recommend to use padding-top: 60px instead of margin-top: 60px.
Because of the changed height the arrows are wrong positioned. To adjust this i used a different top value: half of the childrens height plus the containers padding-top (125px + 60px).
Because the .wrapper doesn't need position: relative in this example i removed it. Maybe in your project it is necessary for the arrow function(s)...
Working example: (watch it in "Full page" mode to see it without scrollbars)
:root {
--item-margin: 5px;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
position: relative;
width: 80vw;
height: 100vh;
padding-top: 60px;
overflow-x: hidden;
}
.wrapper {
height: 90%;
display: flex;
left: calc(-20% - 5px);
transition: .5s ease all;
overflow-y: visible;
}
.left-arrow,
.right-arrow {
display: flex;
cursor: pointer;
justify-content: center;
align-items: center;
font-size: 2rem;
color: white;
width: 50px;
height: 50px;
background: #ED4956;
border-radius: 50%;
transform: translate(-50%, -50%);
position: absolute;
top: 185px;
}
.left-arrow {
left: 2%;
}
.right-arrow {
left: 98%;
}
.child {
display: inline-flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
height: 250px;
width: 20%;
font-weight: bold;
font-size: 4rem;
transition: .4s ease transform;
}
.child {
margin-right: var(--item-margin);
}
.child:hover {
transform: scale(1.5);
}
.child1 {
background: green;
}
.child2 {
background: blue;
}
.child3 {
background: yellow;
}
.child4 {
background: navy;
}
.child5 {
background: red;
}
.child6 {
background: pink;
}
.child7 {
background: grey;
}
.child8 {
background: brown;
}
.child9 {
background: #ff80ed;
}
#media (max-width: 1400px) {
.child {
width: calc(25% - var(--item-margin));
}
.wrapper {
left: -25%;
}
}
<div class="container">
<div class="wrapper">
<div class="child child1">1</div>
<div class="child child2">2</div>
<div class="child child3">3</div>
<div class="child child4">4</div>
<div class="child child5">5</div>
<div class="child child6">6</div>
<div class="child child7">7</div>
<div class="child child8">8</div>
<div class="child child9">9</div>
</div>
<div class="left-arrow"> ← </div>
<div class="right-arrow"> → </div>
</div>
Because the arrows are still cut of you could add an extra container (here .parent) and add height, padding-top and overflow-x to it (instead of to the container).
Working example: (watch in "Full page" mode to see it without scrollbars)
:root {
--item-margin: 5px;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
position: relative;
width: 80vw;
}
.parent {
height: 100vh;
padding-top: 60px;
overflow-x: hidden;
}
.wrapper {
height: 90%;
display: flex;
left: calc(-20% - 5px);
transition: .5s ease all;
overflow: visible;
}
.left-arrow,
.right-arrow {
display: flex;
cursor: pointer;
justify-content: center;
align-items: center;
font-size: 2rem;
color: white;
width: 50px;
height: 50px;
background: #ED4956;
border-radius: 50%;
transform: translate(-50%, -50%);
position: absolute;
top: 185px;
}
.left-arrow {
left: 2%;
}
.right-arrow {
left: 98%;
}
.child {
display: inline-flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
height: 250px;
width: 20%;
font-weight: bold;
font-size: 4rem;
transition: .4s ease transform;
}
.child {
margin-right: var(--item-margin);
}
.child:hover {
transform: scale(1.5);
}
.child1 {
background: green;
}
.child2 {
background: blue;
}
.child3 {
background: yellow;
}
.child4 {
background: navy;
}
.child5 {
background: red;
}
.child6 {
background: pink;
}
.child7 {
background: grey;
}
.child8 {
background: brown;
}
.child9 {
background: #ff80ed;
}
#media (max-width: 1400px) {
.child {
width: calc(25% - var(--item-margin));
}
.wrapper {
left: -25%;
}
}
<div class="container">
<div class="parent">
<div class="wrapper">
<div class="child child1">1</div>
<div class="child child2">2</div>
<div class="child child3">3</div>
<div class="child child4">4</div>
<div class="child child5">5</div>
<div class="child child6">6</div>
<div class="child child7">7</div>
<div class="child child8">8</div>
<div class="child child9">9</div>
</div>
</div>
<div class="left-arrow"> ← </div>
<div class="right-arrow"> → </div>
</div>
when i hover over the hamburger icon in 1000px mode the menu appears, but when i hover over menu it disappears. i have tried z-index and tricks related to position but cannot get the solution.
the issue is in 1000px because in full screen mode i can hover over sub-menu, but not on 1000px screen.
please help, thank you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ESPN</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./app.css">
</head>
<body>
<header class="header">
<div class="header__logo"><span>ESPN</span> / Media Distribution</div>
<div class="hamburger__icon__section">
</div>
<nav class="navbar">
<div class="navbar__items">
<div class="hamburger__icon"><div></div><div></div><div></div></div>
<ul class="navbar__lists__items">
<li class="navbar__hover__items">
Sports Programming
<ul class="navbar__lists__items__item">
<li>Boxing</li>
<li>Films</li>
<li>Fina</li>
<li>World Athletics</li>
<li>Ncaa</li>
<li>Pocker</li>
<li>Special Olympics</li>
<li>X Games</li>
</ul>
</li>
<li class="navbar__hover__items">Content Calender</li>
<li class="navbar__hover__items">
Contacts
<ul class="navbar__lists__items__item">
<li>Asia Pacific</li>
<li>Canada</li>
<li>Europe, Middle East and Africa</li>
<li>Latin America</li>
<li>Mexico</li>
</ul>
</li>
</ul>
<div class="search">
<input type="text" placeholder="Search">
<i class="fa fa-search"></i>
</input>
</div>
</div>
</nav>
</header>
<div class="video__section">
<div class="video__header__wrapper">
<video src="./6. Exercise Higher Order Functions.mp4" loop="true" autoplay="true" muted>
</video>
</div>
<div class="video__section__content">
<p><span>ESPN /</span> Media Distribution</p>
</div>
</div>
<div class="image__section">
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
</div>
<div class="copyright__section">
<div class="copyright__section__content">
<p>Copyright © 2020 ESPN, Inc. - All Rights Reserved | Terms of Use | Privacy Policy</p>
</div>
</div>
</body>
</html>
#import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght#600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
font-family: 'Fira Sans', sans-serif;
line-height: 1.6rem;
}
body {
font-size: 1.6rem;
}
.header {
display: flex;
justify-content: space-around;
align-items: stretch;
background-color:rgb(202, 8, 19);
color: #fff;
border-bottom: 1px solid #fff;
}
.header__logo {
font-size: 20px;
line-height: 50px;
user-select: none;
}
.header__logo span {
font-style: oblique;
}
.navbar__items {
display: flex;
justify-content: center;
align-items: stretch;
}
.navbar__lists__items {
display: flex;
justify-content: center;
align-items: stretch;
list-style: none;
}
.navbar__lists__items > li {
margin: 0 5px;
}
.navbar__lists__items__item {
width: 250px;
opacity: 0;
pointer-events: none;
position: absolute;
top: 59px;
left: 0px;
right: 0;
list-style: none;
transition: all 0.3s;
}
.navbar__lists__items__item li {
cursor: pointer;
border: 1px solid #666;
background-color: #fff;
line-height: 1.6rem;
}
.navbar__lists__items__item li a:hover {
background-color: #666666;
color: #fff;
}
.navbar__lists__items__item li a {
padding: 10px 20px;
display: block;
text-decoration: none;
color: #666666;
text-transform: uppercase;
}
.navbar__hover__items {
display: flex;
justify-content: center;
align-items: stretch;
position: relative;
line-height: 50px;
z-index: 1;
}
.navbar__hover__items > a {
margin-right: 5px;
}
.navbar__lists__items .navbar__hover__items:nth-child(odd)::after {
content: ' \02C5';
}
.navbar__lists__items > li > a {
text-decoration: none;
color: #fff;
text-transform: uppercase;
}
.navbar__hover__items:nth-child(2n+1):hover > a {
background-color: #fff;
color: rgb(202, 8, 19);
}
.navbar__hover__items:nth-child(2n+1):hover .navbar__lists__items__item {
opacity: 1;
pointer-events: all;
transform: translateY(-10px);
}
.search {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.search input {
border: 1px solid #fff;
outline: none;
border-radius: 5px;
padding: 5px;
}
.search i {
position: absolute;
color: #000;
top: 50%;
left: 95%;
transform: translate(-95%, -50%);
margin-right: -30px;
}
.video__section {
width: 100%;
height: 100%;
position: relative;
color: #fff;
font-size: 40px;
}
.video__header__wrapper {
width: 100%;
height: 100%;
}
.video__header__wrapper video {
width: 100%;
height: 100%;
}
.video__section__content {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -40%);
user-select: none;
}
.video__section__content span {
font-style: oblique;
}
.image__section {
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
.image__section .image {
flex-basis: 25%;
overflow: hidden;
position: relative;
height: 200px;
width: 150px;
}
.image__section .image img {
width: 100%;
height: 100%;
cursor: pointer;
transform: scale(1.1);
transition: all 0.3s;
}
.overlay {
position: absolute;
right: 0;
left: 0;
bottom: 100%;
background-color: #000;
width: 100%;
overflow: hidden;
opacity: 0.7;
transition: 0.3s ease;
}
.image:hover img {
transform: scale(1);
}
.image:hover > .overlay {
height: 100%;
bottom: 0;
}
.copyright__section {
font-size: 10px;
background-color: rgb(202, 8, 19);
color: #fff;
}
.copyright__section__content {
margin-top: 0;
margin-bottom: 0;
margin-left: 30px;
}
#media (max-width: 1000px) {
.header {
padding: 0 10px;
}
.navbar__items {
position: relative;
}
.navbar__lists__items {
display: none;
position: absolute;
top: 50px;
right: 50px;
width: 300px;
padding: 0 10px;
background-color: #fff;
font-family: 'Lato',Helvetica,Arial,Lucida,sans-serif;
z-index: 1;
box-shadow: 0 0 0.5px 1px rgb(255, 255, 255, 0.7);
}
.navbar__lists__items > li > a {
color: #000;
}
.navbar__lists__items .navbar__hover__items:nth-child(odd)::after {
content: "";
display: block;
}
.navbar__hover__items {
display: block;
color: #000;
}
.navbar__lists__items__item {
display: none;
}
.video__section {
font-size: 35px;
}
.search {
height: 50px;
}
.hamburger__icon__section {
display: flex;
justify-content: flex-end;
flex: 2;
}
.hamburger__icon {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
margin-right: 10px;
cursor: pointer;
}
.hamburger__icon > div {
width: 25px;
height: 2px;
margin: 3px 0;
background-color: #fff;
}
.hamburger__icon:hover + .navbar__lists__items {
display: block;
}
}
You could handle the show/hide using javascript instead of css because the way you do it right now whenever the browser detects your cursor is no longer on top of the hamburger_buttton it will hide your menu so it would be better to handle the event with a click instead. Or you can check this answer. Hope it helps.
let navbarListItems = document.querySelector('.navbar__lists__items');
let hamburgetButton = document.querySelector('.hamburger__icon');
hamburgetButton.onclick = function () {
navbarListItems.style.display = navbarListItems.style.display === 'none' ? 'block' : 'none';
}
#import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght#600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
font-family: 'Fira Sans', sans-serif;
line-height: 1.6rem;
}
body {
font-size: 1.6rem;
}
.header {
display: flex;
justify-content: space-around;
align-items: stretch;
background-color: rgb(202, 8, 19);
color: #fff;
border-bottom: 1px solid #fff;
}
.header__logo {
font-size: 20px;
line-height: 50px;
user-select: none;
}
.header__logo span {
font-style: oblique;
}
.navbar__items {
display: flex;
justify-content: center;
align-items: stretch;
}
.navbar__lists__items {
display: flex;
justify-content: center;
align-items: stretch;
list-style: none;
}
.navbar__lists__items>li {
margin: 0 5px;
}
.navbar__lists__items__item {
width: 250px;
opacity: 0;
pointer-events: none;
position: absolute;
top: 59px;
left: 0px;
right: 0;
list-style: none;
transition: all 0.3s;
}
.navbar__lists__items__item li {
cursor: pointer;
border: 1px solid #666;
background-color: #fff;
line-height: 1.6rem;
}
.navbar__lists__items__item li a:hover {
background-color: #666666;
color: #fff;
}
.navbar__lists__items__item li a {
padding: 10px 20px;
display: block;
text-decoration: none;
color: #666666;
text-transform: uppercase;
}
.navbar__hover__items {
display: flex;
justify-content: center;
align-items: stretch;
position: relative;
line-height: 50px;
z-index: 1;
}
.navbar__hover__items>a {
margin-right: 5px;
}
.navbar__lists__items .navbar__hover__items:nth-child(odd)::after {
content: ' \02C5';
}
.navbar__lists__items>li>a {
text-decoration: none;
color: #fff;
text-transform: uppercase;
}
.navbar__hover__items:nth-child(2n+1):hover>a {
background-color: #fff;
color: rgb(202, 8, 19);
}
.navbar__hover__items:nth-child(2n+1):hover .navbar__lists__items__item {
opacity: 1;
pointer-events: all;
transform: translateY(-10px);
}
.search {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.search input {
border: 1px solid #fff;
outline: none;
border-radius: 5px;
padding: 5px;
}
.search i {
position: absolute;
color: #000;
top: 50%;
left: 95%;
transform: translate(-95%, -50%);
margin-right: -30px;
}
.video__section {
width: 100%;
height: 100%;
position: relative;
color: #fff;
font-size: 40px;
}
.video__header__wrapper {
width: 100%;
height: 100%;
}
.video__header__wrapper video {
width: 100%;
height: 100%;
}
.video__section__content {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -40%);
user-select: none;
}
.video__section__content span {
font-style: oblique;
}
.image__section {
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
.image__section .image {
flex-basis: 25%;
overflow: hidden;
position: relative;
height: 200px;
width: 150px;
}
.image__section .image img {
width: 100%;
height: 100%;
cursor: pointer;
transform: scale(1.1);
transition: all 0.3s;
}
.overlay {
position: absolute;
right: 0;
left: 0;
bottom: 100%;
background-color: #000;
width: 100%;
overflow: hidden;
opacity: 0.7;
transition: 0.3s ease;
}
.image:hover img {
transform: scale(1);
}
.image:hover>.overlay {
height: 100%;
bottom: 0;
}
.copyright__section {
font-size: 10px;
background-color: rgb(202, 8, 19);
color: #fff;
}
.copyright__section__content {
margin-top: 0;
margin-bottom: 0;
margin-left: 30px;
}
#media (max-width: 1000px) {
.header {
padding: 0 10px;
}
.navbar__items {
position: relative;
}
.navbar__lists__items {
display: none;
position: absolute;
top: 50px;
right: 50px;
width: 300px;
padding: 0 10px;
background-color: #fff;
font-family: 'Lato', Helvetica, Arial, Lucida, sans-serif;
z-index: 1;
box-shadow: 0 0 0.5px 1px rgb(255, 255, 255, 0.7);
}
.navbar__lists__items>li>a {
color: #000;
}
.navbar__lists__items .navbar__hover__items:nth-child(odd)::after {
content: "";
display: block;
}
.navbar__hover__items {
display: block;
color: #000;
}
.navbar__lists__items__item {
display: none;
}
.video__section {
font-size: 35px;
}
.search {
height: 50px;
}
.hamburger__icon__section {
display: flex;
justify-content: flex-end;
flex: 2;
}
.hamburger__icon {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
margin-right: 10px;
cursor: pointer;
}
.hamburger__icon>div {
width: 25px;
height: 2px;
margin: 3px 0;
background-color: #fff;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ESPN</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./app.css">
</head>
<body>
<header class="header">
<div class="header__logo"><span>ESPN</span> / Media Distribution</div>
<div class="hamburger__icon__section">
</div>
<nav class="navbar">
<div class="navbar__items">
<div class="hamburger__icon">
<div></div>
<div></div>
<div></div>
</div>
<ul class="navbar__lists__items">
<li class="navbar__hover__items">
Sports Programming
<ul class="navbar__lists__items__item">
<li>Boxing</li>
<li>Films</li>
<li>Fina</li>
<li>World Athletics</li>
<li>Ncaa</li>
<li>Pocker</li>
<li>Special Olympics</li>
<li>X Games</li>
</ul>
</li>
<li class="navbar__hover__items">Content Calender</li>
<li class="navbar__hover__items">
Contacts
<ul class="navbar__lists__items__item">
<li>Asia Pacific</li>
<li>Canada</li>
<li>Europe, Middle East and Africa</li>
<li>Latin America</li>
<li>Mexico</li>
</ul>
</li>
</ul>
<div class="search">
<input type="text" placeholder="Search">
<i class="fa fa-search"></i>
</input>
</div>
</div>
</nav>
</header>
<div class="video__section">
<div class="video__header__wrapper">
<video src="./6. Exercise Higher Order Functions.mp4" loop="true" autoplay="true" muted>
</video>
</div>
<div class="video__section__content">
<p><span>ESPN /</span> Media Distribution</p>
</div>
</div>
<div class="image__section">
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
</div>
<div class="copyright__section">
<div class="copyright__section__content">
<p>Copyright © 2020 ESPN, Inc. - All Rights Reserved | Terms of Use | Privacy Policy</p>
</div>
</div>
</body>
</html>
Simply add this to your selector :
, .navbar__lists__items:hover
The full rule should look like this :
.hamburger__icon:hover + .navbar__lists__items, .navbar__lists__items:hover {
display: block;
}
This is happening since the scope of hover effect is only limited to the hamburger icon and as soon as the hover scope is left, the css does not execute for it so in order to stabilize the menu items I have added hover scope to that <ul> too.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
font-family: 'Fira Sans', sans-serif;
line-height: 1.6rem;
}
body {
font-size: 1.6rem;
}
.header {
display: flex;
justify-content: space-around;
align-items: stretch;
background-color:rgb(202, 8, 19);
color: #fff;
border-bottom: 1px solid #fff;
}
.header__logo {
font-size: 20px;
line-height: 50px;
user-select: none;
}
.header__logo span {
font-style: oblique;
}
.navbar__items {
display: flex;
justify-content: center;
align-items: stretch;
}
.navbar__lists__items {
display: flex;
justify-content: center;
align-items: stretch;
list-style: none;
}
.navbar__lists__items > li {
margin: 0 5px;
}
.navbar__lists__items__item {
width: 250px;
opacity: 0;
pointer-events: none;
position: absolute;
top: 59px;
left: 0px;
right: 0;
list-style: none;
transition: all 0.3s;
}
.navbar__lists__items__item li {
cursor: pointer;
border: 1px solid #666;
background-color: #fff;
line-height: 1.6rem;
}
.navbar__lists__items__item li a:hover {
background-color: #666666;
color: #fff;
}
.navbar__lists__items__item li a {
padding: 10px 20px;
display: block;
text-decoration: none;
color: #666666;
text-transform: uppercase;
}
.navbar__hover__items {
display: flex;
justify-content: center;
align-items: stretch;
position: relative;
line-height: 50px;
z-index: 1;
}
.navbar__hover__items > a {
margin-right: 5px;
}
.navbar__lists__items .navbar__hover__items:nth-child(odd)::after {
content: ' \02C5';
}
.navbar__lists__items > li > a {
text-decoration: none;
color: #fff;
text-transform: uppercase;
}
.navbar__hover__items:nth-child(2n+1):hover > a {
background-color: #fff;
color: rgb(202, 8, 19);
}
.navbar__hover__items:nth-child(2n+1):hover .navbar__lists__items__item {
opacity: 1;
pointer-events: all;
transform: translateY(-10px);
}
.search {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.search input {
border: 1px solid #fff;
outline: none;
border-radius: 5px;
padding: 5px;
}
.search i {
position: absolute;
color: #000;
top: 50%;
left: 95%;
transform: translate(-95%, -50%);
margin-right: -30px;
}
.video__section {
width: 100%;
height: 100%;
position: relative;
color: #fff;
font-size: 40px;
}
.video__header__wrapper {
width: 100%;
height: 100%;
}
.video__header__wrapper video {
width: 100%;
height: 100%;
}
.video__section__content {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -40%);
user-select: none;
}
.video__section__content span {
font-style: oblique;
}
.image__section {
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: center;
}
.image__section .image {
flex-basis: 25%;
overflow: hidden;
position: relative;
height: 200px;
width: 150px;
}
.image__section .image img {
width: 100%;
height: 100%;
cursor: pointer;
transform: scale(1.1);
transition: all 0.3s;
}
.overlay {
position: absolute;
right: 0;
left: 0;
bottom: 100%;
background-color: #000;
width: 100%;
overflow: hidden;
opacity: 0.7;
transition: 0.3s ease;
}
.image:hover img {
transform: scale(1);
}
.image:hover > .overlay {
height: 100%;
bottom: 0;
}
.copyright__section {
font-size: 10px;
background-color: rgb(202, 8, 19);
color: #fff;
}
.copyright__section__content {
margin-top: 0;
margin-bottom: 0;
margin-left: 30px;
}
#media (max-width: 1000px) {
.header {
padding: 0 10px;
}
.navbar__items {
position: relative;
}
.navbar__lists__items {
display: none;
position: absolute;
top: 50px;
right: 50px;
width: 300px;
padding: 0 10px;
background-color: #fff;
font-family: 'Lato',Helvetica,Arial,Lucida,sans-serif;
z-index: 1;
box-shadow: 0 0 0.5px 1px rgb(255, 255, 255, 0.7);
}
.navbar__lists__items > li > a {
color: #000;
}
.navbar__lists__items .navbar__hover__items:nth-child(odd)::after {
content: "";
display: block;
}
.navbar__hover__items {
display: block;
color: #000;
}
.navbar__lists__items__item {
display: none;
}
.video__section {
font-size: 35px;
}
.search {
height: 50px;
}
.hamburger__icon__section {
display: flex;
justify-content: flex-end;
flex: 2;
}
.hamburger__icon {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
margin-right: 10px;
cursor: pointer;
}
.hamburger__icon > div {
width: 25px;
height: 2px;
margin: 3px 0;
background-color: #fff;
}
/* added another line here */
.hamburger__icon:hover + .navbar__lists__items,
.hamburger__icon + .navbar__lists__items:hover{
display: block;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ESPN</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./app.css">
</head>
<body>
<header class="header">
<div class="header__logo"><span>ESPN</span> / Media Distribution</div>
<div class="hamburger__icon__section">
</div>
<nav class="navbar">
<div class="navbar__items">
<div class="hamburger__icon"><div></div><div></div><div></div></div>
<ul class="navbar__lists__items">
<li class="navbar__hover__items">
Sports Programming
<ul class="navbar__lists__items__item">
<li>Boxing</li>
<li>Films</li>
<li>Fina</li>
<li>World Athletics</li>
<li>Ncaa</li>
<li>Pocker</li>
<li>Special Olympics</li>
<li>X Games</li>
</ul>
</li>
<li class="navbar__hover__items">Content Calender</li>
<li class="navbar__hover__items">
Contacts
<ul class="navbar__lists__items__item">
<li>Asia Pacific</li>
<li>Canada</li>
<li>Europe, Middle East and Africa</li>
<li>Latin America</li>
<li>Mexico</li>
</ul>
</li>
</ul>
<div class="search">
<input type="text" placeholder="Search">
<i class="fa fa-search"></i>
</input>
</div>
</div>
</nav>
</header>
<div class="video__section">
<div class="video__header__wrapper">
<video src="./6. Exercise Higher Order Functions.mp4" loop="true" autoplay="true" muted>
</video>
</div>
<div class="video__section__content">
<p><span>ESPN /</span> Media Distribution</p>
</div>
</div>
<div class="image__section">
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
<div class="image">
<img src="./food.png" alt="">
<div class="overlay"></div>
</div>
</div>
<div class="copyright__section">
<div class="copyright__section__content">
<p>Copyright © 2020 ESPN, Inc. - All Rights Reserved | Terms of Use | Privacy Policy</p>
</div>
</div>
</body>
</html>
I would like to do a responsive stepper where in the lines in between steppers are connected to each step. Currently only workable with 4 steps, it becomes not responsive once it is more or less than 4 steps.
Here is the jsfiddle, currently workable with 4 steps.
.bullet.completed::after {
content: '';
position: absolute;
bottom: 10px;
height: 1px;
width: calc(133% - 21px);
background-color: #000;
margin-left: 7px;
}
I tried to change this part but it doesn't seem to work. Thanks for advance!
#stepProgressBar {
display: flex;
justify-content: space-between;
align-items: flex-end;
width: 90%;
margin: 0 auto;
margin-bottom: 40px;
}
.step {
text-align: center;
width: 20%;
position: relative;
}
.step-text {
margin-bottom: 10px;
color: #000;
}
.bullet {
border: 1px solid #000;
height: 20px;
width: 20px;
color: #000;
display: inline-block;
transition: background-color 500ms;
line-height: 20px;
}
.bullet.completed {
color: white;
background-color: #000;
}
.bullet.completed::after {
content: '';
position: absolute;
bottom: 10px;
height: 1px;
width: calc(133% - 21px);
background-color: #000;
margin-left: 7px;
}
/* Base styles and helper stuff */
.hidden {
display: none;
}
button {
padding: 5px 10px;
border: 1px solid black;
transition: 250ms background-color;
}
button:hover {
cursor: pointer;
background-color: black;
color: white;
}
button:disabled:hover {
opacity: 0.6;
cursor: not-allowed;
}
.text-center {
text-align: center;
}
.container {
max-width: 100%;
margin: 0 auto;
margin-top: 20px;
padding: 40px;
}
<div class="container">
<div id="stepProgressBar">
<div class="step">
<p class="step-text">Super Duper Long Title</p>
<div class="bullet completed">1</div>
</div>
<div class="step">
<p class="step-text">Long Long Title</p>
<div class="bullet completed">2</div>
</div>
<div class="step">
<p class="step-text">Loooong Title</p>
<div class="bullet completed">3</div>
</div>
<div class="step">
<p class="step-text">Loooong Title</p>
<div class="bullet">4</div>
</div>
</div>
</div>
Modify your .bullet.completed::after to display:flex, and set its width to 100% minus a modified margin-left value, which is equal to the width of the .bullet (20px):
.bullet.completed::after {
content: '';
position: absolute;
bottom: 10px;
height: 1px;
display:flex; /* Added */
width:calc(100% - 20px); /* Modified */
background-color: #000;
margin-left: 20px; /* Modified */
}
Here it is with seven steps:
const previousBtn = document.getElementById('previousBtn');
const nextBtn = document.getElementById('nextBtn');
const finishBtn = document.getElementById('finishBtn');
const content = document.getElementById('content');
const bullets = [...document.querySelectorAll('.bullet')];
const MAX_STEPS = 7;
let currentStep = 1;
nextBtn.addEventListener('click', () => {
bullets[currentStep - 1].classList.add('completed');
currentStep += 1;
previousBtn.disabled = false;
if (currentStep === MAX_STEPS) {
nextBtn.disabled = true;
finishBtn.disabled = false;
}
content.innerText = `Step Number ${currentStep}`;
});
previousBtn.addEventListener('click', () => {
bullets[currentStep - 2].classList.remove('completed');
currentStep -= 1;
nextBtn.disabled = false;
finishBtn.disabled = true;
if (currentStep === 1) {
previousBtn.disabled = true;
}
content.innerText = `Step Number ${currentStep}`;
});
finishBtn.addEventListener('click', () => {
location.reload();
});
#stepProgressBar {
display: flex;
justify-content: space-between;
align-items: flex-end;
width: 90%;
margin: 0 auto;
margin-bottom: 40px;
}
.step {
text-align: center;
width: 20%;
position: relative;
}
.step-text {
margin-bottom: 10px;
color: #000;
}
.bullet {
border: 1px solid #000;
height: 20px;
width: 20px;
color: #000;
display: inline-block;
transition: background-color 500ms;
line-height: 20px;
}
.bullet.completed {
color: white;
background-color: #000;
}
.bullet.completed::after {
content: '';
position: absolute;
bottom: 10px;
height: 1px;
width:calc(100% - 20px);
display:flex;
background-color: #000;
margin-left: 20px;
}
/* Base styles and helper stuff */
.hidden {
display: none;
}
button {
padding: 5px 10px;
border: 1px solid black;
transition: 250ms background-color;
}
button:hover {
cursor: pointer;
background-color: black;
color: white;
}
button:disabled:hover {
opacity: 0.6;
cursor: not-allowed;
}
.text-center {
text-align: center;
}
.container {
max-width: 100%;
margin: 0 auto;
margin-top: 20px;
padding: 40px;
}
<div class="container">
<div id="stepProgressBar">
<div class="step">
<p class="step-text">Super Duper Long Title</p>
<div class="bullet">1</div>
</div>
<div class="step">
<p class="step-text">Long Long Title</p>
<div class="bullet">2</div>
</div>
<div class="step">
<p class="step-text">Loooong Title</p>
<div class="bullet">3</div>
</div>
<div class="step">
<p class="step-text">Title</p>
<div class="bullet ">4</div>
</div>
<div class="step">
<p class="step-text">Title</p>
<div class="bullet ">5</div>
</div>
<div class="step">
<p class="step-text">Title</p>
<div class="bullet ">6</div>
</div>
<div class="step">
<p class="step-text">Title</p>
<div class="bullet ">7</div>
</div>
</div>
<div id="main">
<p id="content" class="text-center">Step Number 1</p>
<button id="previousBtn" class="hidden"></button>
<button id="nextBtn">Next</button>
<button id="finishBtn" class="hidden">Finish</button>
</div>
</div>
I am trying to place a pair of buttons in line of the divs storing images on sides.
Currently i got this but it is not quite what i want:
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
background-color: darkgrey;
height: 100vh;
margin: 0;
/* for centering block both horizontally and vertically */
display: flex;
justify-content: center;
align-items: center;
}
.wrapper {
display: flex;
justify-content: center;
flex-wrap: wrap;
/*maximum 3 items, (320px + 2px border + 0.5rem margin-left + 0.5rem margin-right) � 3 */
max-width: calc(325.33px * 3 + 0.5rem * 6);
}
.wrapper > div {
margin: 0.5rem;
}
img {
width: 323.33px;
max-height: 100%;
}
.border {
border: 1px solid #fff;
position: relative;
}
.txt {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
padding: 10px 20px;
color: white;
}
#media (max-width: 750px) {
.border {
width: calc(50% - 2rem);
}
.border > img {
width: 100%;
}
}
.left {
float: left;
text-align: center;
display: inline-block;
vertical-align: middle;
width: 3.5em;
height: 3.5em;
background: white;
border-radius: 50%;
margin-left: 1.5em;
}
.left:after {
border-radius: 4px;
content: '';
display: inline-block;
margin-top: 0.85em;
margin-left: 0.6em;
width: 1.2em;
height: 1.2em;
border-top: 0.6em solid #333;
border-right: 0.6em solid #333;
-moz-transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.right {
float: right;
text-align: center;
display: inline-block;
vertical-align: middle;
width: 3.5em;
height: 3.5em;
background: white;
border-radius: 50%;
margin-right: 1.5em;
}
.right:after {
border-radius: 4px;
content: '';
display: inline-block;
margin-top: 0.85em;
margin-left: -0.6em;
width: 1.2em;
height: 1.2em;
border-top: 0.6em solid #333;
border-right: 0.6em solid #333;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
<div>
<span class='left' ></span>
<span class= 'right'></span>
<div class="wrapper">
<div class="border">
<img src="https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/c119.0.842.842/18299802_1402951239794126_7834789447697694720_n.jpg">
<div class="txt">div text 1</div>
</div>
<div class="border">
<img src="https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/c135.0.810.810/17332427_1876651042606993_1501112703702269952_n.jpg">
<div class="txt">div text 2</div>
</div>
<div class="border">
<img src="https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/c84.0.912.912/16583397_677753229099565_4518661686835544064_n.jpg">
<div class="txt">Omelette du fromage</div>
</div>
<div class="border">
<img src="https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/c135.0.810.810/16230268_1353432401412243_430046279255457792_n.jpg">
<div class="txt">How you doin?</div>
</div>
<div class="border">
<img src="https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/c0.45.1080.1080/14547823_248508785596143_6915357097039233024_n.jpg">
<div class="txt">div text 5</div>
</div>
<div class="border">
<img src="https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/c135.0.810.810/15801844_242832729497192_6894626767370190848_n.jpg">
<div class="txt">div text 6</div>
</div>
</div>
</div>
Click "Full page" to get a better view of the snippet.
I tried to use
float with margins but it doesn't work very well:
This is what i am trying to achieve:
Is it possible to change position of those buttons without changing what is inside div with class called wrapper? It would break positioning of those divs. If it was possible to resize buttons with divs in line that would be great!
removed display flex from body
2.
.right {
/* float: right; */ instead of using thing use left: 0;
text-align: center;
display: inline-block;
/* vertical-align: middle; */ not needed
width: 3.5em;
height: 3.5em;
background: white;
border-radius: 50%;
right: 0;
/* margin-top: 50%; */ instead of this, use top: 50% or top: 100%
position: absolute; needs to be absolute pos
top: 100%;
transform: translateY(-50%); this centers the buttons vertically
}
3.
.wrapper {
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 100%;
padding: 0 48px;
}
Working:
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
background-color: darkgrey;
height: 100vh;
margin: 0;
}
.wrapper {
display: flex;
justify-content: center;
flex-wrap: wrap;
/*maximum 3 items, (320px + 2px border + 0.5rem margin-left + 0.5rem margin-right) � 3 */
width: 100%;
}
.wrapper {
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 100%;
padding: 0 48px;
}
img {
width: 323.33px;
max-height: 100%;
}
.border {
border: 1px solid #fff;
position: relative;
}
.txt {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
padding: 10px 20px;
color: white;
}
#media (max-width: 750px) {
.border {
width: calc(50% - 2rem);
}
.border > img {
width: 100%;
}
}
.left {
/* float: right; */
text-align: center;
display: inline-block;
/* vertical-align: middle; */
width: 3.5em;
height: 3.5em;
background: white;
border-radius: 50%;
left: 0;
/* margin-top: 50%; */
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.left:after {
border-radius: 4px;
content: '';
display: inline-block;
margin-top: 0.85em;
margin-left: 0.6em;
width: 1.2em;
height: 1.2em;
border-top: 0.6em solid #333;
border-right: 0.6em solid #333;
-moz-transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.right {
/* float: right; */
text-align: center;
display: inline-block;
/* vertical-align: middle; */
width: 3.5em;
height: 3.5em;
background: white;
border-radius: 50%;
right: 0;
/* margin-top: 50%; */
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.right:after {
border-radius: 4px;
content: '';
display: inline-block;
margin-top: 0.85em;
margin-left: -0.6em;
width: 1.2em;
height: 1.2em;
border-top: 0.6em solid #333;
border-right: 0.6em solid #333;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
<div>
<span class='left' ></span>
<span class= 'right'></span>
<div class="wrapper">
<div class="border">
<img src="https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/c119.0.842.842/18299802_1402951239794126_7834789447697694720_n.jpg">
<div class="txt">div text 1</div>
</div>
<div class="border">
<img src="https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/c135.0.810.810/17332427_1876651042606993_1501112703702269952_n.jpg">
<div class="txt">div text 2</div>
</div>
<div class="border">
<img src="https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/c84.0.912.912/16583397_677753229099565_4518661686835544064_n.jpg">
<div class="txt">Omelette du fromage</div>
</div>
<div class="border">
<img src="https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/c135.0.810.810/16230268_1353432401412243_430046279255457792_n.jpg">
<div class="txt">How you doin?</div>
</div>
<div class="border">
<img src="https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/c0.45.1080.1080/14547823_248508785596143_6915357097039233024_n.jpg">
<div class="txt">div text 5</div>
</div>
<div class="border">
<img src="https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/c135.0.810.810/15801844_242832729497192_6894626767370190848_n.jpg">
<div class="txt">div text 6</div>
</div>
</div>
</div>
I have a modal where I have dropdowns in the element.
The problem is since I have an overflow set, the dropdown, although it appears, does not appear on top of the modal. I understand since it's because I set an overflow:auto on the parent.
Is there any way via CSS that I can ignore the parent and show the dropdown above the "modal"?
You'll see in the example, the content in the red line is visible if you scroll. Which is the expected behaviour based on my code at the moment. What is the adjustment I will need to make to show that dropdown above the modal?
Tried fixing with z-index and I read somewhere on SO to set the grandparent to position relative.
Prefer a CSS only solution.
Thanks!
.w-100 {
width: 100%;
height: 100%;
}
.h-100 {
width: 100%;
height: 100%:
}
.modal-overlay {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
display: block;
z-index: 65;
padding-top: 100px;
overflow: auto;
background-color: rgba(0,0,0,.6);
}
.modal-small {
max-width: 600px;
width: 40%;
margin: 0 auto;
float: none;
display: block;
position: relative;
background-color: #fff;
padding: 0;
}
.container {
min-height: 120px;
max-height: 400px;
overflow: auto;
padding: 15px;
}
.element-container {
height: 100px;
width: 100%;
display: inline-block;
padding: 10px;
margin-bottom: 10px;
position: relative;
}
.element-flex-container {
display: flex;
align-items: center;
height: 100%;
padding: 5px 15px;
border-radius: 2px;
border-bottom: 3px solid rgba(0,0,0,.1);
border-left: 1px solid rgba(0,0,0,.1);
border-right: 1px solid rgba(0,0,0,.1);
border-top: 1px solid rgba(0,0,0,.1);
}
.avatar {
height: 32px;
width: 32px;
border-radius: 100%;
margin-right: 10px;
}
.flex-1 {
flex: 1;
}
.dropdown-width {
text-align: right;
width: 100px;
}
.dropdown-container {
display: inline;
position: relative;
}
.toggle-dropdown {
color: #4caf50
}
.dropdown {
position: absolute;
border: 1px solid red;
left: auto;
right: 0;
width: 120px;
display: block;
background-color: #fff;
z-index: 10;
margin-bottom: 20px;
padding: 0;
}
<div class="modal-overlay">
<div class="modal-small">
<div class="w-100 h-100"> <!-- this is since I inject an ui-view -->
<div class="w-100 h-100"> <!-- this is since I inject an ui-view -->
<div class="container">
<!-- Repeat of elements -->
<div class="element-container">
<div class="element-flex-container">
<img src="http://images.freeimages.com/images/previews/7ab/chrysanthemum-3-1621562.jpg" class="avatar" />
<div class="flex-1">
Something here
</div>
<div class="dropdown-width">
<div class="dropdown-container">
<div class="toggle-dropdown">
Toggle
</div>
<div class="dropdown">
Something here
<br />
Something else
<br />
Something else
<br />
Something else
<br />
Something else
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You need to make the dropdown element position: fixed, the dropdown container positon: absolute and the parent position:relativefor this to work. You can adjust the positining of the container element using top, right, left, bottom but you'll need to use negative margins on the fixed element.
.w-100 {
width: 100%;
height: 100%;
}
.h-100 {
width: 100%;
height: 100%:
}
.modal-overlay {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
display: block;
z-index: 65;
padding-top: 100px;
overflow: auto;
background-color: rgba(0,0,0,.6);
}
.modal-small {
max-width: 600px;
width: 40%;
margin: 0 auto;
float: none;
display: block;
position: relative;
background-color: #fff;
padding: 0;
}
.container {
min-height: 120px;
max-height: 400px;
overflow: auto;
padding: 15px;
}
.element-container {
height: 100px;
width: 100%;
display: inline-block;
padding: 10px;
margin-bottom: 10px;
position: relative;
}
.element-flex-container {
display: flex;
align-items: center;
height: 100%;
padding: 5px 15px;
border-radius: 2px;
border-bottom: 3px solid rgba(0,0,0,.1);
border-left: 1px solid rgba(0,0,0,.1);
border-right: 1px solid rgba(0,0,0,.1);
border-top: 1px solid rgba(0,0,0,.1);
}
.avatar {
height: 32px;
width: 32px;
border-radius: 100%;
margin-right: 10px;
}
.flex-1 {
flex: 1;
}
.dropdown-width {
text-align: right;
width: 100px;
}
.dropdown-container {
display: inline;
position: absolute;
top: 0;
right:0;
}
.toggle-dropdown {
color: #4caf50
}
.dropdown {
position: fixed;
border: 1px solid red;
width: 120px;
display: block;
background-color: #fff;
z-index: 10;
margin-bottom: 20px;
padding: 0;
}
<div class="modal-overlay">
<div class="modal-small">
<div class="w-100 h-100"> <!-- this is since I inject an ui-view -->
<div class="w-100 h-100"> <!-- this is since I inject an ui-view -->
<div class="container">
<!-- Repeat of elements -->
<div class="element-container">
<div class="element-flex-container">
<img src="http://images.freeimages.com/images/previews/7ab/chrysanthemum-3-1621562.jpg" class="avatar" />
<div class="flex-1">
Something here
</div>
<div class="dropdown-width">
<div class="dropdown-container">
<div class="toggle-dropdown">
Toggle
</div>
<div class="dropdown">
Something here
<br />
Something else
<br />
Something else
<br />
Something else
<br />
Something else
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
you need used z-index 999, and position relative in dropdown css.
Example:
.w-100 {
width: 100%;
height: 100%;
}
.h-100 {
width: 100%;
height: 100%:
}
.modal-overlay {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
display: block;
z-index: 65;
padding-top: 100px;
overflow: auto;
background-color: rgba(0,0,0,.6);
}
.modal-small {
max-width: 600px;
width: 40%;
margin: 0 auto;
float: none;
display: block;
position: relative;
background-color: #fff;
padding: 0;
}
.container {
min-height: 120px;
max-height: 400px;
overflow: auto;
padding: 15px;
}
.element-container {
height: 100px;
width: 100%;
display: inline-block;
padding: 10px;
margin-bottom: 10px;
position: relative;
}
.element-flex-container {
display: flex;
align-items: center;
height: 100%;
padding: 5px 15px;
border-radius: 2px;
border-bottom: 3px solid rgba(0,0,0,.1);
border-left: 1px solid rgba(0,0,0,.1);
border-right: 1px solid rgba(0,0,0,.1);
border-top: 1px solid rgba(0,0,0,.1);
}
.avatar {
height: 32px;
width: 32px;
border-radius: 100%;
margin-right: 10px;
}
.flex-1 {
flex: 1;
}
.dropdown-width {
text-align: right;
width: 100px;
}
.dropdown-container {
display: inline;
position: relative;
}
.toggle-dropdown {
color: #4caf50
}
.dropdown {
position: relative;
z-index: 9999;
border: 1px solid red;
left: auto;
right: 0;
width: 120px;
display: block;
background-color: #fff;
z-index: 10;
margin-bottom: 20px;
padding: 0;
}
<div class="modal-overlay">
<div class="modal-small">
<div class="w-100 h-100"> <!-- this is since I inject an ui-view -->
<div class="w-100 h-100"> <!-- this is since I inject an ui-view -->
<div class="container">
<!-- Repeat of elements -->
<div class="element-container">
<div class="element-flex-container">
<img src="http://images.freeimages.com/images/previews/7ab/chrysanthemum-3-1621562.jpg" class="avatar" />
<div class="flex-1">
Something here
</div>
<div class="dropdown-width">
<div class="dropdown-container">
<div class="toggle-dropdown">
Toggle
</div>
<div class="dropdown">
Something here
<br />
Something else
<br />
Something else
<br />
Something else
<br />
Something else
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>