Sign in Form not align to center [duplicate] - javascript

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>

Related

Scroll block with narrowing of another

Tell me how this functionality is implemented, we scroll the block (red in the screenshot) and start reducing the left button filters (green in the screenshot), in which way should I go? Maybe you have examples with code?
.wrapper {
display: flex;
height: 3rem;
width: 220px;
}
button {
display: flex;
align-items: center;
}
.tags {
overflow-x: scroll;
display: flex;
gap: 10px;
}
.tag {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-weight: 700;
padding: 0 10px;
background: grey;
color: white;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
<div class="wrapper">
<button>
<span class="material-icons orange600">face</span>
Filter
</button>
<div class="tags">
<div class="tag">one</div>
<div class="tag">two</div>
<div class="tag">three</div>
<div class="tag">four</div>
</div>
</div>
EDIT 1: Video example https://www.veed.io/view/6599056d-4f98-4995-8a7a-d052c86812d3

CSS transition all for opening and closing navbar not working

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.

Cannot overwrite justify-content using Javascript [duplicate]

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>

How to use jquery or javaScript to select an item and click OK to put the item in the input box?

Hello everyone~ I am a beginner in programming, and I am completing a task today! But I have some difficulties~
I hope everyone can help me. My English is not very good, but I try to describe my problem completely!
Expected effect
Click the input box to pop up the window
Click the item, the selected item will have a yellow background, and then press confirm to put the selected item in the input input box, and then the pop-up window will disappear.
If you click cancel, the original options will be kept, and the pop-up window will disappear.
However, I just learned jquery recently. I don't know how to implement click confirm and put the item in the input, and how to click cancel to keep the original item and pop out of the window.
Hope you can get help here, thank you again for watching.
$(function(){
$('.input_box').on('click',function(){
$('.sport').css('display','block');
})
$('.sport').click(function(e){
if(e.target.classList.contains('sport')){
$(this).css('display','none');
}
})
$('.sport').click(function(e){
if(e.target.classList.contains('sport')){
$(this).css('display','none');
}
})
$('.item').on('click',function(){
$(this).toggleClass('active');
})
// How to rewrite this program
$('.confirm').on('click',function(e){
// only a little change here
const val = e.target.getAttribute("value");
$('.input_box').val(val);
$('.sport_content').trigger("click");
})
});
.input_box {
width: 500px;
height: 60px;
font-size: 30px;
}
.sport {
background-color: rgba(0, 0, 0, 0.3);
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
display: none;
}
.sport_content {
width: 500px;
padding: 20px;
margin: 0 auto;
background-color: red;
}
.sport_content .title {
text-align: center;
padding: 10px;
font-size: 30px;
font-weight: 800;
}
.sport_content .category {
display: flex;
}
.sport_content .category .item {
width: 100px;
border: 1px solid #fff;
text-align: center;
border-radius: 10px;
padding: 10px;
margin: 10px;
}
.sport_content .category .active {
background-color: yellow;
}
.sport_content .footer {
display: flex;
justify-content: space-between;
margin-top: 30px;
}
.sport_content .footer .cancel {
padding: 20px;
background-color: #fff;
}
.sport_content .footer .confirm {
padding: 20px;
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="">Choose your favorite sport</label><br>
<input type="text" placeholder="Put in your favorite sports" class="input_box">
<div class="sport">
<div class="sport_content">
<h2 class="title">Aerobic exercise</h2>
<ul class="category">
<li class="item" value="RUN">RUN</li>
<li class="item" value="SWIM">Swim</li>
<li class="item" value="bicycle">bicycle</li>
</ul>
<h2 class="title">Strength training</h2>
<ul class="category">
<li class="item" value="weightlifting">weightlifting</li>
<li class="item" value="Stand up">Stand up</li>
<li class="item" value="Barbell">Barbell</li>
</ul>
<div class="footer">
<button class="cancel">cancel</button>
<button class="confirm">confirm</button>
</div>
</div>
</div>

There is no big differents between one and multi.hope you can learn it by youself
$(function(){
$('.input_box').on('click',function(){
$('.sport').css('display','block');
})
$('.sport').click(function(e){
if(e.target.classList.contains('sport')){
$(this).css('display','none');
}
})
$('.sport').click(function(e){
if(e.target.classList.contains('sport')){
$(this).css('display','none');
}
})
$('.item').on('click',function(){
$(this).toggleClass('active');
})
// How to rewrite this program
$('.confirm').on('click',function(e){
// still only a little change here
$(".sport").trigger('click');
var texts = ""
$(".item.active").each(function(idx,item){
texts += $(item).attr("value")+" "
})
$(".input_box").val(texts)
})
});
.input_box {
width: 500px;
height: 60px;
font-size: 30px;
}
.sport {
background-color: rgba(0, 0, 0, 0.3);
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
display: none;
}
.sport_content {
width: 500px;
padding: 20px;
margin: 0 auto;
background-color: red;
}
.sport_content .title {
text-align: center;
padding: 10px;
font-size: 30px;
font-weight: 800;
}
.sport_content .category {
display: flex;
}
.sport_content .category .item {
width: 100px;
border: 1px solid #fff;
text-align: center;
border-radius: 10px;
padding: 10px;
margin: 10px;
}
.sport_content .category .active {
background-color: yellow;
}
.sport_content .footer {
display: flex;
justify-content: space-between;
margin-top: 30px;
}
.sport_content .footer .cancel {
padding: 20px;
background-color: #fff;
}
.sport_content .footer .confirm {
padding: 20px;
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="">Choose your favorite sport</label><br>
<input type="text" placeholder="Put in your favorite sports" class="input_box">
<div class="sport">
<div class="sport_content">
<h2 class="title">Aerobic exercise</h2>
<ul class="category">
<li class="item" value="RUN">RUN</li>
<li class="item" value="SWIM">Swim</li>
<li class="item" value="bicycle">bicycle</li>
</ul>
<h2 class="title">Strength training</h2>
<ul class="category">
<li class="item" value="weightlifting">weightlifting</li>
<li class="item" value="Stand up">Stand up</li>
<li class="item" value="Barbell">Barbell</li>
</ul>
<div class="footer">
<button class="cancel">cancel</button>
<button class="confirm">confirm</button>
</div>
</div>
</div>

Align header elements vertically gatsby JS, SCSS

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>

Categories