Skip to content

Instantly share code, notes, and snippets.

@deyvisonborges

deyvisonborges/resolve show dropdown in overflow

Created August 8, 2024 03:06
Show Gist options
  • Save deyvisonborges/e7bb51f8f5814ee179140c7ff5f81119 to your computer and use it in GitHub Desktop.
Save deyvisonborges/e7bb51f8f5814ee179140c7ff5f81119 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
resolve show dropdown in overflow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
html,
body {
height: 100%;
}
body {
min-height: 100vh;
margin: 0;
}
.main {
background: red;
height: 100%;
width: 100%;
position: relative; /* Add this line */
}
.sidesheet {
background: blue;
display: flex;
flex-direction: column;
gap: 24px;
height: calc(100% - 64px);
padding: 24px;
overflow: auto;
position: fixed;
right: 0;
top: 0;
width: 320px;
}
.sidesheet::-webkit-scrollbar {
all: unset;
}
/* .list {
background: orange;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
gap: 40px;
margin: 0;
padding: 0;
position: relative;
}
.list::before {
content: "Unordened list";
display: block;
overflow: visible;
position: absolute;
left: 15px;
top: 12px;
} */
.product {
background: white;
height: fit-content;
position: relative;
width: 100%;
flex-shrink: 0;
}
.product:hover::before {
display: flex;
align-items: flex-end;
background: yellow;
content: " ";
width: 400px;
height: 120px;
position: fixed;
margin-left: -150px;
z-index: 3; /* Ensure the yellow box is above products */
}
</style>
</head>
<body>
<div class="main">
<div class="sidesheet">
<div class="list"></div>
<div class="product">
<p>Produto 001</p>
<span>R$ 129.90</span>
</div>
<div class="product">
<p>Produto 002</p>
<span>R$ 139.90</span>
</div>
<div class="product">
<p>Produto 003</p>
<span>R$ 149.90</span>
</div>
<div class="product">
<p>Produto 004</p>
<span>R$ 159.90</span>
</div>
<div class="product">
<p>Produto 005</p>
<span>R$ 169.90</span>
</div>
<div class="product">
<p>Produto 006</p>
<span>R$ 179.90</span>
</div>
<div class="product">
<p>Produto 007</p>
<span>R$ 189.90</span>
</div>
<div class="product">
<p>Produto 008</p>
<span>R$ 199.90</span>
</div>
<div class="product">
<p>Produto 009</p>
<span>R$ 209.90</span>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment