I want to make a form for my react project. I have a text and it's corresponding text field against it. I tried using flexbox but I didn't do it right. This is my code
<div className="time-from-container">
<h4 style={styles.fontStyle}>From : </h4>
<TextField
id="time_in"
underlineFocusStyle={{borderColor: '#293C8E'}}
floatingLabelFocusStyle={{color: '#293C8E'}}
style={{width: 120}}
value={this.secondsToHms(this.props.new_marker_reducer.start)}
floatingLabelText="Start Time"
/>
</div>
<div className="time-to-container">
<h4 style={styles.fontStyle} >To :</h4>
<TextField
id="time_out"
underlineFocusStyle={{borderColor: '#293C8E'}}
floatingLabelFocusStyle={{color: '#293C8E'}}
style={{width: 120}}
value={this.secondsToHms(this.props.new_marker_reducer.end)}
floatingLabelText="End Time"
/>
</div>
I want to align then like this
How should I do it?
You can use flexbox and give the h4 a width
* {
margin: 0;
}
div {
display: flex;
margin: 0 0 1em;
align-items: center;
}
h4 {
width: 80px;
}
<div>
<h4>From: </h4>
<input type="text">
</div>
<div>
<h4>To: </h4>
<input type="text">
</div>
Or you can use the table display properties to mimic a table layout
* {
margin: 0;
}
.parent {
display: table;
}
.parent > div {
display: table-row;;
}
h4,input {
display: table-cell;
margin: 0 0 1em;
}
h4 {
padding-right: 1em;
}
<div class="parent">
<div>
<h4>From: </h4>
<input type="text">
</div>
<div>
<h4>To: </h4>
<input type="text">
</div>
</div>
.time-from-container h4, .time-to-container h4 {
display:inline-block;
width:90px;
}
Related
I am trying to build a contact form which has fields such as name, phone-number, email, message & submit button. My core agenda is to make Email & message fields acquire 100% width of the contact form. (irrespective of screen size). Name & Phone number fields are responsive & will stay in a single line or go one below the other based on the screen size.
The design is is responsive & have applied flexbox to the .field section & also to .form-container section.
I am applying the flex basis to .w-100 which is not working. By making it flex-basis 100% it should take 100% of container width. But why it is not happing?
What is the mistake I am doing & how to resolve it ?
HTML Section:
<section id="contact" class="contact">
<h2>Contact Me</h2>
<form action="#">
<div class="form-container">
<div class="field">
<label>Name: </label>
<input type="text" placeholder="Name"></input>
</div>
<div class="field">
<label>Phone Number: </label>
<input type="tel" placeholder="Phone Number"></input>
</div>
<div class="field w-100">
<label>Email: </label>
<input type="mail" placeholder="Email"></input>
</div>
<div class="field w-100">
<label>Message: </label>
<textarea cols="30" rows="3"></textarea>
</div>
</div>
<div class="submit-form">
<input type="submit" class="button" value="send" />
</div>
</form>
</section>
CSS Section:
form {
background-color: var(--grey);
padding: 2rem;
border-radius: 1rem;
}
.field {
display: flex;
margin-bottom: 1rem;
}
.field label {
flex: 0 0 90px;
color: var(--white);
}
.field input[type="text"],
.field input[type="tel"],
.field input[type="mail"],
.field textarea {
flex: 1;
}
.w-100 {/*this field not working*/
flex: 0 0 100%;
}
#media(min-width: 768px) {
form {
max-width: 800px;
margin: 0 auto;
}
.form-container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.field {
flex: 0 0 calc(50% - 1rem);
}
}
Current Output:
Expected Output:
Thank you #Termani Afif, The property flex: 0 0 calc(50% - 1rem); was overriding in the media query.
This property should be at the bottom for us to get proper output:
.w-100 {
flex: 0 0 100%;
}
How to make input field change size without pushing text to next line?
enter image description here
Easiest way is going to be using display: flex, for more details read Basic concepts of flexbox on MDN.
Getting the labels the right width will require a bit of tweaking on your part, I've used .fieldGroup label { width: 10vw } as a loose value. Best is to use a pixel (px) value which will very much depend on the font family and size
/* BASIC RESET - not relvant to answer */ body { font: 16px sans-serif; margin: 0 }
.fieldGroup {
align-items: center;
display: flex;
gap: 1rem;
}
.fieldGroup:not(:last-of-type) { margin-bottom: 1rem }
.fieldGroup label { width: 10vw }
.fieldGroup input { flex-grow: 1 }
<form style="padding: 2rem">
<div class="fieldGroup">
<label>Name</label>
<input type="text" placeholder="Enter your name…">
</div>
<div class="fieldGroup">
<label>E-mail</label>
<input type="email" placeholder="Enter your e-mail…">
</div>
<div class="fieldGroup">
<label>Really long label here to easily test wrapping</label>
<input type="text" placeholder="???">
</div>
</form>
Use display: flex in CSS
.container {
width: 100px;
}
.flex {
display: flex;
align-items: center;
gap: 5px;
}
<div class="container">
<b>With Flex:</b>
<div class="flex">
<label>Name</label>
<input />
</div>
<br />
<b>Without Flex:</b>
<div>
<label>Name</label>
<input />
</div>
</div>
This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Spans vertical align with float
(1 answer)
How do I vertically align text in a div?
(34 answers)
Closed 4 years ago.
I'm relatively new to CSS and I'm having a weird issue:
Why is my "Forgot Password" span floating higher than "Remember Me"?
Here's the React component DOM:
<div>
<div id="loginTitle">
<h2>Welcome</h2>
<h1>Login</h1>
</div>
<div id="loginForm">
<form onSubmit={login}>
<label> Username:
<input id="username" type="text" className="loginBox" ref = {node => user = node}/>
</label>
<label> Password:
<input id="password" type="password" className="loginBox" ref = {node => pass = node}/>
</label>
<br />
<div>
<span id="loginCheck">
<input type="checkbox" id="rememberMe"/>
<label for="rememberMe">Remember Me</label>
</span>
<span id="forgotPass">Forgot Password?</span>
</div>
<input id="loginSubmit" type="submit" value="Sign In" />
</form>
</div>
</div>
And my CSS:
body {
padding: 0;
font-family: sans-serif;
}
#loginTitle {
margin: auto;
text-align: center;
}
#loginTitle h1 {
color: #4971b2;
}
#loginForm {
margin: auto;
width: 200px;
font-size: 10px;
}
#loginSubmit {
width: 100%;
display: block;
background-color: #4971b2;
color: white;
}
.loginBox {
width: 100%;
display: block;
}
#forgotPass {
float: right;
}
#loginCheck {
float: left;
}
How can I make the Forgot Password span align with the span next to it?
The problem is probably occurring because both spans have different heights, because the first one has a checkbox. You can fix this by using flexbox to center-align both spans in their container.
Add a class to the <div> that contains your <span>s:
<div class="some_class">
<span id="loginCheck">
<input type="checkbox" id="rememberMe"/>
<label for="rememberMe">Remember Me</label>
</span>
<span id="forgotPass">Forgot Password?</span>
</div>
Set the following styles on the <div> that contains the spans:
.some_class {
display: flex;
justify-content: space-between;
align-items: center;
}
This question is a follow-up to this answer to a similar question. I hope it is not considered a duplicate because I want to focus on the particular technique of "Vertical(ly) align(ing) anything with just 3 lines of CSS", and because I cannot get the technique to work.
Here is my jsfiddle: http://jsfiddle.net/hf31ofj3/ you may only see the issue in HTML 5 browsers because one of the inputs is a color picker, which is a different height than the other input fields, thus causing the vertical mis-alignment.
In any case one thing I've tried to do is change how I am selecting the elements to vertically align as follows, but to no avail
#basecfgattrs-row1 #width-input-container
#basecfgattrs-row1 #height-input-container
{
position: relative;
top: 50%;
transform: translateY(-50%);
}
Vertical alignment using `float is often problematical.
Use display:inline-block instead...with vertical-align:middle.
.input-col3 {
display: inline-block;
vertical-align: middle;
width: 32%;
}
#basecfgattrs input {
width: 44px;
}
#basecfgattrs-row1 {
position: relative;
}
#basecfgattrs-row1 div {}
<div id="basecfgattrs">
<div id="" basecfgattrs-row1 ">
<div class="input-col3 " id="width-input-container ">
<label>Chart Width</label>
<input name="width " id="width " />
</div>
<div class="input-col3 " id="height-input-container ">
<label>Chart Height</label>
<input name="height " id="height " />
</div>
<div class="input-col3 " id="dataSource-chart-bgColor-input-container ">
<label>Background Color</label>
<input name="dataSource-chart-bgColor " id="dataSource-chart-bgColor " type="color " class="colorpicker " />
</div>
</div>
</div>
Or you could use flexbox.
#basecfgattrs-row1 {
display: flex;
}
.input-col3 {
display: flex;
border: 1px solid red;
width: 32%;
align-items: center;
}
#basecfgattrs label {
flex: 1;
}
#basecfgattrs input {
flex: 0 0 44px;
margin-right: 1em;
}
<div id="basecfgattrs">
<div id="basecfgattrs-row1">
<div class="input-col3" id="width-input-container">
<label>Chart Width</label>
<input name="width" id="width" />
</div>
<div class="input-col3" id="height-input-container">
<label>Chart Height</label>
<input name="height" id="height" />
</div>
<div class="input-col3" id="dataSource-chart-bgColor-input-container">
<label>Background Color</label>
<input name="dataSource-chart-bgColor" id="dataSource-chart-bgColor" type="color" class="colorpicker" />
</div>
</div>
</div>
I'm trying to create two css container classes that can be used to:
Vertically align form elements using .group.
Horizontally align form elements using .group.group--inline.
Each for element will use the class .group__item to make sure there's 16px vertical and horizontal distance between the form elements. For example:
.group__item { margin-top: 16px; }
I however want to sure that the entire height and width of the .group can be used for the form elements and that there is no unwanted whitespace. Not having any margin around our components makes it easier to properly layout them.
To negate the margin on the .group__item's I'm adding it as negative margin to the .group and .group--inline. For example:
.group { margin-top: -16px; }
I'm wondering if there are any negative side effects to giving the .group container a negative margin?
function toggleGroupBorder() {
var groups = document.querySelectorAll('.group');
for (var i = 0, j = groups.length; i < j; i++) {
groups[i].classList.toggle('group--show-border');
}
}
.container {
margin: 32px;
padding: 32px;
border: 1px solid #99f;
}
.group {
margin-top: -16px;
}
.group.group--show-border {
border: 1px solid #f99;
}
.group .group__item {
display: block;
margin-top: 16px;
}
.group.group--inline {
margin-left: -16px;
}
.group.group--inline .group__item {
margin-left: 16px;
display: inline-block;
}
* {
box-sizing: border-box;
}
body {
font-family: Helvetica, Arial;
margin: 0;
}
input {
height: 32px;
padding: 0 8px;
}
button {
height: 32px;
padding: 0 24px;
border: none;
}
<button onclick="toggleGroupBorder();">Toggle Group Border</button>
<h2>Vertical field alignment using <code>.group</code></h2>
<div class="container">
<div class="group">
<input class="group__item" type="text" />
<input class="group__item" type="text" />
<button class="group__item" >Default</button>
</div>
</div>
<h2>Horizontal field alignment using <code>.group.group-inline</code></h2>
<div class="container">
<div class="group group--inline">
<input class="group__item" type="text" />
<input class="group__item" type="text" />
<button class="group__item" >Default</button>
<input class="group__item" type="text" />
<input class="group__item" type="text" />
<button class="group__item" >Default</button>
<input class="group__item" type="text" />
<input class="group__item" type="text" />
<input class="group__item" type="text" />
<button class="group__item" >Default</button>
</div>
</div>
Or see this CodePen