I'm creating a webpage with the below SVG which is a combination of two different SVG icon's code.
I want to change the visibility of icons from visible to hidden and vice versa upon mouseover.
Below CSS I've written for the same, but it is not working.
#icon1:hover {
visibility: hidden;
}
#icon2:hover {
visibility: visible;
}
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="#E0EADF" class="bi bi-emoji-smile mr-2" viewBox="0 0 17 17" style="position: relative;top: 0px;left: 0px;">
<path visibility="visible" d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path visibility="visible" id="icon1" d="M4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm4 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5z"/>
<path visibility="hidden" id="icon2" d="M4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm1.757-.437a.5.5 0 0 1 .68.194.934.934 0 0 0 .813.493c.339 0 .645-.19.813-.493a.5.5 0 1 1 .874.486A1.934 1.934 0 0 1 10.25 7.75c-.73 0-1.356-.412-1.687-1.007a.5.5 0 0 1 .194-.68z"/>
</svg>
Can you please guide me on how to achieve this? Also is it possible to create a CSS animation so that the visibility will be changed infinitely with 5s interval?
Try to add svg infront :
svg:hover #icon1{
visibility: hidden;
}
svg:hover #icon2{
visibility: visible;
}
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="violet" class="bi bi-emoji-smile mr-2" viewBox="0 0 17 17" style="position: relative;top: 0px;left: 0px;">
<path visibility="visible" d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path visibility="visible" id="icon1" d="M4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm4 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5z"/>
<path visibility="hidden" id="icon2" d="M4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm1.757-.437a.5.5 0 0 1 .68.194.934.934 0 0 0 .813.493c.339 0 .645-.19.813-.493a.5.5 0 1 1 .874.486A1.934 1.934 0 0 1 10.25 7.75c-.73 0-1.356-.412-1.687-1.007a.5.5 0 0 1 .194-.68z"/>
</svg>
Seems to work fine but once you set visibility to hidden you are no longer hovering. Perhaps use stroke color transparent instead?
Then add a transition.
svg {
height: 90vh;
display: block;
margin: 2em auto;
}
svg path {
stroke: red;
fill: none;
transition: stroke 1s ease;
}
#icon1:hover,
#icon2:hover {
stroke: transparent;
}
<svg xmlns="http://www.w3.org/2000/svg" fill="#E0EADF" class="bi bi-emoji-smile mr-2" viewBox="0 0 30 30">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path id="icon1" d="M4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm4 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5z"/>
<path visibility="hidden" id="icon2" d="M4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm1.757-.437a.5.5 0 0 1 .68.194.934.934 0 0 0 .813.493c.339 0 .645-.19.813-.493a.5.5 0 1 1 .874.486A1.934 1.934 0 0 1 10.25 7.75c-.73 0-1.356-.412-1.687-1.007a.5.5 0 0 1 .194-.68z"/>
</svg>
For CSS animation to change the visibility of icon try below
.icon_animate_1{
animation: icon_frame1 3s step-end infinite;
}
#keyframes icon_frame1{
0% {opacity: 1;}
90% {opacity: 0;}
100% {opacity: 1;}
}
.icon_animate_2{
animation: icon_frame2 3s step-end infinite;
}
#keyframes icon_frame2{
0% {opacity: 0;}
90% {opacity: 1;}
100% {opacity: 0;}
}
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="#5F77F1" class="bi bi-emoji-smile mr-2" viewBox="0 0 17 17">
<path visibility="visible" d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path class="icon_animate_1" d="M4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm4 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5z"/>
<path class="icon_animate_2" d="M4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm1.757-.437a.5.5 0 0 1 .68.194.934.934 0 0 0 .813.493c.339 0 .645-.19.813-.493a.5.5 0 1 1 .874.486A1.934 1.934 0 0 1 10.25 7.75c-.73 0-1.356-.412-1.687-1.007a.5.5 0 0 1 .194-.68z"/>
</svg>
Related
How can I fix the <a> and make it contain all the SVG icon.
and also plz plz, How to remove the underline area of the <a> element??
photo for illustration
a {
background-color: rgba(42, 165, 42, 0.596);
text-decoration: none;
display: inline-block;
}
svg {
background-color: rgba(165, 42, 42, 0.596);
height: 50px
}
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.28 16.28">
<path
d="M8.14 3.96a4.17 4.17 0 0 0-4.17 4.17 4.16 4.16 0 0 0 4.17 4.17 4.17 4.17 0 0 0 4.17-4.17A4.17 4.17 0 0 0 8.2 3.96zm0 6.88a2.71 2.71 0 1 1 0-5.42 2.71 2.71 0 0 1 2.71 2.71 2.72 2.72 0 0 1-2.71 2.72zm5.32-7a1 1 0 0 1-1.707.707 1 1 0 0 1 .707-1.707 1 1 0 0 1 1 1zm2.76 1a4.83 4.83 0 0 0-1.32-3.4A4.84 4.84 0 0 0 11.49.12a107.23 107.23 0 0 0-6.71 0 4.87 4.87 0 0 0-3.41 1.31A4.86 4.86 0 0 0 .05 4.84a107.55 107.55 0 0 0 0 6.72 4.86 4.86 0 0 0 1.32 3.41 4.79 4.79 0 0 0 3.41 1.23c1.34.08 5.37.08 6.71 0a4.79 4.79 0 0 0 3.41-1.3 4.86 4.86 0 0 0 1.3-3.41c.08-1.34.08-5.37 0-6.71zM14.48 13a2.76 2.76 0 0 1-1.54 1.55c-1.07.42-3.62.32-4.8.32s-3.73.1-4.8-.32A2.75 2.75 0 0 1 1.79 13c-.43-1.07-.33-3.62-.33-4.8s-.09-3.73.33-4.8a2.73 2.73 0 0 1 1.55-1.54c1.07-.43 3.61-.33 4.8-.33s3.73-.1 4.8.32a2.75 2.75 0 0 1 1.55 1.55c.42 1.07.32 3.62.32 4.8s.1 3.73-.33 4.8z"
/>
</svg>
</a>
The SVG icon is 50px X 50px, but since the a is usually a inline element it gives some extra space,
Just like a text which is an inline element, that gives space up, and down
This causes the browser to think that ,svg which is inside a is an inline element, and gives space.
To perfectly make the a element's width and height equal to svg
Add display: inline-flex to parent's(a) css
Add display: inline-table to child's(svg) css
Example snippet
a {
background-color: rgba(42, 165, 42, 0.596);
text-decoration: none;
display: inline-flex;
}
svg {
background-color: rgba(165, 42, 42, 0.596);
height: 50px;
display: inline-table;
}
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.28 16.28">
<path
d="M8.14 3.96a4.17 4.17 0 0 0-4.17 4.17 4.16 4.16 0 0 0 4.17 4.17 4.17 4.17 0 0 0 4.17-4.17A4.17 4.17 0 0 0 8.2 3.96zm0 6.88a2.71 2.71 0 1 1 0-5.42 2.71 2.71 0 0 1 2.71 2.71 2.72 2.72 0 0 1-2.71 2.72zm5.32-7a1 1 0 0 1-1.707.707 1 1 0 0 1 .707-1.707 1 1 0 0 1 1 1zm2.76 1a4.83 4.83 0 0 0-1.32-3.4A4.84 4.84 0 0 0 11.49.12a107.23 107.23 0 0 0-6.71 0 4.87 4.87 0 0 0-3.41 1.31A4.86 4.86 0 0 0 .05 4.84a107.55 107.55 0 0 0 0 6.72 4.86 4.86 0 0 0 1.32 3.41 4.79 4.79 0 0 0 3.41 1.23c1.34.08 5.37.08 6.71 0a4.79 4.79 0 0 0 3.41-1.3 4.86 4.86 0 0 0 1.3-3.41c.08-1.34.08-5.37 0-6.71zM14.48 13a2.76 2.76 0 0 1-1.54 1.55c-1.07.42-3.62.32-4.8.32s-3.73.1-4.8-.32A2.75 2.75 0 0 1 1.79 13c-.43-1.07-.33-3.62-.33-4.8s-.09-3.73.33-4.8a2.73 2.73 0 0 1 1.55-1.54c1.07-.43 3.61-.33 4.8-.33s3.73-.1 4.8.32a2.75 2.75 0 0 1 1.55 1.55c.42 1.07.32 3.62.32 4.8s.1 3.73-.33 4.8z"
/>
</svg>
</a>
So, what I want to do is to center the nav element in a way where the Instagram logo is the nav is orgin point, which will make the nav element shifted to the left abit making the Instagram logo appear in he center and the other elements is relative to it.
nav {
background-color: rgba(165, 42, 42, 0.521);
display: flex;
align-items: center;
justify-content: center;
}
a {
background-color: rgba(238, 223, 20, 0.596);
margin: 10px;
}
<nav>
home
contact
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.28 16.28" height="50" width="50">
<path d="M8.14 3.96a4.17 4.17 0 0 0-4.17 4.17 4.16 4.16 0 0 0 4.17 4.17 4.17 4.17 0 0 0 4.17-4.17A4.17 4.17 0 0 0 8.2 3.96zm0 6.88a2.71 2.71 0 1 1 0-5.42 2.71 2.71 0 0 1 2.71 2.71 2.72 2.72 0 0 1-2.71 2.72zm5.32-7a1 1 0 0 1-1.707.707 1 1 0 0 1 .707-1.707 1 1 0 0 1 1 1zm2.76 1a4.83 4.83 0 0 0-1.32-3.4A4.84 4.84 0 0 0 11.49.12a107.23 107.23 0 0 0-6.71 0 4.87 4.87 0 0 0-3.41 1.31A4.86 4.86 0 0 0 .05 4.84a107.55 107.55 0 0 0 0 6.72 4.86 4.86 0 0 0 1.32 3.41 4.79 4.79 0 0 0 3.41 1.23c1.34.08 5.37.08 6.71 0a4.79 4.79 0 0 0 3.41-1.3 4.86 4.86 0 0 0 1.3-3.41c.08-1.34.08-5.37 0-6.71zM14.48 13a2.76 2.76 0 0 1-1.54 1.55c-1.07.42-3.62.32-4.8.32s-3.73.1-4.8-.32A2.75 2.75 0 0 1 1.79 13c-.43-1.07-.33-3.62-.33-4.8s-.09-3.73.33-4.8a2.73 2.73 0 0 1 1.55-1.54c1.07-.43 3.61-.33 4.8-.33s3.73-.1 4.8.32a2.75 2.75 0 0 1 1.55 1.55c.42 1.07.32 3.62.32 4.8s.1 3.73-.33 4.8z"/>
</svg>
</a>
about
</nav>
I would use grid for this:
nav {
background-color: rgb(165 42 42 / 0.521);
display: grid;
grid-template-columns: 1fr 1fr min-content 2fr;
/*
I want four columns, with the third taking up the minimum space needed to fit its content.
The remaining space is divided into 4 portions.
Have two columns on the left taking up one portion each
Have one column on the right taking up two portions
*/
}
a {
display: grid;
place-content: center;
margin: 10px;
background-color: rgb(238 223 20 / 0.596);
}
<nav>
home
contact
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.28 16.28" height="50" width="50">
<path d="M8.14 3.96a4.17 4.17 0 0 0-4.17 4.17 4.16 4.16 0 0 0 4.17 4.17 4.17 4.17 0 0 0 4.17-4.17A4.17 4.17 0 0 0 8.2 3.96zm0 6.88a2.71 2.71 0 1 1 0-5.42 2.71 2.71 0 0 1 2.71 2.71 2.72 2.72 0 0 1-2.71 2.72zm5.32-7a1 1 0 0 1-1.707.707 1 1 0 0 1 .707-1.707 1 1 0 0 1 1 1zm2.76 1a4.83 4.83 0 0 0-1.32-3.4A4.84 4.84 0 0 0 11.49.12a107.23 107.23 0 0 0-6.71 0 4.87 4.87 0 0 0-3.41 1.31A4.86 4.86 0 0 0 .05 4.84a107.55 107.55 0 0 0 0 6.72 4.86 4.86 0 0 0 1.32 3.41 4.79 4.79 0 0 0 3.41 1.23c1.34.08 5.37.08 6.71 0a4.79 4.79 0 0 0 3.41-1.3 4.86 4.86 0 0 0 1.3-3.41c.08-1.34.08-5.37 0-6.71zM14.48 13a2.76 2.76 0 0 1-1.54 1.55c-1.07.42-3.62.32-4.8.32s-3.73.1-4.8-.32A2.75 2.75 0 0 1 1.79 13c-.43-1.07-.33-3.62-.33-4.8s-.09-3.73.33-4.8a2.73 2.73 0 0 1 1.55-1.54c1.07-.43 3.61-.33 4.8-.33s3.73-.1 4.8.32a2.75 2.75 0 0 1 1.55 1.55c.42 1.07.32 3.62.32 4.8s.1 3.73-.33 4.8z"/>
</svg>
</a>
about
</nav>
I want to render two different icons/divs in the title of ngb-panels of an accordion depending on whether the panel is expanded or collapsed. The panels have some form content inside them.So when the panel is closed it displays one icon and when it is opened it must display the other icon.
HTML and CSS template example
input[type="text"],
select.form-control{
background: transparent;
border: none;
border-bottom: 1px solid #000000;
-webkit-box-shadow: none;
box-shadow: none;
border-radius: 0;
}
input[type="number"],
select.form-control{
background: transparent;
border: none;
border-bottom: 1px solid #000000;
-webkit-box-shadow: none;
box-shadow: none;
border-radius: 0;
}
input[type="text"]:focus,
select.form-control:focus {
-webkit-box-shadow: none;
box-shadow: none;
border-color:rgb(31, 14, 187);
}
input[type="number"]:focus,
select.form-control:focus {
-webkit-box-shadow: none;
box-shadow: none;
border-color:darkred;
}
::ng-deep .collapse {
transition: max-height .55s, opacity .35s ease-in-out;
max-height: 0;
opacity: 0;
display: block !important;
&.show {
max-height: 100rem;
opacity: 1;
}
}
::ng-deep .accordion {
.card {
margin-bottom: 0 !important;
border-bottom: 1px solid rgba(0, 0, 0, .04) !important;
.card-header {
// padding-top: 0;
color: #000000;
padding: 0;
button {
padding: 1.2rem;
width: 100%;
span {
color: #5f5f5f;
float: left;
font-size: 1.2rem;
}
}
}
.card-body {
padding: 1rem;
}
}
}
<head><!-- CSS only -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body>
<ngb-accordion #acc="ngbAccordion" [destroyOnHide]='false' [closeOthers]="true" activeIds="ngb-panel-0">
<ngb-panel id="panel1">
<ng-template ngbPanelTitle>
<span *ngIf=""> <!-- condition when it is closed -->
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
fill="currentColor"
class="bi bi-x-circle"
viewBox="0 0 16 16"
>
<path
d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"
/>
<path
d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"
style="color: red;border-color: red;"
/></svg
> </span>
<span *ngIf="" ><!-- condition when it is opened -->
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
fill="currentColor"
class="bi bi-check-circle"
viewBox="0 0 16 16"
>
<path
d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"
/>
<path
d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z"
style="color: green;"
/></svg
> </span>
<span>Primary Details </span>
<span style="margin-left: 85%;"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-plus-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" style="color: black;background-color: black;"/>
</svg></span>
</ng-template>
<ng-template ngbPanelContent>
some content
</ng-template>
</ngb-panel>
<ngb-panel id="panel2">
<ng-template ngbPanelTitle>
<span *ngIf=" "> <!--condition when it is closed -->
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
fill="currentColor"
class="bi bi-x-circle"
viewBox="0 0 16 16"
>
<path
d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"
/>
<path
d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"
style="color: red;border-color: red;"
/></svg
> </span>
<span *ngIf=""> <!-- condition when it is opened -->
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
fill="currentColor"
class="bi bi-check-circle"
viewBox="0 0 16 16"
>
<path
d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"
/>
<path
d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z"
style="color: green;"
/></svg
> </span>
<span>Secondary Details </span>
<span style="margin-left: 83.3%;"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-plus-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" style="color: black;background-color: black;"/>
</svg></span>
</ng-template>
<ng-template ngbPanelContent>
<form #form2="ngForm" style="padding-left:20px;">
some more content
</form>
</ng-template>
</ngb-panel>
</ngb-accordion>
</body>
So, at *ngIf="" the status of whether the panel is closed or opened is checked and corresponding span is rendered. Please help me with the best way to check this status of panel.I have observed there are a couple of questions over this but they are not working.
You have a reference to an accordion in the acc variable thanks to this peace of code: #acc="ngbAccordion". To check if a panel expanded, you can use isExpanded method.
<ngb-accordion #acc="ngbAccordion" [destroyOnHide]='false' [closeOthers]="true" activeIds="ngb-panel-0">
<ngb-panel id="panel1">
<div>isActive: {{acc.isExpanded('panel1')}}</div>
</ngb-panel>
<ngb-panel id="panel2">
<div>isActive: {{acc.isExpanded('panel2')}}</div>
</ngb-panel>
</ngb-accordion>
.drop_down_menu a{
text-decoration: none;
display: block;
color: pink;
}
.dropdown{
position: absolute;
margin-left: 10px;
border: 100px
text-decoration: none;
font-family: Courier New;
display: none;
}
.hover_animation:hover .dropdown{
display: block;
}
<!-- This is the HTML for dropdowm-->
<div class="drop_down_menu">
<div class="hover_animation">
<svg class="drop_down" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/>
</svg>
<svg class="drop_down_fill" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path class="hvr"fill-rule="evenodd" d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zm8 0A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm-8 8A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm8 0A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3z"/>
</svg>
</div>
<div class="dropdown">
My Posts
Liked Posts
Trending Posts
Following
Contact
</div>
</div>
I have tried doing display block everything that I have tried is not working. I have tried creating multiple divs and classes to specify on what i hover that it displays. What do i need to do differently to get it to work?
Use a sibling selector.
As you described, you want the menu to show when another element is hovered. The way you originally wrote your CSS would have targeted a menu element that was inside the hovered trigger element:
/* targets this HTML structure:
<div class="hover_animation">
<div class="dropdown"></div>
</div>
*/
.hover_animation:hover .dropdown {
What you need is a rule to target a menu element that follows the hovered trigger element:
/* targets this HTML structure:
<div class="hover_animation"></div>
<div class="dropdown"></div>
*/
.hover_animation:hover ~ .dropdown {
Here's a working example:
.dropdown {
background-color: #0f0;
color: #fff;
display: none;
padding: 20px;
}
.hover_animation {
background-color: #eee;
color: #00f;
cursor: pointer;
height: 40px;
padding: 10px;
width: 40px;
}
.hover_animation:hover {
background-color: #00f;
color: #eee;
}
.hover_animation:hover ~ .dropdown {
display: block;
}
<div class="hover_animation">Hover me!</div>
<div class="dropdown">
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
Edit: Got it to work with CSS, you just need to hover the first div since that is the first element that css detects when hovering.
/* This is for the dropdown menu */
.drop_down_menu a {
text-decoration: none;
display: block;
color: pink;
}
.dropdown {
position: absolute;
margin-left: 10px;
border: 100px text-decoration: none;
font-family: Courier New;
display: none;
}
.drop_down_menu:hover .dropdown {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- This is the HTML for dropdowm-->
<div class="drop_down_menu">
<div class="hover_animation">
<svg class="drop_down" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/>
</svg>
<svg class="drop_down_fill" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path class="hvr"fill-rule="evenodd" d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zm8 0A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm-8 8A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm8 0A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3z"/>
</svg>
</div>
<div class="dropdown">
My Posts
Liked Posts
Trending Posts
Following
Contact
</div>
</div>
I am trying to align a DIV to the bottom with flexbox using align-content: flex-end (and trying align-self: flex-end) with no luck.
What am I doing wrong here? I thought align-content aligned... well.. the content to whatever the height/width allowed.
html, body {
height: 100%;
}
div.slots {
background: white;
display: flex;
flex-direction: column;
width: 250px;
align-content: flex-end;
}
div.slots div.top_slots {
display: grid;
grid-template-columns: 25% 50% 25%;
}
div.slots div.bottom_slots {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
}
div.slots div.slot {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background: #676767;
height: 35px;
}
div.slots div.slot svg {
fill: #272727;
}
div.slots div.slot:hover {
background-color: #8d8d8d;
}
div.slots div.pane {
background: grey;
height: 100px;
width: auto;
text-align: center;
}
<div class="slots">
<div class="top_slots">
<div class="slot stats">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M20 22H4a2 2 0 0 1-2-2v-8c0-1.1.9-2 2-2h4V8c0-1.1.9-2 2-2h4V4c0-1.1.9-2 2-2h4a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2zM14 8h-4v12h4V8zm-6 4H4v8h4v-8zm8-8v16h4V4h-4z"/></svg>
</div>
<div class="inventory slot">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M8 7V5c0-1.1.9-2 2-2h4a2 2 0 0 1 2 2v2h4a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9c0-1.1.9-2 2-2h4zm8 2H8v10h8V9zm2 0v10h2V9h-2zM6 9H4v10h2V9zm4-2h4V5h-4v2z"/></svg>
</div>
<div class="wear slot">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M12 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-2a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm9 11a1 1 0 0 1-2 0v-2a3 3 0 0 0-3-3H8a3 3 0 0 0-3 3v2a1 1 0 0 1-2 0v-2a5 5 0 0 1 5-5h8a5 5 0 0 1 5 5v2z"/></svg>
</div>
</div>
<div class="pane">
Stuff goes here
</div>
<div class="bottom_slots">
<div class="slot friends_list">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-3.54-4.46a1 1 0 0 1 1.42-1.42 3 3 0 0 0 4.24 0 1 1 0 0 1 1.42 1.42 5 5 0 0 1-7.08 0zM9 11a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm6 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/></svg>
</div>
<div class="slot settings">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M9 4.58V4c0-1.1.9-2 2-2h2a2 2 0 0 1 2 2v.58a8 8 0 0 1 1.92 1.11l.5-.29a2 2 0 0 1 2.74.73l1 1.74a2 2 0 0 1-.73 2.73l-.5.29a8.06 8.06 0 0 1 0 2.22l.5.3a2 2 0 0 1 .73 2.72l-1 1.74a2 2 0 0 1-2.73.73l-.5-.3A8 8 0 0 1 15 19.43V20a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2v-.58a8 8 0 0 1-1.92-1.11l-.5.29a2 2 0 0 1-2.74-.73l-1-1.74a2 2 0 0 1 .73-2.73l.5-.29a8.06 8.06 0 0 1 0-2.22l-.5-.3a2 2 0 0 1-.73-2.72l1-1.74a2 2 0 0 1 2.73-.73l.5.3A8 8 0 0 1 9 4.57zM7.88 7.64l-.54.51-1.77-1.02-1 1.74 1.76 1.01-.17.73a6.02 6.02 0 0 0 0 2.78l.17.73-1.76 1.01 1 1.74 1.77-1.02.54.51a6 6 0 0 0 2.4 1.4l.72.2V20h2v-2.04l.71-.2a6 6 0 0 0 2.41-1.4l.54-.51 1.77 1.02 1-1.74-1.76-1.01.17-.73a6.02 6.02 0 0 0 0-2.78l-.17-.73 1.76-1.01-1-1.74-1.77 1.02-.54-.51a6 6 0 0 0-2.4-1.4l-.72-.2V4h-2v2.04l-.71.2a6 6 0 0 0-2.41 1.4zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></svg>
</div>
<div class="slot logout">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2zm0 2v14h14V5H5zm11 7a1 1 0 0 1-1 1H9a1 1 0 0 1 0-2h6a1 1 0 0 1 1 1z"/></svg>
</div>
<div class="slot quests">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M19 10v6a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-2c0-1.1.9-2 2-2v-6a2 2 0 0 1-2-2V7a1 1 0 0 1 .55-.9l8-4a1 1 0 0 1 .9 0l8 4A1 1 0 0 1 21 7v1a2 2 0 0 1-2 2zm-6 0h-2v6h2v-6zm4 0h-2v6h2v-6zm-8 0H7v6h2v-6zM5 7.62V8h14v-.38l-7-3.5-7 3.5zM5 18v2h14v-2H5z"/></svg>
</div>
</div>
</div>
Right now, .slots is a flex container containing flex items. One way to align it with the bottom by using flexbox is by putting it in another flexbox container. This can be visualized by asking the question: "align it to the bottom of what?" The answer is: "to the bottom of another flex container".
So, in addition to being a flex container, .slots can also be a flex item inside another flex container. Then you can align .slots with the bottom of its container.
Below, I've set it's container <body> to be a flex container for the .slots element. This is similar to one of the methods for a "sticky footer", detailed at CSS-Tricks.
html,
body {
height: 100%;
margin: 0;
}
/* ADDED THIS */
body {
display: flex;
flex-direction: column;
justify-content: flex-end;
}
div.slots {
background: white;
display: flex;
flex-direction: column;
width: 250px;
/* align-content: flex-end; - NOT NEEDED */
}
div.slots div.top_slots {
display: grid;
grid-template-columns: 25% 50% 25%;
}
div.slots div.bottom_slots {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
}
div.slots div.slot {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background: #676767;
height: 35px;
}
div.slots div.slot svg {
fill: #272727;
}
div.slots div.slot:hover {
background-color: #8d8d8d;
}
div.slots div.pane {
background: grey;
height: 100px;
width: auto;
text-align: center;
}
<div class="slots">
<div class="top_slots">
<div class="slot stats">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M20 22H4a2 2 0 0 1-2-2v-8c0-1.1.9-2 2-2h4V8c0-1.1.9-2 2-2h4V4c0-1.1.9-2 2-2h4a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2zM14 8h-4v12h4V8zm-6 4H4v8h4v-8zm8-8v16h4V4h-4z"/></svg>
</div>
<div class="inventory slot">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M8 7V5c0-1.1.9-2 2-2h4a2 2 0 0 1 2 2v2h4a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9c0-1.1.9-2 2-2h4zm8 2H8v10h8V9zm2 0v10h2V9h-2zM6 9H4v10h2V9zm4-2h4V5h-4v2z"/></svg>
</div>
<div class="wear slot">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M12 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-2a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm9 11a1 1 0 0 1-2 0v-2a3 3 0 0 0-3-3H8a3 3 0 0 0-3 3v2a1 1 0 0 1-2 0v-2a5 5 0 0 1 5-5h8a5 5 0 0 1 5 5v2z"/></svg>
</div>
</div>
<div class="pane">
Stuff goes here
</div>
<div class="bottom_slots">
<div class="slot friends_list">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-3.54-4.46a1 1 0 0 1 1.42-1.42 3 3 0 0 0 4.24 0 1 1 0 0 1 1.42 1.42 5 5 0 0 1-7.08 0zM9 11a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm6 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/></svg>
</div>
<div class="slot settings">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M9 4.58V4c0-1.1.9-2 2-2h2a2 2 0 0 1 2 2v.58a8 8 0 0 1 1.92 1.11l.5-.29a2 2 0 0 1 2.74.73l1 1.74a2 2 0 0 1-.73 2.73l-.5.29a8.06 8.06 0 0 1 0 2.22l.5.3a2 2 0 0 1 .73 2.72l-1 1.74a2 2 0 0 1-2.73.73l-.5-.3A8 8 0 0 1 15 19.43V20a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2v-.58a8 8 0 0 1-1.92-1.11l-.5.29a2 2 0 0 1-2.74-.73l-1-1.74a2 2 0 0 1 .73-2.73l.5-.29a8.06 8.06 0 0 1 0-2.22l-.5-.3a2 2 0 0 1-.73-2.72l1-1.74a2 2 0 0 1 2.73-.73l.5.3A8 8 0 0 1 9 4.57zM7.88 7.64l-.54.51-1.77-1.02-1 1.74 1.76 1.01-.17.73a6.02 6.02 0 0 0 0 2.78l.17.73-1.76 1.01 1 1.74 1.77-1.02.54.51a6 6 0 0 0 2.4 1.4l.72.2V20h2v-2.04l.71-.2a6 6 0 0 0 2.41-1.4l.54-.51 1.77 1.02 1-1.74-1.76-1.01.17-.73a6.02 6.02 0 0 0 0-2.78l-.17-.73 1.76-1.01-1-1.74-1.77 1.02-.54-.51a6 6 0 0 0-2.4-1.4l-.72-.2V4h-2v2.04l-.71.2a6 6 0 0 0-2.41 1.4zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></svg>
</div>
<div class="slot logout">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2zm0 2v14h14V5H5zm11 7a1 1 0 0 1-1 1H9a1 1 0 0 1 0-2h6a1 1 0 0 1 1 1z"/></svg>
</div>
<div class="slot quests">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M19 10v6a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-2c0-1.1.9-2 2-2v-6a2 2 0 0 1-2-2V7a1 1 0 0 1 .55-.9l8-4a1 1 0 0 1 .9 0l8 4A1 1 0 0 1 21 7v1a2 2 0 0 1-2 2zm-6 0h-2v6h2v-6zm4 0h-2v6h2v-6zm-8 0H7v6h2v-6zM5 7.62V8h14v-.38l-7-3.5-7 3.5zM5 18v2h14v-2H5z"/></svg>
</div>
</div>
</div>
Michael_B's Scenario #2 might be a more efficient solution (fewer containers). It positions all the flex items at the bottom of .slots, which extends the full height of the page by way of height:100vh.
I'd say the decision is partly based on what else exists on the page.
Scenario 1
The align-content property, as well as align-items and align-self, work only on the cross axis of a flex container.
In a container with flex-direction: column, the main axis is vertical and the cross axis is horizontal. That means that the align-* properties shift items left/right, not top/bottom.
So align-content will not bottom-align a flex item in a column-direction container.
The next issue to consider is that a flex item and its content are not one element. They represent two elements. So to align the content of your flex item, use a nested flex container.
div.slots {
background: white;
display: flex;
flex-direction: column;
width: 250px;
height: 100vh;
}
div.slots div.top_slots {
display: grid;
grid-template-columns: 25% 50% 25%;
}
div.slots div.bottom_slots {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
}
div.slots div.slot {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background: #676767;
height: 35px;
}
div.slots div.slot svg {
fill: #272727;
}
div.slots div.slot:hover {
background-color: #8d8d8d;
}
div.slots div.pane {
background: grey;
height: 100px;
text-align: center;
/****** NEW ******/
display: flex;
justify-content: center;
align-items: flex-end;
}
body {
margin: 0;
}
<div class="slots">
<div class="top_slots">
<div class="slot stats">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path class="heroicon-ui" d="M20 22H4a2 2 0 0 1-2-2v-8c0-1.1.9-2 2-2h4V8c0-1.1.9-2 2-2h4V4c0-1.1.9-2 2-2h4a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2zM14 8h-4v12h4V8zm-6 4H4v8h4v-8zm8-8v16h4V4h-4z" />
</svg>
</div>
<div class="inventory slot">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path class="heroicon-ui" d="M8 7V5c0-1.1.9-2 2-2h4a2 2 0 0 1 2 2v2h4a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9c0-1.1.9-2 2-2h4zm8 2H8v10h8V9zm2 0v10h2V9h-2zM6 9H4v10h2V9zm4-2h4V5h-4v2z" />
</svg>
</div>
<div class="wear slot">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path class="heroicon-ui" d="M12 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-2a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm9 11a1 1 0 0 1-2 0v-2a3 3 0 0 0-3-3H8a3 3 0 0 0-3 3v2a1 1 0 0 1-2 0v-2a5 5 0 0 1 5-5h8a5 5 0 0 1 5 5v2z" />
</svg>
</div>
</div>
<div class="pane">
Stuff goes here
</div>
<div class="bottom_slots">
<div class="slot friends_list">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path class="heroicon-ui" d="M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-3.54-4.46a1 1 0 0 1 1.42-1.42 3 3 0 0 0 4.24 0 1 1 0 0 1 1.42 1.42 5 5 0 0 1-7.08 0zM9 11a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm6 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"
/>
</svg>
</div>
<div class="slot settings">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path class="heroicon-ui" d="M9 4.58V4c0-1.1.9-2 2-2h2a2 2 0 0 1 2 2v.58a8 8 0 0 1 1.92 1.11l.5-.29a2 2 0 0 1 2.74.73l1 1.74a2 2 0 0 1-.73 2.73l-.5.29a8.06 8.06 0 0 1 0 2.22l.5.3a2 2 0 0 1 .73 2.72l-1 1.74a2 2 0 0 1-2.73.73l-.5-.3A8 8 0 0 1 15 19.43V20a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2v-.58a8 8 0 0 1-1.92-1.11l-.5.29a2 2 0 0 1-2.74-.73l-1-1.74a2 2 0 0 1 .73-2.73l.5-.29a8.06 8.06 0 0 1 0-2.22l-.5-.3a2 2 0 0 1-.73-2.72l1-1.74a2 2 0 0 1 2.73-.73l.5.3A8 8 0 0 1 9 4.57zM7.88 7.64l-.54.51-1.77-1.02-1 1.74 1.76 1.01-.17.73a6.02 6.02 0 0 0 0 2.78l.17.73-1.76 1.01 1 1.74 1.77-1.02.54.51a6 6 0 0 0 2.4 1.4l.72.2V20h2v-2.04l.71-.2a6 6 0 0 0 2.41-1.4l.54-.51 1.77 1.02 1-1.74-1.76-1.01.17-.73a6.02 6.02 0 0 0 0-2.78l-.17-.73 1.76-1.01-1-1.74-1.77 1.02-.54-.51a6 6 0 0 0-2.4-1.4l-.72-.2V4h-2v2.04l-.71.2a6 6 0 0 0-2.41 1.4zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"
/>
</svg>
</div>
<div class="slot logout">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path class="heroicon-ui" d="M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2zm0 2v14h14V5H5zm11 7a1 1 0 0 1-1 1H9a1 1 0 0 1 0-2h6a1 1 0 0 1 1 1z" />
</svg>
</div>
<div class="slot quests">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path class="heroicon-ui" d="M19 10v6a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-2c0-1.1.9-2 2-2v-6a2 2 0 0 1-2-2V7a1 1 0 0 1 .55-.9l8-4a1 1 0 0 1 .9 0l8 4A1 1 0 0 1 21 7v1a2 2 0 0 1-2 2zm-6 0h-2v6h2v-6zm4 0h-2v6h2v-6zm-8 0H7v6h2v-6zM5 7.62V8h14v-.38l-7-3.5-7 3.5zM5 18v2h14v-2H5z"
/>
</svg>
</div>
</div>
</div>
Scenario 2
If the goal is to align the entire element to the bottom, then use justify-content: flex-end (main axis), not align-content: flex-end (cross axis and multi-line containers only).
div.slots {
background: white;
display: flex;
flex-direction: column;
justify-content: flex-end; /* NEW */
width: 250px;
height: 100vh;
}
div.slots div.top_slots {
display: grid;
grid-template-columns: 25% 50% 25%;
}
div.slots div.bottom_slots {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
}
div.slots div.slot {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background: #676767;
height: 35px;
}
div.slots div.slot svg {
fill: #272727;
}
div.slots div.slot:hover {
background-color: #8d8d8d;
}
div.slots div.pane {
background: grey;
height: 100px;
text-align: center;
/****** NEW ******/
display: flex;
justify-content: center;
align-items: flex-end;
}
body {
margin: 0;
}
<div class="slots">
<div class="top_slots">
<div class="slot stats">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path class="heroicon-ui" d="M20 22H4a2 2 0 0 1-2-2v-8c0-1.1.9-2 2-2h4V8c0-1.1.9-2 2-2h4V4c0-1.1.9-2 2-2h4a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2zM14 8h-4v12h4V8zm-6 4H4v8h4v-8zm8-8v16h4V4h-4z" />
</svg>
</div>
<div class="inventory slot">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path class="heroicon-ui" d="M8 7V5c0-1.1.9-2 2-2h4a2 2 0 0 1 2 2v2h4a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9c0-1.1.9-2 2-2h4zm8 2H8v10h8V9zm2 0v10h2V9h-2zM6 9H4v10h2V9zm4-2h4V5h-4v2z" />
</svg>
</div>
<div class="wear slot">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path class="heroicon-ui" d="M12 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-2a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm9 11a1 1 0 0 1-2 0v-2a3 3 0 0 0-3-3H8a3 3 0 0 0-3 3v2a1 1 0 0 1-2 0v-2a5 5 0 0 1 5-5h8a5 5 0 0 1 5 5v2z" />
</svg>
</div>
</div>
<div class="pane">
Stuff goes here
</div>
<div class="bottom_slots">
<div class="slot friends_list">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path class="heroicon-ui" d="M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-3.54-4.46a1 1 0 0 1 1.42-1.42 3 3 0 0 0 4.24 0 1 1 0 0 1 1.42 1.42 5 5 0 0 1-7.08 0zM9 11a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm6 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"
/>
</svg>
</div>
<div class="slot settings">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path class="heroicon-ui" d="M9 4.58V4c0-1.1.9-2 2-2h2a2 2 0 0 1 2 2v.58a8 8 0 0 1 1.92 1.11l.5-.29a2 2 0 0 1 2.74.73l1 1.74a2 2 0 0 1-.73 2.73l-.5.29a8.06 8.06 0 0 1 0 2.22l.5.3a2 2 0 0 1 .73 2.72l-1 1.74a2 2 0 0 1-2.73.73l-.5-.3A8 8 0 0 1 15 19.43V20a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2v-.58a8 8 0 0 1-1.92-1.11l-.5.29a2 2 0 0 1-2.74-.73l-1-1.74a2 2 0 0 1 .73-2.73l.5-.29a8.06 8.06 0 0 1 0-2.22l-.5-.3a2 2 0 0 1-.73-2.72l1-1.74a2 2 0 0 1 2.73-.73l.5.3A8 8 0 0 1 9 4.57zM7.88 7.64l-.54.51-1.77-1.02-1 1.74 1.76 1.01-.17.73a6.02 6.02 0 0 0 0 2.78l.17.73-1.76 1.01 1 1.74 1.77-1.02.54.51a6 6 0 0 0 2.4 1.4l.72.2V20h2v-2.04l.71-.2a6 6 0 0 0 2.41-1.4l.54-.51 1.77 1.02 1-1.74-1.76-1.01.17-.73a6.02 6.02 0 0 0 0-2.78l-.17-.73 1.76-1.01-1-1.74-1.77 1.02-.54-.51a6 6 0 0 0-2.4-1.4l-.72-.2V4h-2v2.04l-.71.2a6 6 0 0 0-2.41 1.4zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"
/>
</svg>
</div>
<div class="slot logout">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path class="heroicon-ui" d="M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2zm0 2v14h14V5H5zm11 7a1 1 0 0 1-1 1H9a1 1 0 0 1 0-2h6a1 1 0 0 1 1 1z" />
</svg>
</div>
<div class="slot quests">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path class="heroicon-ui" d="M19 10v6a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-2c0-1.1.9-2 2-2v-6a2 2 0 0 1-2-2V7a1 1 0 0 1 .55-.9l8-4a1 1 0 0 1 .9 0l8 4A1 1 0 0 1 21 7v1a2 2 0 0 1-2 2zm-6 0h-2v6h2v-6zm4 0h-2v6h2v-6zm-8 0H7v6h2v-6zM5 7.62V8h14v-.38l-7-3.5-7 3.5zM5 18v2h14v-2H5z"
/>
</svg>
</div>
</div>
</div>
Align-content align items to the cross-axis. Which normally is the vertical one, therefore the "height".
But if you use flex-direction:column the axis switch, so main axis is vertical and cross axis horizontal.
Therefore you mus use justify-content to adjust the vertical alignment of flex items on a flex-direction:column flex-container.
Add flex-grow: 1 to the middle element and delete its height: 100px to allow it to become higher, and add margin-top: auto to the bottom element to move it to the bottom:
html, body {
height: 100%;
}
div.slots {
background: white;
display: flex;
flex-direction: column;
width: 250px;
height: 100vh;
}
div.slots div.top_slots {
display: grid;
grid-template-columns: 25% 50% 25%;
}
div.slots div.bottom_slots {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
margin-top: auto;
}
div.slots div.slot {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background: #676767;
height: 35px;
}
div.slots div.slot svg {
fill: #272727;
}
div.slots div.slot:hover {
background-color: #8d8d8d;
}
div.slots div.pane {
background: grey;
width: auto;
text-align: center;
flex-grow: 1;
}
<div class="slots">
<div class="top_slots">
<div class="slot stats">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M20 22H4a2 2 0 0 1-2-2v-8c0-1.1.9-2 2-2h4V8c0-1.1.9-2 2-2h4V4c0-1.1.9-2 2-2h4a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2zM14 8h-4v12h4V8zm-6 4H4v8h4v-8zm8-8v16h4V4h-4z"/></svg>
</div>
<div class="inventory slot">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M8 7V5c0-1.1.9-2 2-2h4a2 2 0 0 1 2 2v2h4a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9c0-1.1.9-2 2-2h4zm8 2H8v10h8V9zm2 0v10h2V9h-2zM6 9H4v10h2V9zm4-2h4V5h-4v2z"/></svg>
</div>
<div class="wear slot">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M12 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-2a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm9 11a1 1 0 0 1-2 0v-2a3 3 0 0 0-3-3H8a3 3 0 0 0-3 3v2a1 1 0 0 1-2 0v-2a5 5 0 0 1 5-5h8a5 5 0 0 1 5 5v2z"/></svg>
</div>
</div>
<div class="pane">
Stuff goes here
</div>
<div class="bottom_slots">
<div class="slot friends_list">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-3.54-4.46a1 1 0 0 1 1.42-1.42 3 3 0 0 0 4.24 0 1 1 0 0 1 1.42 1.42 5 5 0 0 1-7.08 0zM9 11a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm6 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/></svg>
</div>
<div class="slot settings">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M9 4.58V4c0-1.1.9-2 2-2h2a2 2 0 0 1 2 2v.58a8 8 0 0 1 1.92 1.11l.5-.29a2 2 0 0 1 2.74.73l1 1.74a2 2 0 0 1-.73 2.73l-.5.29a8.06 8.06 0 0 1 0 2.22l.5.3a2 2 0 0 1 .73 2.72l-1 1.74a2 2 0 0 1-2.73.73l-.5-.3A8 8 0 0 1 15 19.43V20a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2v-.58a8 8 0 0 1-1.92-1.11l-.5.29a2 2 0 0 1-2.74-.73l-1-1.74a2 2 0 0 1 .73-2.73l.5-.29a8.06 8.06 0 0 1 0-2.22l-.5-.3a2 2 0 0 1-.73-2.72l1-1.74a2 2 0 0 1 2.73-.73l.5.3A8 8 0 0 1 9 4.57zM7.88 7.64l-.54.51-1.77-1.02-1 1.74 1.76 1.01-.17.73a6.02 6.02 0 0 0 0 2.78l.17.73-1.76 1.01 1 1.74 1.77-1.02.54.51a6 6 0 0 0 2.4 1.4l.72.2V20h2v-2.04l.71-.2a6 6 0 0 0 2.41-1.4l.54-.51 1.77 1.02 1-1.74-1.76-1.01.17-.73a6.02 6.02 0 0 0 0-2.78l-.17-.73 1.76-1.01-1-1.74-1.77 1.02-.54-.51a6 6 0 0 0-2.4-1.4l-.72-.2V4h-2v2.04l-.71.2a6 6 0 0 0-2.41 1.4zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></svg>
</div>
<div class="slot logout">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2zm0 2v14h14V5H5zm11 7a1 1 0 0 1-1 1H9a1 1 0 0 1 0-2h6a1 1 0 0 1 1 1z"/></svg>
</div>
<div class="slot quests">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" d="M19 10v6a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-2c0-1.1.9-2 2-2v-6a2 2 0 0 1-2-2V7a1 1 0 0 1 .55-.9l8-4a1 1 0 0 1 .9 0l8 4A1 1 0 0 1 21 7v1a2 2 0 0 1-2 2zm-6 0h-2v6h2v-6zm4 0h-2v6h2v-6zm-8 0H7v6h2v-6zM5 7.62V8h14v-.38l-7-3.5-7 3.5zM5 18v2h14v-2H5z"/></svg>
</div>
</div>
</div>