This question already has answers here:
How to change CSS property using JavaScript
(7 answers)
Closed 1 year ago.
I am trying to overwrite a Flex 'justify-content:center' rule and change it to 'start-flex' using Javascript. For some reason this isn't working although within the same JS loop I can overwrite any of the other rules. Why is justify-content acting differently and how could you actually overwrite justify-content ?
function myFunction()
{
const links = document.querySelector( '.sidebar-nav' ).querySelectorAll( 'li a' );
links.forEach( function( item ){
item.justifyContent = 'flex-start';
});
}
aside{
display: flex;
flex-direction: column;
width: var(--edge-side);
padding-top: 4rem;
}
.sidebar-nav li{
display: flex;
align-items: stretch;
height: 60px;
width: auto;
}
.sidebar-nav li a{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
<aside>
<nav>
<ul class="sidebar-nav">
<li><a href="#">
<span class="material-icons">apps</span>
<span class="page-name">Page 1</span></a></li>
<li><a href="#">
<span class="material-icons">reorder</span>
<span class="page-name">Page 2</span></a></li>
</ul>
</nav>
</aside>
You need to set .style.justifyContent.
function myFunction() {
const links = document.querySelector('.sidebar-nav').querySelectorAll('li a');
links.forEach(function(item) {
item.style.justifyContent = 'flex-start';
});
}
myFunction();
aside {
display: flex;
flex-direction: column;
width: var(--edge-side);
padding-top: 4rem;
}
.sidebar-nav li {
display: flex;
align-items: stretch;
height: 60px;
width: auto;
}
.sidebar-nav li a {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
<aside>
<nav>
<ul class="sidebar-nav">
<li>
<a href="#">
<span class="material-icons">apps</span>
<span class="page-name">Page 1</span></a>
</li>
<li>
<a href="#">
<span class="material-icons">reorder</span>
<span class="page-name">Page 2</span></a>
</li>
</ul>
</nav>
</aside>
Related
I am working on a personal project on Next.js. Currently, I am having issues adding a transition class to the navbar when on responsive. When the user clicks the menu the navbar opens and when the user clicks one of the options it closes. I want that to have a smooth transition but I am unable to do it. Below is the code.
CSS
.navbarWrapper {
background-color: #050f2b;
border-bottom: 1px solid #000;
box-shadow: 0px 2px 10px #000;
color: #fff;
display: inline-flex;
justify-content: space-between;
padding: 0.5rem 2rem;
width: 100%;
}
.navbarContainer {
align-items: center;
display: flex;
font-size: 1.2rem;
justify-content: space-around;
list-style-type: none;
width: 100%;
}
.responsive {
transform: translateX(-100vw);
opacity: 0;
}
#media screen and (max-width: 980px) {
.navbarWrapper {
display: block;
}
.navbarContainer {
display: none;
height: auto;
justify-content: flex-start;
transition: all 2s ease-in-out;
}
ul.navbarContainer.responsive li {
display: flex;
justify-content: flex-start;
margin: 0 auto;
width: 90%;
}
.responsive {
align-items: flex-start;
display: flex;
flex-direction: column;
height: 100vh;
opacity: 1;
padding: 0;
transform: translateX(0);
width: 100%;
}
}
JSX
<div className={styles.navbarWrapper}>
<Link href='/'>
<a className={styles.logo}>
<Image src={Logo} alt='something' width={200} height={50} />
<div className={styles.logoText}>something</div>
</a>
</Link>
<div className={styles.burger} onClick={handleOnClick}>
<GiHamburgerMenu size='2rem' />
</div>
<ul className={`${styles.navbarContainer} ${open ? styles.responsive : ''}`}>
<li>
<Link href='/'>
<a className={styles.text} onClick={closeNav}>Home</a>
</Link>
</li>
<li>
<Link href='/SolarProducts'>
<a className={styles.text} onClick={closeNav}>Products</a>
</Link>
</li>
<li>
<Link href='/ContactUs'>
<a className={styles.text} onClick={closeNav}>Contact Us</a>
</Link>
</li>
</ul>
</div>
There is a class of responsive that gets added to the JSX in order to open the navbar and it is deleted when is click one of the options.
I'm trying to make a responsive hamburger menu, however, I've run into a brick wall at the final part of the coding for the menu...
I've tried everything that I can think of trying. For some reason, my menu will not completely disappear or appear at all with the adjustments I've made to the code.
With the final adjustment, the menu is not visible, as I have specified for it not to be in the code, but when I click on the menu button the menu doesn't toggle.
Here is my code:
const ul = document.querySelector('.menu ul');
burger.addEventListener('click', () => {
ul.classList.toggle('change');
});
.menu ul {
position: absolute;
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
visibility: hidden;
}
.change {
visibility: visible;
}
.burger {
cursor: pointer;
display: inline-block;
align-items: center;
justify-content: flex-end;
position: fixed;
}
<div class="menu">
<nav>
<ul class>
<li>Home</li>
<li>Men</li>
<li>Women</li>
<li>Accessories</li>
<li>About</li>
<li>Contact</li>
</ul>
<div class="burger">
<div class="bar"></div>
</div>
</nav>
</div>
Please anything helps :')
You need to increase the specificity of the menu, since you have declared the initial styles for the unordered list with greater specificity than the .change class.
const ul = document.querySelector('.menu ul');
const burger = document.querySelector('.burger');
burger.addEventListener('click', () => {
ul.classList.toggle('change');
});
.menu ul {
position: absolute;
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
visibility: hidden;
}
.menu ul.change {
visibility: visible;
}
.burger {
cursor: pointer;
display: inline-block;
align-items: center;
justify-content: flex-end;
position: fixed;
}
.bar {
display: inline-block;
width: 20px;
height: 20px;
background: #000;
}
<div class="menu">
<nav>
<ul class>
<li>Home</li>
<li>Men</li>
<li>Women</li>
<li>Accessories</li>
<li>About</li>
<li>Contact</li>
</ul>
<div class="burger">
<div class="bar"></div>
</div>
</nav>
</div>
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
I face an issue while I want to align my sign-in form of test website not align to center.
can anyone help me to resolve this issue?
for better understanding here I attached my js form and CSS file.
.form {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.form-container {
display: flex;
flex-direction: column;
width: 32rem;
padding: 2rem;
border: 0.1rem #c0c0c0 solid;
border-radius: 0.5rem;
list-style-type: none;
}
.form-container li {
display: flex;
flex-direction: column;
margin-bottom: 1rem;
margin-top: 1rem;
}
input {
padding: 1rem;
border: 0.1rem #c0c0c0 solid;
border-radius: 0.5rem;
}
<form onSubmit={submitHandler}>
<ul className="form-container">
<li>
<h2>
Sign In
</h2>
</li>
<li>
<label for="email">
Email
</label>
</li>
<li>
<label for="password"> Password </label>
</li>
<li>
<button>Signin</button>
</li>
<li>
New to Tangail Saree?
</li>
<li>
<Link to="/register"> Create your account</Link>
</li>
</ul>
</form>
Edit: It solved. I use dot in front of form that's the reason it not working.
You applied css to .form instead of form
change .form to form
form {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
This works!
form {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.form-container {
display: flex;
flex-direction: column;
width: 32rem;
padding: 2rem;
border: 0.1rem #c0c0c0 solid;
border-radius: 0.5rem;
list-style-type: none;
}
.form-container li {
display: flex;
flex-direction: column;
margin-bottom: 1rem;
margin-top: 1rem;
}
input {
padding: 1rem;
border: 0.1rem #c0c0c0 solid;
border-radius: 0.5rem;
}
<html>
<body>
<form onSubmit={submitHandler}>
<ul className="form-container">
<li>
<h2>
Sign In
</h2>
</li>
<li>
<label for="email">
Email
</label>
</li>
<li>
<label for="password"> Password </label>
</li>
<li>
<button>Signin</button>
</li>
<li>
New to Tangail Saree?
</li>
<li>
<Link to="/register"> Create your account</Link>
</li>
</ul>
</form>
</body>
</html>
I have a nav bar that I've made in Gatsby using SCSS to style it. For some reason, the "Luke" element and the rest of the list are slightly misaligned vertically. I'm not sure why and have tried vertical align which didn't work. I'm using Gatsby, SCSS.
header.js
return(
<header className={headerStyles.header}>
<h1 className={headerStyles.logo}>Luke</h1>
<nav>
<ul className={headerStyles.navList}>
<li>
<Link className={headerStyles.navItem} activeClassName={headerStyles.activeNavItem} to="/">Home</Link>
</li>
<li>
<Link className={headerStyles.navItem} activeClassName={headerStyles.activeNavItem} to="about">About</Link>
</li>
<li>
<Link className={headerStyles.navItem} activeClassName={headerStyles.activeNavItem} to="blog">Blog</Link>
</li>
<li>
<Link className={headerStyles.navItem} activeClassName={headerStyles.activeNavItem} to="contact">Contact</Link>
</li>
</ul>
</nav>
</header>
)
header.module.scss
.header{
padding-top: 40px;
padding-bottom: 50px;
display: flex;
align-items: center;
justify-content: space-between;
}
.nav-list{
justify-content: flex-end;
display: flex;
list-style-type: none;
margin: 0;
}
.nav-item{
color: white;
font-size: .9rem;
margin-right: 1.3rem;
text-decoration: none;
}
Given the code you have provided, it already looks vertically aligned. Is there any other css affecting the page?
.header {
padding-top: 40px;
padding-bottom: 50px;
display: flex;
align-items: center;
justify-content: space-between;
}
.nav-list {
justify-content: flex-end;
display: flex;
list-style-type: none;
margin: 0;
}
.nav-item {
color: white;
font-size: .9rem;
margin-right: 1.3rem;
text-decoration: none;
}
<header class='header'>
<h1 class='logo'>Luke</h1>
<nav>
<ul class='navList'>
<li>
<a class='navItem'>Home</a>
</li>
<li>
<a class='navItem'>About</a>
</li>
<li>
<a class='navItem'>Blog</a>
</li>
<li>
<a class='navItem'>Contact</a>
</li>
</ul>
</nav>
</header>
I want to display Latest chat person 1st position(active) with firebase but firebase have not date field. so i am tring date number of milliseconds with flexbox column-reverse that will start from top but not from bottom. I have tried with position but not working.
Would you please give me a good way to do this.
.container {
display: flex;
flex-direction: column-reverse;
/*flex-flow: flex-start;*/
justify-content: flex-end;
align-items: flex-start;
height: 700px;
width: 100%;
background: blue;
position: absolute;
overflow:auto;
}
.box {
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin: 20px;
width: 50px;
height: 50px;
background-color: red;
top:0px;
}
.active{
order:1;
}
<ul class="container">
<li class="box">1</li>
<li class="box">2</li>
<li class="box active">3</li>
<li class="box">4</li>
<li class="box">5</li>
<li class="box">6</li>
</ul>
Change justify-content property to flex-end - see demo below:
.container {
display: flex;
flex-direction: column-reverse;
/*flex-flow: flex-start;*/
justify-content: flex-end; /* CHANGED */
align-items: flex-start;
height: 700px;
width: 100%;
background: blue;
position: absolute;
overflow:auto;
}
.box {
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin: 20px;
width: 50px;
height: 50px;
background-color: red;
top:0px;
}
<ul class="container">
<li class="box">1</li>
<li class="box">2</li>
<li class="box">3</li>
<li class="box">4</li>
<li class="box">5</li>
<li class="box">6</li>
</ul>
I was in the same situation, how I hacked it is by having the flex property - order saved in firebase for every post. Flex has an order property which you can set. It makes the ordering of elements very easy.
Just set order property and value fetched from firebase to your every post.
Here is the link of the page, I have used it on: https://hackinbits.com/blog
Here is the link to the MDN docs: Set https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items#The_order_property