I would like you to support me by guiding me with the possible solution to the following problem:
I require that the video when I scroll-And the video goes from 0% to 100% as the scroll is made, my problem is that when I do it the parent box is made to the size of the video, completely disappearing the content, here the example:
function scrollShowPic() {
const elementPic = document.getElementById("animationVideo")
document.addEventListener("scroll", e => {
if (scrollY <= "300") {
elementPic.style.width = "0%"
}
if (scrollY >= "400") {
elementPic.style.width = "10%"
}
if (scrollY >= "500") {
elementPic.style.width = "20%"
}
if (scrollY >= "600") {
elementPic.style.width = "30%"
}
if (scrollY >= "700") {
elementPic.style.width = "50%"
}
if (scrollY >= "800") {
elementPic.style.width = "70%"
}
if (scrollY >= "900") {
elementPic.style.width = "80%"
}
if (scrollY >= "1000") {
elementPic.style.width = "90%"
}
if (scrollY >= "1100") {
elementPic.style.width = "100%"
}
})
}
scrollShowPic()
.about-us {
height: 500px;
padding-top: 20px;
position: relative;
color: black;
border: 5px solid;
height: 100%;
}
.center {
padding: 15px 30px;
max-width: 1500px;
margin: auto;
border: 1px solid green;
}
video {
height: 100%;
width: 100%;
transition: all .5s ease-in;
border-top-right-radius: 88px;
}
.video {
border: 1px solid red;
overflow: hidden;
display: flex;
justify-content: flex-end;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dudas y prácticas</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat
consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam
obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed
commodi ducimus voluptates suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis
molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet
at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum!
Impedit eaque debitis recusandae hic sed commodi ducimus voluptates suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem
ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem
earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis
porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed commodi ducimus voluptates suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae
officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat
mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium
quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed commodi ducimus voluptates suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam,
maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque
cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus
aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed commodi ducimus voluptates suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam.
Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum
expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias
ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed commodi ducimus Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore,
nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae
voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus
alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed commodi ducimus voluptates suscipit. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam
aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae
vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed commodi ducimus voluptates suscipit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente
quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt
ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae
hic sed commodi ducimus
</p>
<section class="about-us">
<div class="center">
<div class="video">
<video id="animationVideo" width="100%" height="100%" autoplay="autoplay" muted="muted" loop="loop" class="swipeleft" style="clip-path: polygon(0% 0px, 100% 0px, 100% 100%, 0% 100%);">
<source src="https://dev.jankelley.com/app/uploads/2022/01/JK_Homepage_2_675 x 546-1.mp4" type="video/mp4">
<source src="https://dev.jankelley.com/app/uploads/2022/01/JK_Homepage_2_675 x 546.ogv" type="video/webm">
<source src="https://dev.jankelley.com/app/uploads/2022/01/JK_Homepage_2_675 x 546.webm" type="video/ogv">
Sorry, your browser doesn't support embedded videos.
</video>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat
consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam
obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed
commodi ducimus voluptates suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis
molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet
at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum!
Impedit eaque debitis recusandae hic sed commodi ducimus voluptates suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem
ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem
earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis
porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed commodi ducimus voluptates suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae
officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat
mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium
quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed commodi ducimus voluptates suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam,
maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque
cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus
aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed commodi ducimus voluptates suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam.
Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum
expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias
ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed commodi ducimusLorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore,
nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae
voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus
alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed commodi ducimus voluptates suscipit. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam
aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae
vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed commodi ducimus voluptates suscipit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente
quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt
ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae
hic sed commodi ducimus
</section>
<script src="js.js"></script>
</body>
</html>
Now I wanted to place the father with a certain height but at the high resolution, I don't like how it looks so I have to find a solution on how to make the video not have that behavior I really hope you can guide me thank you very much.
here I leave the page that I want to clone enter link description here
Actually, they are using polygon instead of width, and check the element in view instead of scroll position
function getViewPercentage(element) {
const viewport = {
top: window.pageYOffset,
bottom: window.pageYOffset + window.innerHeight
};
const elementBoundingRect = element.getBoundingClientRect();
const elementPos = {
top: elementBoundingRect.y + window.pageYOffset,
bottom: elementBoundingRect.y + elementBoundingRect.height + window.pageYOffset
};
if (viewport.top > elementPos.bottom || viewport.bottom < elementPos.top) {
return 0;
}
// Element is fully within viewport
if (viewport.top < elementPos.top && viewport.bottom > elementPos.bottom) {
return 100;
}
// Element is bigger than the viewport
if (elementPos.top < viewport.top && elementPos.bottom > viewport.bottom) {
return 100;
}
const elementHeight = elementBoundingRect.height;
let elementHeightInView = elementHeight;
if (elementPos.top < viewport.top) {
elementHeightInView = elementHeight - (window.pageYOffset - elementPos.top);
}
if (elementPos.bottom > viewport.bottom) {
elementHeightInView = elementHeightInView - (elementPos.bottom - viewport.bottom);
}
const percentageInView = (elementHeightInView / window.innerHeight) * 100;
return Math.round(percentageInView);
}
function scrollShowPic(){
const elementPic= document.getElementById("animationVideo")
document.addEventListener("scroll", e=>{
const percent = getViewPercentage(elementPic)
const polygonPercent = 100 - percent > 0 ? 100 - percent : 0
console.log(polygonPercent)
elementPic.style.clipPath= `polygon(${polygonPercent}% 0px, 100% 0px, 100% 100%, ${polygonPercent}% 100%)`
})
}
scrollShowPic()
.about-us {
height: 500px;
padding-top: 20px;
position: relative;
color: black;
border: 5px solid;
height: 100%;
}
.center {
padding: 15px 30px;
max-width: 1500px;
margin: auto;
border: 1px solid green;
}
video {
height: 100%;
width: 100%;
transition: all .5s ease-in;
border-top-right-radius: 88px;
}
.video {
border: 1px solid red;
overflow: hidden;
display: flex;
justify-content: flex-end;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dudas y prácticas</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat
consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam
obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed
commodi ducimus voluptates suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis
molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet
at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum!
Impedit eaque debitis recusandae hic sed commodi ducimus voluptates suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem
ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem
earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis
porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed commodi ducimus voluptates suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae
officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat
mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium
quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed commodi ducimus voluptates suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam,
maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque
cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus
aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed commodi ducimus voluptates suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam.
Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum
expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias
ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed commodi ducimus Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore,
nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae
voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus
alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed commodi ducimus voluptates suscipit. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam
aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae
vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed commodi ducimus voluptates suscipit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente
quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt
ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae
hic sed commodi ducimus
</p>
<section class="about-us">
<div class="center">
<div class="video">
<video id="animationVideo" width="100%" height="100%" autoplay="autoplay" muted="muted" loop="loop" class="swipeleft" style="clip-path: polygon(0% 0px, 100% 0px, 100% 100%, 0% 100%);">
<source src="https://dev.jankelley.com/app/uploads/2022/01/JK_Homepage_2_675 x 546-1.mp4" type="video/mp4">
<source src="https://dev.jankelley.com/app/uploads/2022/01/JK_Homepage_2_675 x 546.ogv" type="video/webm">
<source src="https://dev.jankelley.com/app/uploads/2022/01/JK_Homepage_2_675 x 546.webm" type="video/ogv">
Sorry, your browser doesn't support embedded videos.
</video>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat
consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam
obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed
commodi ducimus voluptates suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem ad voluptates reiciendis, facilis
molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem earum, nesciunt, fuga iusto amet
at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis porro cumque saepe laborum!
Impedit eaque debitis recusandae hic sed commodi ducimus voluptates suscipit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, nihil nam. Assumenda animi voluptatibus numquam, maiores at a quo est, repudiandae officiis maxime exercitationem
ad voluptates reiciendis, facilis molestiae id placeat sapiente quaerat consequuntur ab. Tempora ipsum ipsam aliquid vitae dolor repudiandae voluptatum expedita asperiores illo, eaque cupiditate exercitationem qui quaerat mollitia! Ipsa dolor dolorem
earum, nesciunt, fuga iusto amet at reiciendis architecto incidunt ullam obcaecati dolorum veritatis quae vero numquam magni, voluptas temporibus alias ipsam a quidem inventore! Temporibus aspernatur repudiandae praesentium quam consequuntur blanditiis
porro cumque saepe laborum! Impedit eaque debitis recusandae hic sed commodi ducimus voluptates suscipit.
</section>
<script src="js.js"></script>
</body>
</html>
So im currently trying to use React Bootstrap for my website. I'm confused how to make only one div to be scrollable and the others not. Here's my code in App.js
import * as React from 'react'
import Container from 'react-bootstrap/Container'
import Button from 'react-bootstrap/Button'
import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'
function App() {
return (
<Container fluid>
<Row style={{height: "100vh"}}>
<Col sm={4} className="border border-primary">
<div>Avatar</div>
</Col>
<Col className="border border-primary">
test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>
<div className="position-sticky">
stick please
</div>
</Col>
</Row>
</Container>
);
}
export default App
In the image, the <div>please stick</div> is not seen because it's far below and the <Col>avatar</Col> is scrollable when I wanted to make the text Avatar to stick.
Does anyone know how to make one div scroll independently while the other divs stays and cannot be scrolled? Thanks in advance
Give the scrollable div overflow-y: auto. One child of a container won't scroll until you give the height to its parent. In the following example, I've given height: 100%, because I want to divide the page into 2 parts which will take full height i.e (100vh). You can also give custom height i.e height: 300px;
Just add height on parent cotainer and overflow-y: auto to child element that you want to scroll.
body,
html {
height: 100%;
margin: 0;
}
div.container {
height: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
}
div.first {
background-color: burlywood;
padding: 1rem;
}
div.second {
background-color: darkcyan;
padding: 1rem;
overflow-y: auto;
}
<div class="container">
<div class="first">
first
</div>
<div class="second">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut totam nulla quae accusantium sunt provident saepe, quis fugit delectus? Possimus sed id dolore omnis facere harum vitae dolor reprehenderit. Tenetur. Ipsa quasi rem deleniti quidem ut corporis
s officia minima est labore dignissimos quia exercitationem unde! Libero deleniti in laudantium harum nihil reiciendis autem dolorum vero, non blanditiis sapiente quibusdam tenetur animi, dicta laboriosam quisquam sint repellat natus eius nostrum
reprehenderit. Veniam recusandae quod quaerat quis. Cumque eum ducimus, at deserunt nemo minus neque similique dolores rerum voluptas, necessitatibus quis aperiam consequuntur, error quo accusamus. Cum doloremque ut deserunt. Cupiditate, possimus
delectus. Dignissimos minima perspiciatis fugiat. Minima quaerat laborum veniam reprehenderit, ea reiciendis expedita explicabo nemo, recusandae harum, dolores vitae tenetur dolore itaque ducimus odit deserunt pariatur dolor facere molestiae unde
quos et. Ut, consectetur neque! Debitis dicta doloremque eaque ex aspernatur odit saepe omnis dignissimos veritatis ut. Earum dolores mollitia dolorem eligendi ad molestiae, saepe exercitationem harum magni doloribus, natus minima ratione aliquam
laudantium expedita! Nam odit harum consequuntur eaque quas, magni atque tenetur veniam dolor ipsum fuga sapiente vero molestias at consectetur ratione! Ex obcaecati nihil sed eum dicta impedit asperiores dolorum reiciendis vitae! Velit, qui esse
quos eveniet voluptas quia ipsum minus asperiores. Quas, deserunt hic nihil quam eligendi, voluptatem dolores ducimus nesciunt enim saepe officia eos quia blanditiis esse neque omnis aliquam! Ab quod harum maxime illum quam commodi cupiditate eaque,
esse vero nostrum, deleniti ut eum recusandae. Quos asperiores distinctio a debitis? Expedita illum minus modi facere reprehenderit animi, voluptate ipsum? Quis vel, voluptatem veniam, accusamus pariatur delectus aliquam voluptatum quisquam voluptatibus
odio earum itaque praesentium! Voluptate voluptatem expedita reiciendis pariatur aspernatur accusamus ut nihil! Cum id veniam repellendus. Sed, corrupti. Quam laborum corporis, ipsum iste ex, quas est nihil ipsa architecto tenetur, exercitationem
qui commodi repellat. Laboriosam sit nesciunt, quidem ipsum, similique vero optio vel aperiam nemo deleniti quas voluptas? Inventore nesciunt facere consequatur tempora ad ullam sint, commodi voluptate rem temporibus repellat aut dolores accusamus,
tenetur deleniti non quam necessitatibus praesentium fugiat harum iusto eveniet? Hic suscipit corrupti libero. Ipsa dignissimos optio et eveniet nulla itaque assumenda, voluptate a nostrum quisquam consectetur eum eaque magnam nobis provident, distinctio
omnis unde eius ipsam at labore enim iusto accusantium. Beatae, ut. Odio fugit atque, ad nobis incidunt tempora vitae ullam sapiente perferendis non quas aut eos animi minus optio aspernatur voluptates debitis! Nisi, sed a exercitationem ea iure ipsa
iste accusantium. Porro, distinctio voluptatem sequi qui dolore quidem quia odio optio ullam soluta adipisci perferendis, illum reiciendis temporibus quis atque quibusdam possimus laboriosam quae id consequuntur tempore! Ipsum excepturi sapiente iure!
Modi atque provident aut accusamus est, blanditiis architecto, nulla quis quibusdam, hic nobis eligendi explicabo dolorum voluptatem beatae voluptatum sunt repellendus quam! Suscipit eum cupiditate tempore illum sed modi expedita! Eos quas dolorum
id, consectetur recusandae aliquam error nisi labore autem ullam inventore deserunt consequuntur nihil dolore tenetur sit soluta tempore quod quis doloribus sequi! Accusamus repudiandae est possimus facilis! Ab error a, culpa eaque inventore sit amet
dolorum rem, quae omnis aperiam aut nesciunt voluptas ullam dolore reprehenderit ratione et enim magnam eveniet sint iste ipsam deserunt excepturi. Ratione. Harum corporis sunt autem aperiam provident pariatur dolore eveniet consequatur repellendus
voluptate ipsa impedit, numquam illo doloremque velit excepturi quo saepe. Obcaecati, dolore neque quas eum nisi at ducimus recusandae! Debitis rerum a sapiente numquam aut doloremque cum nemo eaque, incidunt at recusandae repellat odit aspernatur
nesciunt obcaecati non velit cumque blanditiis omnis facere vero quis eos ab? Magnam, earum. Iusto voluptates repellendus facere possimus porro ducimus dicta illo, repellat ab. Iste, at obcaecati quis, fuga accusantium molestias consectetur, nobis
praesentium recusandae deleniti ut veniam. Optio debitis labore odit doloremque. Adipisci ullam repellat provident culpa ab molestias autem voluptates tempore aspernatur delectus obcaecati, corrupti nesciunt aperiam? Perspiciatis, est doloribus quam
non hic minus at laudantium unde enim voluptates sapiente officia. Aut, fugit libero, voluptatem eum ipsum consectetur vitae dolores optio modi soluta reiciendis! Sunt eum explicabo reprehenderit iure ut ab. Corrupti eligendi fugit rem sunt libero
aperiam veritatis accusamus nesciunt! Doloremque praesentium eaque nulla itaque autem eum modi maiores, nobis aperiam odio ipsam dolorem optio est nesciunt dolores, sequi beatae corrupti voluptate fuga voluptatem nemo, error ullam debitis? Incidunt,
adipisci. Vitae enim, accusantium autem aspernatur voluptatum ullam aliquam eum reprehenderit repellat hic voluptatem porro quos sunt cumque quisquam incidunt sint blanditiis sapiente odio! Eius nostrum cumque, impedit omnis saepe rem. At excepturi
enim nihil quia laudantium architecto, velit blanditiis mollitia saepe repellat iste natus ipsam! Dolor repellat illo atque ut ducimus impedit similique porro. Delectus sed nihil voluptas ducimus perspiciatis. Ex cupiditate ipsum minima veritatis
recusandae? Soluta porro magnam itaque beatae quis! Facere nesciunt dicta minus blanditiis tempora cum, nisi, a asperiores quis recusandae dolor illum non sint vero hic?</div>
</div>
This code below is using float to adjust image beside content.
how could i have the same result not using float or positions but only css grid or/and flex-box?(aiming to implement the picture below which red section is just one div and yellow could be an image beside the red not over-lapping it)
img {
float: left;
}
span {
background-color: tomato;
}
<div>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos excepturi in modi nam nesciunt omnis quisquam, sed voluptates. Aspernatur at ea, explicabo facere illo iusto maiores nisi optio placeat quaerat quas quia ullam velit. Consequuntur culpa inventore saepe unde. Adipisci alias aspernatur blanditiis commodi consequuntur debitis dolorum ea eaque eos, est fugit ipsam iure, laudantium magni minima minus molestias mollitia neque officia pariatur perferendis quam quia quis reprehenderit sint tempore temporibus voluptatibus. Eos expedita nisi nobis quos reiciendis saepe tempora vero voluptas. Consequatur deleniti ea error Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet ex incidunt maiores molestiae nulla optio ratione rerum, sed voluptatem. Dolorum, earum, ipsa? Animi dolore doloremque eos, inventore ipsum itaque nobis nulla porro, qui rem repellendus reprehenderit saepe sapiente tenetur totam vel, velit voluptatibus. Amet ducimus earum fuga fugit labore, magnam nemo optio praesentium quidem repellendus sit veniam veritatis. Ab accusamus culpa cum cumque, dicta dolore doloremque earum esse eveniet facilis iure iusto laboriosam maxime nihil possimus provident quaerat, quam quas quia quod repellat, repellendus repudiandae rerum Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ab alias asperiores consectetur consequatur debitis dolore esse est eveniet illum laboriosam libero magni, molestias mollitia nemo nulla numquam odio perspiciatis quis similique temporibus vero vitae voluptates? Aliquid aperiam aut deleniti dignissimos incidunt necessitatibus perferendis velit. Accusantium animi aperiam architecto aspernatur atque consequuntur distinctio dolor dolorem ea eius esse et harum illum impedit in incidunt ipsam ipsum iste libero magnam neque perspiciatis porro qui, reprehenderit soluta tempore veniam vitae. Cupiditate ea eligendi fugiat officiis perferendis provident repellendus sit, sunt velit voluptatem! Asperiores consequatur deserunt inventore, minus molestias neque similique velit voluptates?sapiente sit tempore tenetur ullam ut vel voluptate. Doloribus eveniet facilis ipsam tenetur voluptatem. eum ipsum maxime minus, officia omnis optio praesentium quisquam ratione, recusandae rerum sunt tempore!</span>
</div>
Visual example of the question
You could do something like this. I've used approximations for the size of the div's just from what I see in your problem. But the end result is the same I suppose
.main{
display:flex;
background-color : red;
height:100vh;
}
.main div{
display:flex;
align-items: center;
}
p, span{
padding: 10px;
}
.main div:nth-child(1){
flex: 1;
height:50%;
background-color: yellow;
}
.main div:nth-child(2){
flex: 2;
height:50%;
}
<div class="main">
<div>
<p>Section 1</p>
</div>
<div>
<span>Section 2</span>
</div>
</div>
Hope this answer will helpful for you.
.flex_box {
display: flex;
justify-content: space-between;
}
.flex_box img {
width: 50%;
object-fit: contain;
}
.flex_box p {
width: 50%;
background-color: tomato;
color: #ffffff;
padding: 20px;
text-align: justify;
}
<div class="flex_box">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos excepturi in modi nam nesciunt omnis quisquam, sed voluptates. Aspernatur at ea, explicabo facere illo iusto maiores nisi optio placeat quaerat quas quia ullam velit. Consequuntur culpa inventore saepe unde. Adipisci alias aspernatur blanditiis commodi consequuntur debitis dolorum ea eaque eos, est fugit ipsam iure, laudantium magni minima minus molestias mollitia neque officia pariatur perferendis quam quia quis reprehenderit sint tempore temporibus voluptatibus. Eos expedita nisi nobis quos reiciendis saepe tempora vero voluptas. Consequatur deleniti ea error Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet ex incidunt maiores molestiae nulla optio ratione rerum, sed voluptatem. Dolorum, earum, ipsa? Animi dolore doloremque eos, inventore ipsum itaque nobis nulla porro, qui rem repellendus reprehenderit saepe sapiente tenetur totam vel, velit voluptatibus. Amet ducimus earum fuga fugit labore, magnam nemo optio praesentium quidem repellendus sit veniam veritatis. Ab accusamus culpa cum cumque, dicta dolore doloremque earum esse eveniet facilis iure iusto laboriosam maxime nihil possimus provident quaerat, quam quas quia quod repellat, repellendus repudiandae rerum Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ab alias asperiores consectetur consequatur debitis dolore esse est eveniet illum laboriosam libero magni, molestias mollitia nemo nulla numquam odio perspiciatis quis similique temporibus vero vitae voluptates? Aliquid aperiam aut deleniti dignissimos incidunt necessitatibus perferendis velit. Accusantium animi aperiam architecto aspernatur atque consequuntur distinctio dolor dolorem ea eius esse et harum illum impedit in incidunt ipsam ipsum iste libero magnam neque perspiciatis porro qui, reprehenderit soluta tempore veniam vitae. Cupiditate ea eligendi fugiat officiis perferendis provident repellendus sit, sunt velit voluptatem! Asperiores consequatur deserunt inventore, minus molestias neque similique velit voluptates? sapiente sit tempore tenetur ullam ut vel voluptate. Doloribus eveniet facilis ipsam tenetur voluptatem. eum ipsum maxime minus, officia omnis optio praesentium quisquam ratione, recusandae rerum sunt tempore!</p>
</div>
Everywhere I look, the scrollbar-color property has full support in Firefox.
When I try it, scrollbar-width: thin is applied, but not scrollbar-color:
* {
scrollbar-width: thin;
scrollbar-color: red transparent;
}
p {
height: 100px;
overflow-y: scroll;
border: 1px solid;
}
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab ipsam iste numquam saepe, praesentium iusto porro sed amet consequuntur nemo voluptatem, qui itaque dolore facilis dolor eius illo, doloribus culpa harum. Incidunt similique quos aspernatur odit,
magnam dicta consequatur sit modi quo pariatur quidem illum voluptatum placeat non aliquam maxime expedita, nemo in repellat rem. Maiores ipsa veniam, illum dolores inventore in eligendi ea unde quas excepturi iure beatae molestiae accusantium magnam
accusamus ut cumque eaque. Ex deserunt aspernatur eaque aut, voluptates aliquid molestiae eius ad a molestias, velit, totam est quidem. Dicta error eius dolorum, modi blanditiis necessitatibus ad!Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab ipsam iste numquam saepe, praesentium iusto porro sed amet consequuntur nemo voluptatem, qui itaque dolore facilis dolor eius illo, doloribus culpa harum. Incidunt similique quos aspernatur odit,
magnam dicta consequatur sit modi quo pariatur quidem illum voluptatum placeat non aliquam maxime expedita, nemo in repellat rem. Maiores ipsa veniam, illum dolores inventore in eligendi ea unde quas excepturi iure beatae molestiae accusantium magnam
accusamus ut cumque eaque. Ex deserunt aspernatur eaque aut, voluptates aliquid molestiae eius ad a molestias, velit, totam est quidem. Dicta error eius dolorum, modi blanditiis necessitatibus ad!Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab ipsam iste numquam saepe, praesentium iusto porro sed amet consequuntur nemo voluptatem, qui itaque dolore facilis dolor eius illo, doloribus culpa harum. Incidunt similique quos aspernatur odit,
magnam dicta consequatur sit modi quo pariatur quidem illum voluptatum placeat non aliquam maxime expedita, nemo in repellat rem. Maiores ipsa veniam, illum dolores inventore in eligendi ea unde quas excepturi iure beatae molestiae accusantium magnam
accusamus ut cumque eaque. Ex deserunt aspernatur eaque aut, voluptates aliquid molestiae eius ad a molestias, velit, totam est quidem. Dicta error eius dolorum, modi blanditiis necessitatibus ad!</p>
This comment suggests you need to change it in the Firefox settings but I can't find anywhere to do this.
Am I missing something or has it suddenly become deprecated?
UPDATE
Looking in about:config, both properties are set to true:
i want to display dropdown menu upon clicking a button. But the dropdown menu is displayed not close to the button clicked and remains fixed when scrolling page vertically. Below is the code
<div>
<div onClick={this.handle_click}>
{toggle}
</div>
{this.movie_list.opened &&
<div className="dropdown_contents">
{React.Children.map(
contents,
(child, index) => { return (
child && <div
key={index}
className="dropdown_item"
onClick={this.handle_item_click}>{child}
</div>); }
)}
</div>
}
</div>);
css is as below
.dropdown_wrapper {
position: relative;
}
.dropdown_contents {
position: absolute;
background-color: $white;
/*position: absolute;*/
box-shadow: 0 8px 14px 0 rgba(6,28,63,0.3);
z-index: 10;
}
.dropdown_item {
min-width: 150px;
min-height: 40px;
display: flex;
padding: 8px;
align-items: center;
cursor: pointer;
}
when i add the class dropdown-wrapper to the topmost div element like below in the above code
<div className="dropdown_wrapper">
<div onClick={this.handle_click}>
{toggle}
</div>
The dropdown menu is not visible properly. I see that its hidden between some other element. Could some pls help with this. thanks.
You set the position on your wrapper to relative and set the z-index for your absolute positioned dropdown element.
.dropdown_wrapper {
position: relative;
}
.dropdown_contents {
background-color: orange;
width: 100px;
position: absolute;
top: 100%;
left: 0;
z-index: 100;
}
<div class="dropdown_wrapper">
<button>
Button
</button>
<div class="dropdown_contents">
<div>Item</div>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi consequatur perspiciatis suscipit labore accusamus debitis adipisci praesentium accusantium dolor, possimus, itaque? Accusantium voluptate autem aperiam, recusandae facere ea eligendi temporibus qui deserunt nam commodi rerum aspernatur hic repellendus numquam odio deleniti. Modi beatae voluptate similique illo necessitatibus in, vero eaque. Aspernatur quis vero architecto natus laudantium non ullam necessitatibus, dolores commodi doloremque beatae? Atque reiciendis, minima deserunt ipsa temporibus perferendis facilis magnam ratione, nemo nobis. Placeat veritatis sunt officiis at officia dolore porro, obcaecati vero! Aspernatur magni sapiente quisquam maiores ducimus cumque sunt eos modi amet reiciendis, et, laudantium nihil.</p>
<p>Quis incidunt numquam, illum aut perspiciatis quae eum pariatur reprehenderit laborum a consequuntur aspernatur, atque ratione rem nisi unde quidem harum ab dignissimos consectetur cupiditate earum maxime temporibus. Illum rem, fugit, quidem tempore excepturi necessitatibus minima enim id similique esse, inventore, quod! Consequatur est ea, in deserunt? Fugiat assumenda omnis illo eveniet suscipit commodi nostrum quos cum odit earum. A, natus iusto repellat sint aspernatur nobis nostrum, qui fuga fugiat eligendi molestiae eius rem reiciendis architecto id temporibus ratione. Quasi officia quia, dolorum voluptate, quam libero voluptates vitae error nostrum officiis in. Impedit eos hic fuga incidunt cum vitae ex.</p>
<p>Magnam ut, quidem fugit dignissimos! Debitis praesentium, sed laborum ea repellendus itaque quisquam nesciunt possimus veritatis reprehenderit unde quidem, dolorum iste! Neque quos voluptate odio iusto quis, corporis cupiditate qui provident similique, rerum ratione, minima aspernatur. Cupiditate est laudantium, accusamus cum quas, ab rerum, consequatur nihil et itaque excepturi debitis quod quidem ducimus eaque minima libero doloribus reprehenderit inventore. Fugiat nulla, cupiditate eum quam, non vero magnam accusantium, numquam, rem laborum rerum quaerat. Nulla fugit repellendus iusto neque expedita esse ullam pariatur, quae fugiat modi asperiores unde alias voluptates quas ad quos dicta, soluta voluptatibus. Itaque totam quisquam modi temporibus.</p>
<p>Atque amet ducimus quibusdam voluptas, recusandae natus, doloremque reiciendis. Est sit non possimus libero at animi illo beatae nihil excepturi quos omnis, atque repellendus esse harum similique debitis delectus voluptate! Fugit saepe incidunt eos voluptatibus, dignissimos excepturi obcaecati velit expedita odit ipsum placeat molestias unde esse cupiditate laborum ratione nihil veniam totam rem magnam recusandae itaque, doloribus aut commodi. Amet, illum quae necessitatibus sint similique, velit officiis tempora neque corporis rem, ipsam ad maxime distinctio ea. Eius, inventore? Amet corporis fuga sed, perferendis quam ut dignissimos a molestiae. Cupiditate, saepe, totam. Ratione laborum a eaque. Recusandae, illum incidunt eum eveniet?</p>
<p>Porro autem veniam doloribus aliquam, repellat excepturi libero maiores soluta cumque impedit eligendi cupiditate quo, recusandae nesciunt ex optio, voluptas quia sit. Nobis nisi soluta, ab odit quae. Quia, minus placeat numquam, quisquam adipisci vel quaerat omnis quae! Ut odit, rerum. Fugiat totam dolores itaque sint repellat quo, aliquid obcaecati quasi ducimus architecto minima commodi eum quod qui laboriosam maiores voluptatibus. Debitis nulla autem soluta doloribus ipsa hic, harum mollitia incidunt sapiente, pariatur velit veniam maiores, repudiandae, consequatur quae accusantium at cupiditate illum dignissimos reprehenderit. Facere tenetur, voluptates dicta nesciunt, aliquam, neque cum est mollitia veritatis sequi magnam et cumque.</p>
<p>Explicabo possimus laboriosam quas facilis vero impedit modi enim iusto tempora magnam, at, ratione, amet qui consectetur. Alias est accusantium molestiae consectetur non enim ipsam harum, a, magnam sequi praesentium doloremque at iure iusto unde obcaecati veniam laudantium quidem quos molestias, doloribus quae id quod aliquid commodi. Unde sequi dicta doloremque dolorum repellat ipsam. Sit eos iusto reiciendis tempore hic magni corporis molestias, delectus consequuntur non obcaecati neque voluptatum assumenda, aut rerum iure autem tempora reprehenderit cumque tenetur quibusdam nihil facilis, nemo eveniet nesciunt. Totam, ea, explicabo. Iure veniam neque, consequuntur rem, libero obcaecati eius dignissimos exercitationem. Consequuntur, libero, temporibus.</p>
<p>Ad magnam corporis iure culpa dolorem vero quia, neque, ipsa quas. Qui odio perspiciatis debitis aperiam asperiores, nobis, velit ipsum tempora fuga possimus tenetur eos reprehenderit non ratione. Nesciunt inventore, suscipit architecto eligendi, nemo omnis minus. Quisquam et minima animi accusamus eligendi. Ullam pariatur, quia quidem molestias dolores, expedita. Vero magni tempore aliquid iure tenetur mollitia hic unde obcaecati enim at amet adipisci cum fugiat quam fuga eveniet saepe illum, reiciendis! Atque suscipit molestiae ex assumenda, consequuntur voluptates aliquid voluptatum excepturi optio velit facere reiciendis voluptate natus soluta asperiores praesentium necessitatibus id omnis. Explicabo laborum earum, dolore tenetur, ipsam numquam.</p>
<p>Dolorem eos, quaerat officiis nobis. Officiis rem eligendi temporibus dolore expedita, similique reiciendis ab magnam, inventore eaque fugiat nobis voluptatem voluptatum dolorum obcaecati excepturi molestias iusto unde aperiam a velit. Quasi minima perspiciatis dolor inventore, quisquam laudantium porro veniam possimus, dignissimos suscipit, ipsum aliquam iste nulla aut incidunt praesentium tenetur doloribus laborum ab animi. Neque hic, tempore enim eius accusantium fugiat architecto, assumenda laborum sit aut cumque natus, magni voluptatem iusto eligendi est modi unde aliquam quaerat. Perspiciatis quidem, cumque ex libero accusamus, magnam consequuntur quis similique facilis! Fuga dignissimos fugit suscipit harum hic blanditiis amet magnam nam cumque nostrum.</p>