i want to make a discord channels kinda scrollable list thing but if i ever change the overflow property of the div that it's contained in, it's width becomes 0px
example of what i want to do:
html
<div class="channels">
<div class="dummyChannel"></div>
<div class="channelButton"># bruh</div>
<div class="channelButton"># bruh</div>
<div class="channelButton"># bruh</div>
</div>
css
.channelButton{
background-color: var(--bg-color);
margin: 10px;
border-radius: var(--roundness);
width: 200px;
padding: 5px;
padding-left: 10px;
box-shadow: 0 2.5px 15px var(--shadow-color);
transition: 0.25s;
}
.channelButton:hover{
box-shadow: 0 5px 25px var(--shadow-color);
}
.channelButton:active{
transition: 0.1s;
box-shadow: 0 0px 0px var(--shadow-color);
}
.channels{
width: 235px;
display: flex;
flex-direction: column;
overflow-x: visible;
overflow-y: auto;
}
.dummyChannel{
height: 70px;
}
Related
I have a scrollable list of divs that each have a border-radius and box-shadow. To allow an element below the list to remain visible, the list is cut off using clip-shape. I would like to keep both the shadow and border radius of the clipped rectangles. I have found several working examples for either the shadow or the radius, but I can't find anything that can do both at the same time.
#main {
background-color: lightblue;
position: relative;
height: 100vh;
width: 100vw;
overflow-y: hidden;
}
body {
margin: 0;
}
#overlay {
width: 100vw;
height: 95vh;
overflow-y: scroll;
position: absolute;
clip-path: inset(5vh 0px 0px);
padding-top: 5vh;
}
#overlay::-webkit-scrollbar {
display: none;
}
.overlay-card {
margin: 10px 10px 30px;
background-color: white;
border-radius: 10px;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
height: 500px;
padding: 30px;
}
<div id="main">
<center>root/header</center>
<div id="overlay">
<div class="overlay-card">overlay content</div>
<div class="overlay-card">overlay content</div>
</div>
</div>
Is the effect above possible? Am I approaching this problem correctly?
How can I make smooth transition of block with margin? See my code below:
.counter {
margin: 5rem auto;
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
width: 40rem;
border-radius: 8px;
padding: 1rem;
text-align: center;
background-color: #f4f0fa;
}
.value {
font-size: 2rem;
color: #3c0080;
margin: 2rem 0;
font-weight: bold;
transition: all 1s;
max-height: 500px;
overflow: hidden;
}
.value.hidden {
margin: 0;
max-height: 0px;
}
<main class="counter">
<h1>Counter</h1>
<div id="val" class="value">10</div>
<button onClick="document.getElementById('val').classList.add('hidden')">Hide Counter</button>
<button onClick="document.getElementById('val').classList.remove('hidden')">Show Counter</button>
</main>
If you click on "Hide Counter", it is not smooth, but it looks like there are two different transitions (look on codepen). Why and how can I make smooth transition?
I just decided to change max-height to height and setting height to a fixed number
body {
display: flex;
height: calc(100vh - 16px);
align-items: center;
}
.counter {
margin: 0px auto;
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
width: calc(100vw - 48px);
border-radius: 8px;
padding: 1rem;
text-align: center;
background-color: #f4f0fa;
}
.value {
font-size: 2rem;
color: #3c0080;
margin: 2rem 0;
font-weight: bold;
transition: all 1s;
height: 50px;
overflow: hidden;
}
.value.hidden {
margin: 0;
height: 0px;
}
<main class="counter">
<h1>Counter</h1>
<div id="val" class="value">10</div>
<button onclick="document.getElementById('val').classList.add('hidden')">Hide Counter</button>
<button onclick="document.getElementById('val').classList.remove('hidden')">Show Counter</button>
</main>
I have found the bug in your code... you just need to go on line no. 24 in css in your codepen and change max-height to height and you are all set to go!!
Terry is right in his comment: transitioning e.g. something with actual height 50px from max-height: 100px; to max-height: 0; produces visible change only during the second half of animation, when it reaches the actual height.
CSS can transition or animate only explicitly given values.
Satyam is also right suggesting you can transition real effective height to get all transitions run simultaneously. So you have to either give element explicit (max-)height in CSS, or you can obtain it from actual computedStyle before triggering the transition. There are few important caveats, see comments POC:
.counter {
margin: 0 auto;
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
border-radius: 8px;
padding: 1rem;
text-align: center;
background-color: #f4f0fa;
}
.value {
font-size: 2rem;
color: #3c0080;
font-weight: bold;
transition: all 1s linear;
overflow: hidden;
background-color: grey;
margin: 2rem 0;
height: auto; /* you cannot transition this;
will be set in inline style
with JS */
}
.value.hidden {
height: 0px !important; /* to fight inline style, !important is necessary */
margin: 0 0;
font-size: 0;
}
<main class="counter">
<div id="val" class="value">10</div>
<button onClick="
if(!val.style.height){
val.style.height = getComputedStyle(val).height
}
/* caveat: 'seal' that value to give transition chance to start at it
(enforce style recalc and reflow)
*/
val.getBoundingClientRect();
val.classList.toggle('hidden');">Toggle Counter</button>
</main>
Recently I fixed my dropdown menu which used to drop with all the other un-hovered buttons also changing their positions. The current issue I just noticed accidentally. When the page is all scrolled up, i.e. I am at starting position, dropdown works as expected. But if I scroll a little bit down, and then hover over button, the dropdown appears where it was before but I am expecting it to appear below the button. This is the snap of code I am using:
.tut_navi_buttons .drop_down_navi_content {
display: none;
right: 0;
position: unset;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
height: 0px;
transition: height 1s ease;
}
.tut_navi_buttons:hover .drop_down_navi_content {
position: fixed;
display: block;
height: auto;
/*height: auto;*/
/*box-shadow: 0px 2px 1px grey;*/
}
#tut_navi {
overflow: hidden;
padding-top: 10px;
float: left;
padding-left: 5px;
/*display: inline-block;*/
}
.tut_navi_buttons .drop_down_navi {
overflow: hidden;
border: none;
outline: none;
color: black;
background-color: inherit;
}
.tut_navi_buttons {
width: auto;
height: 20px;
margin: 10px;
/*margin-bottom: 20px;*/
/*padding: 5px;*/
position: relative;
display: inline-block;
}
<div id='tut_navi'>
<div class="tut_navi_buttons">
<button class="drop_down_navi">Python Basics <i class="fa fa-angle-down"></i></button>
<div class="drop_down_navi_content">
Beginner
Pre-intermediate
Intermediate
</div>
</div>
Please refer to the images I am attaching as they will make it clear.
After scrolling a bit
While at top of page
Remove position:unset; replace with position:relative;
Separate the first two classes in the style sheet because it seems to be clashing
I am dynamically creating a bunch of cards. These cards will have an image and some text. When hovering over the image within the card, a bigger image is displayed in the middle of the page.
There are a total of 16 cards on the page. There are four rows with 4 cards in each row. The issue is: when hovering over the 1st card, all the text or images of the next 15 cards overlap the large image that appears when hovering over the small image on the 1st card. When hovering over let’s say the 3rd card, the image is only overlapped by the text/images of cards that appear after that 3rd card. If I hover over the image of the last card on the page, this issue does not occur. Therefore, all the div’s after the card that is being hovered over cause this issue of overlapping.
Things I have tried: z-index which does not work because each card is being generated dynamically. I have also tried to change the position: static or inherit to see if that would help.
Not sure what the problem is and how to fix it?
<div class="biz-card center-block">
<div class="biz-container">
<div class="biz-row">
<div class="col-sm-6">
<div class="biz-photo">
<div class="rounded biz-wrapper"></div>
</div>
</div>
<div class="col-sm-6" style="display: flex;">
<div class="biz-content">
<h6 href="#home">John Doe</h6>
<p class="left-align">Name</p>
</div>
</div>
</div>
</div>
</div>
.biz-card {
min-width: 350px;
max-width: 350px;
min-height: 250px;
max-height: 250px;
border: thin;
border-color: lightgrey;
box-shadow: 3px 6px 6px -2px rgba(0,0,0,0.58);
z-index: 1;
}
.biz-container {
padding-right: 0;
padding-left: 0;
margin-right: auto;
margin-left: auto;
height: 250px;
}
.biz-row {
display: flex;
align-items: center;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
height: 250px;
}
.biz-photo {
position: relative;
display: block;
width: 145px;
height: 64px;
}
.biz-photodetailed {
display: none;
background: #424242;
opacity: 1;
filter: alpha(opacity=100); /* For IE8 and earlier */
z-index: 1000;
bottom: 0;
height: 848px;
width: 605px;
/*margin: auto;*/
position: fixed;
top: 50%;
left: 50%;
margin-top: -424px; /* Half the height */
margin-left: -302px; /* Half the width */
border: 2px solid #fff;
box-shadow: 10px 10px 5px #ccc;
-moz-box-shadow: 10px 10px 5px #ccc;
-webkit-box-shadow: 10px 10px 5px #ccc;
/*-khtml-box-shadow: 10px 10px 5px #ccc;*/
}
.biz-photo:hover .biz-photodetailed {
display:block;
}
Would anyone be able to help out?
https://jsfiddle.net/0Lfzbzc5/2/
in here I am trying to make the notification box on top of the body class div but couldn't do it the logic says positioned elements should be on top of the not positioned elements but that isn't happenning
tried even making body class div relative and giving it z-index but failed too
structure of notification box is an absolute element in relative element in absolute element (for CSS animation issues)
HTML
<div class="notiIcon glyphicon glyphicon-globe">
</div>
<div class='notiAbs '>
<div class='notiContainer'>
<div class="notiBox">
<div class="notiHeader">
<span class="notiHeaderSpan">notifications</span>
</div>
<div class="notiBody">
<div class="notiElement">Collaboratively enable high-quality imperatives before ubiquitous paradigms.
</div>
<div class="notiElement">Credibly productize customized services whereas.</div>
<div class="notiElement">Efficiently embrace real-time markets without.</div>
<div class="notiElement">Synergistically simplify collaborative web services.</div>
<div class="notiElement">Intrinsicly evisculate magnetic e-services through.</div>
<div class="notiElement">Holisticly build customer directed technologies.</div>
<div class="notiElement">Phosfluorescently synthesize team driven strategic.</div>
</div>
<div class="notiFooter"><span class="notiHeaderSpan">See All</span></div>
</div>
</div>
</div>
<div class="body">aasdasdasdasdasdasdas</div>
CSS
.notiAbs{
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
/* overflow-y: hidden; */
height: 500px;
width: 500px;
/* overflow-x: hidden; */
overflow-y: hidden;
margin: 0 auto;
padding-left: 50px;
}
.notiContainer{
position: relative;
}
.notiIcon{
z-index: 5;
position: relative;
width:100%;
text-align: center;
font-size: 25;
cursor: pointer;
padding-top: 10px;
}
.notiIconNumber{
position: relative;
font-size: 15px;
color: white;
background-color: red;
top: -10;
left: -9;
padding: 2px;
}
.notiBox{
z-index: 4;
position: absolute;
height: 400px;
width: 400px;
display: block;
padding-top: 10px;
box-shadow: rgba(0, 0, 0, 0.298039) 0px 4px 7px;
}
.notiElement{
overflow-wrap:break-word;
font-size: 17px;
padding: 10 0px;
border-bottom-style: solid;
border-bottom-width: thin;
border-bottom-color: lightgray;
}
.notiHeader,.notiFooter{
text-align: center;
font-size: 20px;
font-weight: bold;
height: 15%;
display: table;
width: 100%;
}
.notiHeaderSpan,.notiFooterSpan{
display: table-cell;
vertical-align: middle;
}
.notiFooter{
box-shadow: 0px -4px 7px rgba(0, 0, 0, 0.1);
cursor: pointer;
}
.notiHeader{
box-shadow: 0px 4px 7px rgba(0, 0, 0, 0.1);
}
.notiBody{
padding: 20px;
overflow: auto;
height:70%;
}
.body{
}
It is on top but the background is transparent so it makes the illusion that it's not. Just set a background color as follows :
.notiBox{
z-index: 4;
position: absolute;
height: 400px;
width: 400px;
padding-top: 10px;
border-style:solid;
background:#666;
}
Check the Fiddle.
Your notification box which I believe is the element with class "notiBox" is on top. The reason why it appears not to be is because it has an inherited background-color of transparent.
If you set the background-color property to say "yellow" (for examples sake) you will see that it is on top of the element with class "body".
Does that make sense? I can explain further if you need me to.
I've updated my answer as looking at your HTML again i've realised that the element with class "notiBox" is probably the only element (and it's contents) you want to appear on top