I'm trying to create some sort of "slide menu" where all the items are shown, and the current item is standing out.
The issue I have right now is that when an item is selected, it does not scroll to the center of the container.
To solve that issue, I added a wrapper element between the items and the container and sets the width to be extremely large, then with JavaScript scroll to the current item.
Is there a way to achieve the same result without doing this workaround?
CSS:
* {
box-sizing: border-box;
}
.container {
position: relative;
overflow: hidden;
width: 400px;
height: 60px;
background-color: darkcyan;
padding: 10px;
margin-bottom: 10px;
}
.wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.wrapper.hard {
width: 10000000px;
}
.item_wrapper {
flex-shrink: 0;
height: 100%;
width: 80px;
display: flex;
justify-content: center;
align-items: center;
}
.box, .box2 {
height: 80%;
width: 70px;
background-color: cyan;
transition: all 0.2s;
}
.box.current, .box2.current {
height: 100%;
width: 80px;
transition: all 0.2s;
}
https://jsfiddle.net/Dynacord/sz3daL46/
Related
I have created a mobile nav following this tutorial on youtube https://www.youtube.com/watch?v=IF6k0uZuypA.
The nav dropdown as show in this picture is fully opaque and nothing behind dropdown shows through. However, only on the 'reviews list' page, where the sort by and add review elements are, the elements underneath the dropdown show and mess the mobile nav up, as shown here.
I am using React, MUI material icons https://mui.com/components/material-icons/ for the 'add' icon and MUI select for the sort and order by https://mui.com/components/selects/.
I have switched the add icon from MUI and replaced it with Fontawesome, but the issue still appears.
I have also tried setting the Z-index of the dropdown to 1 and the Z-index of the add icon underneath to -1, but this only seems to disable the add element under the dropdown.
I have also tried adding an 'opacity: 1' to the dropdown, this does not seem to change anything either.
// navbar css
* {
margin: 0px;
}
:root {
--bg: #242526;
--bg-accent: #484a4d;
--nav-size: 60px;
--border: 1px solid #474a4d;
--border-radius: 8px;
--speed: 500ms;
margin-top: 75px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
a {
/* color: #dadce1; */
text-decoration: none;
}
.logo {
color: #dadce1;
margin: 0px;
display: flex;
align-items: center;
}
.navbar {
height: var(--nav-size);
background-color: var(--bg);
padding: 0 1rem;
border-bottom: var(--border);
display: flex;
justify-content: space-between;
position: fixed;
top: 0;
width: 100%;
}
.navbar-list {
max-width: 100%;
height: 100%;
display: flex;
justify-content: flex-end;
}
.nav-item {
width: calc(var(--nav-size) * 0.8);
display: flex;
align-items: center;
justify-content: center;
margin-right: 25px;
}
.icon-button {
--button-size: calc(var(--nav-size) * 0.5);
width: var(--button-size);
height: var(--button-size);
/* background-color: #484a4d; */
border-radius: 50%;
padding: 5px;
margin: 2px;
display: flex;
justify-content: center;
align-items: center;
}
.dropdown {
position: absolute;
z-index: 1;
top: 56px;
width: 300px;
transform: translateX(-35%);
background-color: rgb(16, 85, 211);
border: var(--border);
border-radius: var(--border-radius);
padding: 1rem;
overflow: hidden;
display: flex;
flex-direction: column;
opacity: 1;
}
.menu-item {
height: 50px;
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
justify-content: center;
border-radius: var(--border-radius);
/* transition: background var(--speed); */
padding: 0.5rem;
}
.menu-item:hover {
background-color: #525357;
}
.nav-profile-pic {
max-width: 75px;
}
// review-list css
button, .sort-by {
z-index: -1;
}
By just seeing your CSS, the easiest would be:
add z-index: 1000; (or any needed value) to the position: fixed; parent element .navBar.
Its child elements will perform accordingly - overlaying other elements on the page.
Z-index MDN Docs
and keep in mind to use z-index on elements with CSS having positon (other than : static;)
I have a centered flexbox parent div, #con, with % width, which has an image(s)-containing div (.block) sandwiched between two padded text divs (#info and #links). How can I force .block img to be a square with side length equal to #con's width with JS or CSS? .block could contain 1x1=1 images, 2x2=4 images, etc; thus, background-image is not an option. Imitating the solution here only seems to work if I replace con.width() in the JS with a specific value (e.g. 300px, as shown here with this placeholder image), which is unideal.
var con = $("#con");
$(".block").css("height", con.width(), "width", con.width());
body {
font-size:1rem;
text-align:center;
margin:0;
height:100vh;
display: flex;
align-items: center;
justify-content: center;
overflow:hidden;
}
#con {
width:50%;
max-width:300px;
display:flex;
flex-flow:row wrap;
justify-content:center;
margin:5rem auto;
border:1px solid black;
}
.block {width:100%; overflow:hidden; background:black;}
.block img {
position: relative;
top: 0;
bottom: 0;
left: 0;
right: 0;
object-fit: cover;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<div id="con">
<div id="info">...</div>
<div class="block"><img src="https://dbdzm869oupei.cloudfront.net/img/vinylrugs/preview/60150.png"></div>
<div id="links">...</div>
</div>
You don't need JS for this: just use aspect-ratio: 1 to force a square aspect ratio. You might want to add display: block to ensure the <img> is not displayed inline (which is the default) as well. See proof-of-concept below:
body {
font-size: 1rem;
text-align: center;
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
#con {
width: 50%;
max-width: 300px;
display: flex;
flex-flow: row wrap;
justify-content: center;
margin: 5rem auto;
border: 1px solid black;
}
.block {
width: 100%;
overflow: hidden;
background: black;
}
.block img {
display: block;
object-fit: cover;
width: 100%;
aspect-ratio: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<div id="con">
<div id="info">...</div>
<div class="block"><img src="https://dbdzm869oupei.cloudfront.net/img/vinylrugs/preview/60150.png"></div>
<div id="links">...</div>
</div>
If you want to support browsers that do not have aspect-ratio support, you can use a combination of a pseudo-element + padding-bottom hack to set a fixed aspect ratio instead:
body {
font-size: 1rem;
text-align: center;
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
#con {
width: 50%;
max-width: 300px;
display: flex;
flex-flow: row wrap;
justify-content: center;
margin: 5rem auto;
border: 1px solid black;
}
.block {
width: 100%;
overflow: hidden;
background: black;
position: relative;
}
.block::before {
width: 100%;
padding-bottom: 100%;
content: '';
display: block;
}
.block img {
display: block;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<div id="con">
<div id="info">...</div>
<div class="block"><img src="https://dbdzm869oupei.cloudfront.net/img/vinylrugs/preview/60150.png"></div>
<div id="links">...</div>
</div>
I need to center a main div and append a fixed menu to the right of that item. I need the main div to stay in the center and the right menu to "fix" to the centered div.
Currently, I'm using flex to center the div, but this is resulting in both items centering (meaning the main div is not truly in the center).
This is the desired layout:
Current layout:
The code appears as below (I'm using React with styled components):
Container:
const DivContainer = styled.div`
display: flex;
justify-content: center;
position: relative;
z-index: 60;
width: 100%;
`;
Main Div:
const MainDiv = styled.div`
width: 300px;
padding: 35px 15px;
`;
Menu div:
const MenuDiv = styled.div`
display: flex;
cursor: pointer;
flex-shrink: 0;
flex-direction: column;
margin-top: 85px;
order: 10;
`;
This is rendered as the below:
<DivContainer>
<MainDiv />
<MenuDiv />
</DivContainer>
You could put the sidebar inside the container and push it out with a negative margin right
body,
html {
height: 100%;
margin: 0;
}
.container {
height: 100%;
width: 100%;
border: 2px solid yellow;
border-radius: 5px;
box-sizing: border-box;
margin: 5px;
display: grid;
place-items: center;
}
.center {
width: 200px;
height: 200px;
border: 2px solid yellow;
border-radius: 5px;
}
.sidebar {
width: 50px;
height: 200px;
outline: 2px solid magenta;
border-radius: 5px;
/* important */
float: right;
margin-right: -50px;
}
<div class="container">
<div class="center">
content
<div class="sidebar">
sidebar
</div>
</div>
</div>
ps: for the snippet click full page
You could just wrap it in a zero width div, with overflow visible:
#wrapper {
display: flex;
border: solid 3px green;
justify-content: center;
}
#main {
border: solid 2px orange;
width: 50%;
}
#no-width {
width: 0;
overflow: visible;
}
#menu {
width: 100px;
border: solid red 2px;
}
<body>
<div id="wrapper">
<div id="main">
Centered
</div>
<div id="no-width">
<div id="menu">
"Zero" width div, so doesn't affect centering
</div>
</div>
</div>
</body>
Wrap it in another div with same width as main div and set min-width for its child
.wrapper {
display: flex;
width: 300px;
}
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.main {
width: 300px;
min-width: 300px;
min-height: 200px;
background-color: aquamarine;
}
.menu {
width: 80px;
min-width: 80px;
min-height: 200px;
background-color: cadetblue;
position: relative;
}
<div class="container">
<div class="wrapper">
<div class="main"></div>
<div class="menu"></div>
</div>
</div>
I am trying to animate width on my fixed element using calc simply because I can't make it relative. It's one of those nav bars that hide when scrolling down and appear back on the top when scrolling up.
For some reason the animation isn't smooth and the 'Settings' div jumps between the transitions. The weird or maybe not that weird bit is that it works fine in Chrome but not in IE...
I know having a div with a calculated width isn't the best idea here but I simply can't make it relative due to its constant disappearance on scroll. I have spent hours trying to figure it out for nothing. Try running it in IE and compare it with Chrome.
const sideMenu = document.querySelector('.side-menu');
sideMenu.addEventListener('click', function() {
sideMenu.classList.toggle('collapse');
});
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.side-menu {
width: 160px;
height: 100vh;
background-color: #ccc;
transition: ease-in-out 0.3s;
float: left;
cursor: pointer;
}
.side-menu.collapse {
width: 50px;
}
.side-menu.collapse + .right-panel > .top {
width: calc(100% - 50px);
}
.right-panel {
position: relative;
background-color: yellow;
display: flex;
flex-direction: column;
}
.top {
position: fixed;
height: 70px;
width: calc(100% - 160px);
background-color: #c3c3c3;
transition: ease-in-out 0.3s;
display: flex;
align-items: center;
}
.banner {
width: calc(100% - 20vw);
}
.settings {
width: 20vw;
display: flex;
justify-content: center;
}
<div class="side-menu">Click</div>
<div class="right-panel">
<div class="top">
<div class="banner">Banner</div>
<div class="settings">Settings</div>
</div>
</div>
I'm not certain why IE has those stuttering issues, but you can simplify your layout to not use calc, which appears to solve the problem.
As you're using fixed and want to cover the full width of the page, instead of the calc() you can use left and right.
E.g. In .top we change calc(100% - 160px); this to
right: 0;
left: 160px;
And in .side-menu.collapse + .right-panel > .top
width: calc(100% - 50px); becomes left: 50px;
const sideMenu = document.querySelector('.side-menu');
sideMenu.addEventListener('click', function() {
sideMenu.classList.toggle('collapse');
});
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.side-menu {
width: 160px;
height: 100vh;
background-color: #ccc;
transition: ease-in-out 0.3s;
float: left;
cursor: pointer;
}
.side-menu.collapse {
width: 50px;
}
.side-menu.collapse + .right-panel > .top {
left: 50px;
}
.right-panel {
position: relative;
background-color: yellow;
display: flex;
flex-direction: column;
}
.top {
position: fixed;
height: 70px;
right: 0;
left: 160px;
background-color: #c3c3c3;
transition: ease-in-out 0.3s;
display: flex;
align-items: center;
}
.banner {
width: calc(100% - 20vw);
}
.settings {
width: 20vw;
display: flex;
justify-content: center;
}
<div class="side-menu">Click</div>
<div class="right-panel">
<div class="top">
<div class="banner">Banner</div>
<div class="settings">Settings</div>
</div>
</div>
I am trying to divide a practice website into three sections of a column using flexbox. However, the middle section overflows out of the flexbox row, and the footer section is now hidden behind it.
https://jsbin.com/rerulepawu/edit?html,output
What causes this? I experimented with flex-grow and flex-shrink but it did not help.
Any advice would be appreciated. Thanks.
text in flexboxes usually overlap within the flex container to fix this you can set
.row {
flex: 1;
display: flex;
overflow:auto;
min-height: min-content;
}
and as a hack I set a non flex span inside a flex div, and set it's display to block
btw everything goes to crap when you delete it because Justify content dictates position within a flew box, if your whole site is one big flex box.
this is the full CSS that works for me displaying footer
body {
background-color: rgb(64, 160, 223);
font-family: 'Futura', sans-serif;
color: white;
}
.column {
display: flex;
height: 93%;
flex-direction: column;
}
.row {
flex: 1;
display: flex;
overflow:auto;
}
.block {
margin: auto;
}
.section_block {
margin: 20px;
height: 100px;
}
.section_left {
background-color: yellow;
width: 50%;
float: left;
height: 100%;
display: flex;
align-items: center;
justify-content: center
}
.section_right {
background-color: red;
width: 50%;
float: left;
height: 100%;
display: flex;
align-items: center;
justify-content: center
}
.section_title {
font-weight: bold;
}
.section_description {
text-align: center;
vertical-align: middle;
}
.section_photo {
margin: 0
}
.content {
border-radius: 15px;
background-color: white;
width: 80%;
color: black;
display: flex;
flex-direction: column;
}
/* why does everything go to shit when i delete this */
#contact {overflow:auto;
flex: 0;
justify-content: flex-end;}