I want to align my two divs. When I change screen resolution divs look weird. Here is picture of 1440 x 900 resoluton:
1440x900
And here is 1920 x 1080 screen:
1920x1080
I want to align 2nd div to first in order for screen to look like in the second picture, no matter the resolution.
Here is my Code :
.totalPriceDiv {
float: right;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
margin-top: 1rem;
margin-right: 22%;
}
.totalPrice {
background: none;
outline: none;
color: black;
border: none;
width: 100px;
font-size: 1rem;
padding: 0.115rem;
}
.totalPriceItem {
background: none;
outline: none;
color: black;
border: none;
width: 200px;
font-size: 1rem;
padding: 0.115rem;
}
<h1>My project</h1>
<div class="input_div">
<input class="inputMovieName" type="text" placeholder="Input 1">
<input class="inputMoviePrice" type="text" placeholder="Input 2">
<button class="addButton">Button</button>
</div>
<div class="container">
<div class="itemFirstRow">
<input type="text" class="item_input" disabled value="#">
<input type="text" class="item_input" disabled value="Input 1">
<input type="text" class="item_input" disabled value="Input 2">
</div>
<ul id="the-ul">
</ul>
</div>
<div class="totalPriceDiv">
<div>
<input type="text" class="totalPrice" disabled value="First: ">
<input id="totalAmount" type="text" class="totalPriceItem" value="0" disabled>
</div>
<div>
<input type="text" class="totalPrice" disabled value="Second: ">
<input id="discount" type="text" class="totalPriceItem" value="0" disabled>
</div>
<div id="border">
<input type="text" class="totalPrice" disabled value="Third: ">
<input id="afterDiscount" type="text" class="totalPriceItem" value="0" disabled>
</div>
</div>
<script type="text/javascript" src="main.js"></script>
Simple solution. You just follow basic bootstrap framework structure.
`
<div class="container">
<h1>xxxx</h1>
<div class="row">
<div class="col-offset-3 col-6">
Bootstrap form-group code comes here
</div>
</div> <div class="row"> block1</div>
</div>
`
Then it automatically behaves in responsive way.
Also, arrange using grid columns. like display: grid; and grid-gap: 10px;,
.input_div {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
.itemFirstRow {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
.totalPriceDiv {
display: flex;
align-items: flex-end;
flex-direction: column;
justify-content: center;
text-align: center;
margin-top: 1rem;
}
.totalPriceDiv > div {
border-bottom: 1px solid #ddd;
}
.totalPrice {
background: none;
outline: none;
color: black;
border: none;
width: 100px;
font-size: 1rem;
padding: 0.115rem;
align-items: flex-end;
}
.totalPriceItem {
background: none;
outline: none;
color: black;
border: none;
width: 200px;
font-size: 1rem;
padding: 0.115rem;
align-items: flex-end;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>My project</h1>
<div class="input_div">
<input class="inputMovieName" type="text" placeholder="Input 1">
<input class="inputMoviePrice" type="text" placeholder="Input 2">
<button class="addButton">Button</button>
</div>
<br/>
<div class="container">
<div class="itemFirstRow">
<input type="text" class="item_input" disabled value="#">
<input type="text" class="item_input" disabled value="Input 1">
<input type="text" class="item_input" disabled value="Input 2">
</div>
<ul id="the-ul">
</ul>
</div>
<div class="totalPriceDiv">
<div>
<input type="text" class="totalPrice" disabled value="First: ">
<input id="totalAmount" type="text" class="totalPriceItem" value="0" disabled>
</div>
<div>
<input type="text" class="totalPrice" disabled value="Second: ">
<input id="discount" type="text" class="totalPriceItem" value="0" disabled>
</div>
<div id="border">
<input type="text" class="totalPrice" disabled value="Third: ">
<input id="afterDiscount" type="text" class="totalPriceItem" value="0" disabled>
</div>
</div>
</body>
</html>
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));.
I think it will work.
check below the given example.
wrap your both div with a "div container" which will a css like this :
display: flex;
flex-direction: column;
And for your last div (i think is "totalPriceDiv") set your css with :
align-self: flex-end
and replace your margin and padding values ('rem', '%') by a fixed value ("px") or set this margin to the div container.
practice with this tool : flexy-boxes
Related
I have difficulty trying to put the input boxes for a form in the middle of the form, they don't seem to get affected by justify-content and align-items
(This question has been asked before, but I don't use labels, so the answers don't seem to work for me)
.form_exterior{
display: block;
width: 80vw;
height: fit-content;
width: 50vw;
background-color: #d3d3d3;
border: solid 1px;
border-radius: 60px;
margin: 50px auto;
}
.grid_form{
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
grid-gap: 20px;
}
.form_title{
display: flex;
justify-content: center;
}
.section_button_form{
text-align: center;
}
.form_boxes{
display: flex;
text-align: center;
width: 50%;
}
<section>
<article class="form_exterior">
<form class="form_items">
<section class="grid_form">
<h1 class="form_title">Personal Information</h1>
<input class="form_boxes" type="text" name="name" value="Name">
<input class="form_boxes" type="text" name="last name" value="Last name">
<input class="form_boxes" type="text" name="email" value="Email">
<input class="form_boxes" type="text" name="phone number" value="Phone number">
<h1 class="form_title">Shipping information</h1>
<select class="form_boxes" id="country" name="Select country">
<option>select country</option>
<option value="US">United States</option>
<option value="UK">United Kingdom</option>
<input class="form_boxes" type="text" name="city" value="City">
<input class="form_boxes" type="text" name="postal code" value="Postal code">
<input class="form_boxes" type="text" name="street" value="Street address">
</select>
<section class="section_button_form">
<button onclick="alertForm()" class="button_form" type="button" name="order_button">order</button>
<button class="button_form" type="button" name="go_back_button">go back</button>
</section>
</form>
</article>
</section>
You can try this, it might save your issue:
.grid_form{
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
grid-gap: 20px;
justify-items : center;
}
I believe your input boxes are block level elements and therefore are referenced to the width of their container.
You can set the width in your input element.
: The Input (Form Input) element
You could also try changing the display attribute on your input box to display: inline-block.
You might need to set a min-width on those elements also.
I have a problem with your form, how can I put the text and the elements at the same distance, e.g. show the label next to the fields, they are not on the same line, i.e. not centered on the line,
pls see pic on the Link
My Form
I have a problem with your form, how can I put the text and the elements at the same distance, e.g. show the label next to the fields, they are not on the same line, i.e. not centered on the line,
pls see pic on the Link
My Form
I have a problem with your form, how can I put the text and the elements at the same distance, e.g. show the label next to the fields, they are not on the same line, i.e. not centered on the line,
pls see pic on the Link
My Form
body{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
background-color: #FFBB00;
}
.container{
width: 40%;
margin: 4% auto;
padding: 50px;
background-color: #fff;
border-radius: 15px;
box-shadow: #ccc 0 0 10px 0; /* للظل لحتى يطلع متناسب */
}
.title h1{
position: relative;
text-align: center;
font-size: 28px;
text-transform: uppercase;
}
.title h1::after{
content: "";
width: 30%;
height: 3px;
background-color: #FFBB00;
position: absolute;
top: 110%;
left: 35%;
}
.inputFeld{
padding: 10px;
margin: 10px;
border-radius:4px;
border: 1px solid #ccc;
}
.inputFeld:focus{
background-color: #FFBB00; ;
}
/* */
.parent-line{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
padding: 15px;
}
.parent-line .line-link{
display: flex;
flex: 1;
}
.parent-line .line-right{
flex: 1;
display: flex;
}
.parent-one-line{
padding: 15px;
}
.container .line label{
display: inline-block;
width: 150px;
text-align: left;
}
/* */
.btn{
padding: 19px 10px;
margin-bottom: 500px;
background-color: #000;
color: #fff;
border: none;
float: right;
cursor: pointer;
width: 100%;
}
.btn:hover{
background-color: #FFBB00;
color: #000;
}
.checken{
padding: 10px;
}
.select{
padding: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet" href="style.css">
<style>
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap');
</style>
<body>
<section class="container">
<dic class="title"><h1>ITEMS VERLINKEN </h1></dic>
<form action="">
<!-- -->
<div class="parent-line">
<div class="line-link">
<div class="line"> <label class="" for=""> Link URL </label> <input class="inputFeld" type="text" name="" id="" > </div>
</div>
<div class="line-right">
<div class="line"> <label for=""> +articleNum+ </label> <input class="inputFeld" type="text" name="" id="" > </div>
</div>
</div>
<!-- -->
<div class="parent-line">
<div class="line-link">
<div class="line"> <label for=""> Full PDF name </label> <input class="inputFeld" type="text" name="" id="" placeholder="Example: test.pdf ">
</div>
</div>
<div class="line-right">
<div class="line"> <label for=""> Full PDF Links </label>
<input class="checkbox" type="checkbox" name="" id="">
</div>
</div>
</div>
<!-- -->
<div class="parent-line">
<div class="line-link">
<div class="line"> <label for=""> PDF Width in mm</label>
<input class="inputFeld" type="text" name="" id="" placeholder="Example: 212" size="4">
</div>
</div>
<div class="line-right">
<div class="line"> <label for=""> PDF Height in mm</label>
<input class="inputFeld" type="text" name="" id="" placeholder="Example: 290 " size="4">
</div>
</div>
</div>
<!-- -->
<div class="parent-line">
<div class="line-link">
<div class="line">
<label for=""> Border around links</label>
<select class="select" name="" id="">
<option value="">No</option>
<option value="">Yes</option>
</select>
</div>
</div>
<div class="line-right">
<div class="line"> <label for=""> Border(RGB):</label>
<input class="inputFeld" type="text" name="" id="" placeholder="R" size="1">
<input class="inputFeld" type="text" name="" id="" placeholder="G" size="1" >
<input class="inputFeld" type="text" name="" id="" placeholder="B" size="1">
</div>
</div>
</div>
<!-- -->
<div class="parent-line">
<div class="line-link">
<div class="line">
<label for=""> Border Width(mm)</label> <select class="select" name="" id="">
<option value="">0</option>
</select>
</div>
</div>
<div class="line-right">
<div class="line">
<label for="">Margin top (mm)</label> <select class="select" name="" id="">
<option value="">0</option>
</select>
</div>
</div>
</div>
<!-- -->
<div class="parent-one-line">
<div class="line"> <label for=""> Save settings: </label> <input class="inputFeld" type="text" name="" id="" placeholder="Example: Customer1 ">
<h5>Leave empty to prevent saving.</h5>
</div>
<input class="btn" type="button" value="Start">
</div>
</form>
</section>
</body>
</html>
Simply add align-items:center to
.parent-line .line-right{
flex: 1;
display: flex;
}
and increase/decrease input text height/font size to match the center.
I created the following form layout with CSS grids, and as the gif shows, zooming out in the browser causes the content seem to expand while shrinking, instead of just shrinking the content towards the center as a whole just like with zoomed out stackoverflow.
I've tried to use pixels instead of fr to size my containers and it solves my issue, but using fr for sizing grid columns gives much more precision and convenience.
Is there a solution for this or is it to just stop using fr for css grids?
*{
box-sizing: border-box;
margin: 0;
}
label {
display: block;
}
body {
display: grid;
grid-template-rows: 50px auto 50px;
align-content: center;
align-items: center;
}
#checkout {
margin: 20px 100px;
display: grid;
grid-template:
"shipping payment" auto/
3fr 4fr
;
grid-column-gap: 50px;
}
.form1 {
display: grid;
padding: 15px;
grid-row-gap: 10px;
}
.form1 input, select {
width: 100% ;
height: 35px;
border-radius: 5px;
border: 1px solid gray;
padding: 5px;
margin-top: 2px;
}
#shipping {
grid-area: shipping;
border-right: 1px solid lightgray;
}
#payMethod {
grid-area: payment;
display: grid;
grid-template-rows: auto;
grid-row-gap: 30px;
}
input[type="submit"] {
justify-self: end;
width: 250px;
height: 50px;
background-color: #013CA6;
color: white;
font-size: 18px;
}
.payment-method {
display: grid;
grid-template-columns: 20px 1fr;
grid-column-gap: 15px;
justify-content: center;
align-items: start;
}
.pay-label {
display: grid;
grid-template:
"img label"
"img description" /
50px 1fr
;
grid-column-gap: 15px;
}
.pay-description {
grid-area: description;
}
.payImg {
grid-area: img;
}
#header {
}
.two-cols {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 5px;
width: 100%;
}
img {
max-width: 100%;
}
.required {
color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="orderingStyle.css">
<title>Checkout Form</title>
</head>
<body>
<header id="header">
</header>
<main>
<form id="checkout">
<section id="shipping" class="form1">
<h2>Shipping Address</h2>
<div class="two-cols">
<div>
<label for="fName">First Name <span class="required">*</span></label>
<input type="text" name="fName" id="fName" placeholder="First Name" required/>
</div>
<div>
<label for="lName">Last Name <span class="required">*</span></label>
<input type="text" name="lName" id="lName" placeholder="Last Name" required/>
</div>
</div>
<div>
<label for="phoneNum">Phone Number <span class="required">*</span></label>
<input type="text" name="phoneNum" id="phoneNum" placeholder="Phone Number" required/>
</div>
<div>
<label for="stAddress">Street Address <span class="required">*</span></label>
<input type="text" name="stAddress" id="stAddress" placeholder="Street Address: Line 1" required/>
</div>
<div>
<label for="province">Province <span class="required">*</span></label>
<select name="province" id="province" required>
<option value="Abra">Abra</option>
<option value="Agusan del Norte">Agusan del Norte</option>
<option value="Agusan del Sur">Agusan del Sur</option>
<option value="Aklan">Aklan</option>
<option value="Albay">Albay</option>
<option value="Antique">Antique</option>
<option value="Apayao">Apayao</option>
<option value="Aurora">Aurora</option>
<option value="Basilan">Basilan</option>
<option value="Bataan">Bataan</option>
<option value="Batanes">Batanes</option>
<option value="Batangas">Batangas</option>
<option value="Biliran">Biliran</option>
<option value="Benguet">Benguet</option>
</select>
</div>
<div>
<label for="city">City <span class="required">*</span></label>
<select name="city" id="city" placeholder="Please select a city" required>
<option value="Alaminos">Alaminos</option>
<option value="Angeles">Angeles</option>
<option value="Antipolo">Antipolo</option>
<option value="Bacolod">Bacolod</option>
<option value="Bacoor">Bacoor</option>
<option value="Bago">Bago</option>
<option value="Baguio">Baguio</option>
<option value="Bais">Bais</option>
<option value="Balanga">Balanga</option>
</select>
</div>
</section>
<section id="payMethod">
<h2 style="border-bottom: 1px solid lightgray; padding: 10px;">Select Payment Method</h2>
<div class="payment-method">
<input type="radio" name="paymentOpt" value="BDO" id="bdo" required/>
<label class="pay-label" for="bdo"> <img class="payImg" src="https://www.firstbenefits.org/wp-content/uploads/2017/10/placeholder.png" alt="BDO icon"/>
<p>BDO Online Installment</p>
<p class="pay-description">Up to 12 months installment term based on installment price. Promo price may not be applicable.</p>
</label>
</div>
<div class="payment-method">
<input type="radio" name="paymentOpt" value="Metrobank" id="metrobank"/>
<label class="pay-label" for="metrobank"> <img class="payImg" src="https://www.firstbenefits.org/wp-content/uploads/2017/10/placeholder.png" alt="Metrobank icon"/>
<p>Metrobank Online Installment</p>
<p class="pay-description">Up to 12 months installment term based on installment price. Promo price may not be applicable.</p>
</label>
</div>
<div class="payment-method">
<input type="radio" name="paymentOpt" value="COD" id="cod"/>
<label class="pay-label" for="cod"> <img class="payImg" src="https://www.firstbenefits.org/wp-content/uploads/2017/10/placeholder.png" alt="Cash on Delivery icon"/>
<p>Cash on Delivery</p>
<p class="pay-description">Within P30,000 and Metro Manila, Cavite, Laguna only.</p>
</label>
</div>
<div class="payment-method">
<input type="radio" name="paymentOpt" value="GCash" id="gcash"/>
<label class="pay-label" for="gcash"> <img class="payImg" src="https://www.firstbenefits.org/wp-content/uploads/2017/10/placeholder.png" alt="GCash icon"/>
<p>GCash</p>
<!--<p class="pay-description">Within P30,000 and Metro Manila, Cavite, Laguna only.</p>-->
</label>
</div>
<input type="submit" value="PLACE ORDER">
</section>
</form>
</main>
</body>
</html>
Wrap the the form elements in an additional div use that as your grid container and set a max width to the form, centering the grid container.
#checkout {
/*Adjust max width as required*/
max-width:2000px;
/*Center the contents*/
margin: 0 auto;
}
#checkout .wrap {
margin: 20px 100px;
display: grid;
grid-template: "shipping payment" auto/ 3fr 4fr;
grid-column-gap: 50px;
}
* {
box-sizing: border-box;
margin: 0;
}
label {
display: block;
}
body {
display: grid;
grid-template-rows: 50px auto 50px;
align-content: center;
align-items: center;
}
.form1 {
display: grid;
padding: 15px;
grid-row-gap: 10px;
}
.form1 input,
select {
width: 100%;
height: 35px;
border-radius: 5px;
border: 1px solid gray;
padding: 5px;
margin-top: 2px;
}
#shipping {
grid-area: shipping;
border-right: 1px solid lightgray;
}
#payMethod {
grid-area: payment;
display: grid;
grid-template-rows: auto;
grid-row-gap: 30px;
}
input[type="submit"] {
justify-self: end;
width: 250px;
height: 50px;
background-color: #013CA6;
color: white;
font-size: 18px;
}
.payment-method {
display: grid;
grid-template-columns: 20px 1fr;
grid-column-gap: 15px;
justify-content: center;
align-items: start;
}
.pay-label {
display: grid;
grid-template: "img label" "img description" / 50px 1fr;
grid-column-gap: 15px;
}
.pay-description {
grid-area: description;
}
.payImg {
grid-area: img;
}
#header {}
.two-cols {
display: grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 5px;
width: 100%;
}
img {
max-width: 100%;
}
.required {
color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="orderingStyle.css">
<title>Checkout Form</title>
</head>
<body>
<header id="header">
</header>
<main>
<form id="checkout">
<div class="wrap">
<section id="shipping" class="form1">
<h2>Shipping Address</h2>
<div class="two-cols">
<div>
<label for="fName">First Name <span class="required">*</span></label>
<input type="text" name="fName" id="fName" placeholder="First Name" required/>
</div>
<div>
<label for="lName">Last Name <span class="required">*</span></label>
<input type="text" name="lName" id="lName" placeholder="Last Name" required/>
</div>
</div>
<div>
<label for="phoneNum">Phone Number <span class="required">*</span></label>
<input type="text" name="phoneNum" id="phoneNum" placeholder="Phone Number" required/>
</div>
<div>
<label for="stAddress">Street Address <span class="required">*</span></label>
<input type="text" name="stAddress" id="stAddress" placeholder="Street Address: Line 1" required/>
</div>
<div>
<label for="province">Province <span class="required">*</span></label>
<select name="province" id="province" required>
<option value="Abra">Abra</option>
<option value="Agusan del Norte">Agusan del Norte</option>
<option value="Agusan del Sur">Agusan del Sur</option>
<option value="Aklan">Aklan</option>
<option value="Albay">Albay</option>
<option value="Antique">Antique</option>
<option value="Apayao">Apayao</option>
<option value="Aurora">Aurora</option>
<option value="Basilan">Basilan</option>
<option value="Bataan">Bataan</option>
<option value="Batanes">Batanes</option>
<option value="Batangas">Batangas</option>
<option value="Biliran">Biliran</option>
<option value="Benguet">Benguet</option>
</select>
</div>
<div>
<label for="city">City <span class="required">*</span></label>
<select name="city" id="city" placeholder="Please select a city" required>
<option value="Alaminos">Alaminos</option>
<option value="Angeles">Angeles</option>
<option value="Antipolo">Antipolo</option>
<option value="Bacolod">Bacolod</option>
<option value="Bacoor">Bacoor</option>
<option value="Bago">Bago</option>
<option value="Baguio">Baguio</option>
<option value="Bais">Bais</option>
<option value="Balanga">Balanga</option>
</select>
</div>
</section>
<section id="payMethod">
<h2 style="border-bottom: 1px solid lightgray; padding: 10px;">Select Payment Method</h2>
<div class="payment-method">
<input type="radio" name="paymentOpt" value="BDO" id="bdo" required/>
<label class="pay-label" for="bdo"> <img class="payImg" src="https://www.firstbenefits.org/wp-content/uploads/2017/10/placeholder.png" alt="BDO icon"/>
<p>BDO Online Installment</p>
<p class="pay-description">Up to 12 months installment term based on installment price. Promo price may not be applicable.</p>
</label>
</div>
<div class="payment-method">
<input type="radio" name="paymentOpt" value="Metrobank" id="metrobank" />
<label class="pay-label" for="metrobank"> <img class="payImg" src="https://www.firstbenefits.org/wp-content/uploads/2017/10/placeholder.png" alt="Metrobank icon"/>
<p>Metrobank Online Installment</p>
<p class="pay-description">Up to 12 months installment term based on installment price. Promo price may not be applicable.</p>
</label>
</div>
<div class="payment-method">
<input type="radio" name="paymentOpt" value="COD" id="cod" />
<label class="pay-label" for="cod"> <img class="payImg" src="https://www.firstbenefits.org/wp-content/uploads/2017/10/placeholder.png" alt="Cash on Delivery icon"/>
<p>Cash on Delivery</p>
<p class="pay-description">Within P30,000 and Metro Manila, Cavite, Laguna only.</p>
</label>
</div>
<div class="payment-method">
<input type="radio" name="paymentOpt" value="GCash" id="gcash" />
<label class="pay-label" for="gcash"> <img class="payImg" src="https://www.firstbenefits.org/wp-content/uploads/2017/10/placeholder.png" alt="GCash icon"/>
<p>GCash</p>
<!--<p class="pay-description">Within P30,000 and Metro Manila, Cavite, Laguna only.</p>-->
</label>
</div>
<input type="submit" value="PLACE ORDER">
</section>
</div>
</form>
</main>
</body>
</html>
I'm learning css grid and i'm trying to arrange a page with inputs and other stuff.
Nothing works for some reason and i can't figure out what the problem is.
The form doesn't show any reaction, doesn't move at all.
Here's the html code:
<div className="shipment-page">
<div className="shipment-form">
<form onSubmit={this.handleSubmit}>
<div className="first-input">
<label className="sp-input-label" htmlFor="first_name">First Name</label>
<input
type="text"
name='first_name'
className="sp-input first"
value={this.state.first_name}
onChange={this.handleChange}
required
/>
</div>
<div className="second-input">
<label className="sp-input-label" htmlFor="last_name">Last Name</label>
<input
type="text"
name='last_name'
className="sp-input second"
value={this.state.last_name}
onChange={this.handleChange}
required
/>
</div>
<div className="third-input">
<label className="sp-input-label" htmlFor="address">Address</label>
<input
type="text"
name='address'
className="sp-input"
value={this.state.address}
onChange={this.handleChange}
required
/>
</div>
<div className="fourth-input">
<label className="sp-input-label" htmlFor="Zip Code">Zip Code</label>
<input
type="number"
name='zip_code'
className="sp-input"
value={this.state.zip_code}
onChange={this.handleChange}
required
/>
</div>
<div className="fifth-input">
<label className="sp-input-label" htmlFor="phone_number">Phone Number</label>
<input
type="number"
name='phone_number'
className="sp-input"
value={this.state.phone_number}
onChange={this.handleChange}
required
/>
</div>
<div className="check-current-address">
<label htmlFor="current_address">Is this your current address? </label>
<input
type="radio"
name="current_address"
value={true}
onChange={this.handleChange}
required
/><span>Yes</span>
<input
type="radio"
name="current_address"
value={false}
onChange={this.handleChange}
required
/><span>No</span>
</div>
<CustomButton type='submit'>Add Address</CustomButton>
</form>
</div>
<span className="progress-indicator">
<StepProgress/>
</span>
</div>
and here's the sass code:
.shipment-page{
margin: 100px;
display: grid;
grid-template-columns: repeat(2, minmax(375px, 1fr)) minmax(300px, 1fr);
grid-template-rows: repeat(6, 50px) 1fr;
grid-template-areas:
"first second info-box"
"third third info-box"
"fourth fifth info-box"
"check . ."
"buttons . ."
"progres progres progres";
.shipment-form{
grid-row: 1/6;
grid-column: 1/3;
.first-inputs{
grid-area: first;
}
.second-inputs{
grid-area: second;
}
.third-inputs{
grid-area: third;
}
.fourth-inputs{
grid-area: fourth;
}
.fifth-inputs{
grid-area: fifth;
}
.sp-input{
background: none;
background-color: white;
color: grey;
font-size: 18px;
padding: 10px 10px 10px 5px;
width: 100%;
border: none;
border-radius: 0;
border-bottom: 1px solid grey;
&:focus{
outline: none;
color: black;
border-bottom: 1px solid black;
}
}
.check-current-address{
margin-bottom: 25px;
}
}
.progress-indicator{
grid-area: progres;
}
}
how the page looks like now
how it should look like
Help.
The form isn't responding the way you expect because only direct grid children matter (just like with flexbox). .shipment-form is a valid grid child because it's one level deep from the grid parent, .shipment-page.
<div className="shipment-page"> <!-- grid parent -->
<div className="shipment-form"> <!-- grid child -->
<form onSubmit={this.handleSubmit}> <!-- too deep—not a grid child -->
Try to restructure your code so that the grid parent is one level above your form input containers. Also, you have a potential bug in your code. Your CSS is referencing the plural inputs but your HTML class is using the singular input
<div className="first-input">
And then:
.first-inputs{ ... } /* Oops, that class does not exist in your HTML */
How can I align a radiobuttonlist horizontally? This one is to capture a gender value , male/female. I want to keep the name input css the same. This is the html:
<label for="temp">Gender</label>
<label for="one">Male</label>
<input type="radio" id="one" name="first_item" value="1" />
<label for="two">Female</label>
<input type="radio" id="one" name="first_item" value="2" />
The css:
.grid-container {
display: grid;
grid-column-gap: 5px;
grid-template-columns: auto auto;
background-color: #2196f3;
padding: 10px;
}
.left-griditem {
}
input,
label {
display: block;
}
Here is a codepen. Currently the buttons are in a vertical position.
If you want only the radio buttons, add this style:
#genderArea input, #genderArea label{
display: inline;
}
and use this HTML:
<div class="grid-container">
<div class="left-griditem">
<label for="name">Name</label>
<input id="name" type="text" name="name">
<label for="temp">Gender</label>
<span id="genderArea">
<label for="one">Male</label>
<input type="radio" id="one" name="first_item" value="1" />
<br>
<label for="two">Female</label>
<input type="radio" id="one" name="first_item" value="2" />
</span>
</div>
<div class="right-griditem">2</div>
</div>
You have to wrap particular row which you want to make under a div/ a tag.
.grid-container {
display: grid;
grid-column-gap: 5px;
grid-template-columns: auto auto;
background-color: #2196f3;
padding: 10px;
}
.left-griditem {}
input,
label {
display: inline-block;
}
div.item>label:first-child {
width: 70px;
font-weight: bold;
}
div.item:first-child>input,
div.item:first-child>label {
display: block
}
body {
background: hsl(221, 64%, 24%);
color: hsl(235, 9%, 39%);
font-family: "Open Sans", sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
margin: 2rem 1rem 1rem 1rem;
}
div {
background: #fff;
padding: 1vw 2vw;
}
<div class="grid-container">
<div class="left-griditem">
<div class="item">
<label for="name">Name</label>
<input id="name" type="text" name="name">
</div>
<div class="item">
<label for="temp">Gender</label>
<label for="one">Male</label>
<input type="radio" id="one" name="first_item" value="1" />
<label for="two">Female</label>
<input type="radio" id="two" name="first_item" value="2" />
</div>
</div>
<div class="right-griditem">2</div>
</div>
Try this simple code using table, tr and td tags
<table>
<tr>
<td>
<label for="one">Male</label>
</td>
<td>
<input type="radio" id="one" name="first_item" value="1" />
</td>
<td style="widht:20px;"></td>
<td>
<label for="two">Female</label>
</td>
<td>
<input type="radio" id="one" name="first_item" value="2" />
</td>
</tr>
</table>
This approach gives you the flexibility to put controls, the way you want
Change this:
input,
label {
display: block;
}
To this:
input,
label {
display: inline;
}