I made every option into a container, so I have 8 containers, from left to right, from top to bottom.
But for some unknown reason, item_container 3 and 4 are not following the alignment!! I've spent hours on this but no good. So frustrating right now.
Here is my html code. item_container 5~8 are basically the same as 1,2, and they aligned perfectly, so I didn't include them.
.page_item {
display: inline-block;
margin-left: 28px;
margin-right: 8px;
margin-bottom: 1px;
}
.page_field {
display: inline-block;
margin-right: 68px;
margin-bottom: 1px;
}
.page_check_field {
display: inline-block;
margin-right: 8px;
margin-bottom: 1px;
}
.page_container {
display: block;
width: 876px;
height: 74px;
}
.page_container .item_container1, .page_container .item_container2, .page_container .item_container3, .page_container .item_container4, .page_container .item_container5, .page_container .item_container6, .page_container .item_container7, .page_container .item_container8 {
display: inline-block;
}
.item_container1, .item_container2, .item_container3 .item_container4, .item_container5, .item_container6, .item_container7, .item_container8 {
display: inline-block;
width: 436px;
}
<div class="page_container">
<div class="item_container1">
<h6 class="page_item">User ID</h6>
<div class="page_field form-group form-group-label">
<label class="page_entry floating-label" for="..."> Entry User ID </label>
<input class="form-control" id="..." type="text">
</div>
</div>
<div class="item_container2">
<h6 class="page_item">Country</h6>
<div class="page_field form-group form-group-label">
<select class="page_entry form-control" id="...">
<option value="..."> Select </option>
<option value="..."> Country 1 </option>
<option value="..."> Country 2 </option>
<option value="..."> Country 3 </option>
<option value="..."> Country 4 </option>
<option value="..."> Country 5 </option>
<option value="..."> Country that has very long name </option>
</select>
</div>
</div>
</div>
<div class="page_container">
<div class="item_container3">
<h6 class="page_item">Email</h6>
<div class="page_field form-group form-group-label">
<label class="floating-label" for="..."> Entry User Email </label>
<input class="form-control" id="..." type="text">
</div>
</div>
<div class="item_container4">
<h6 class="page_item">User Type</h6>
<div class="page_check_field">
<div class="checkbox checkbox-adv">
<label for="check1">
<input class="access-hide" id="check1" name="check1" type="checkbox">Cosplayer
<span class="checkbox-circle"></span>
<span class="checkbox-circle-check"></span>
<span class="checkbox-circle-icon icon">done</span>
</label>
</div>
</div>
<div class="page_check_field">
<div class="checkbox checkbox-adv">
<label for="check2">
<input class="access-hide" id="check2" name="check2" type="checkbox">Cameraman
<span class="checkbox-circle"></span>
<span class="checkbox-circle-check"></span>
<span class="checkbox-circle-icon icon">done</span>
</label>
</div>
</div>
<div class="page_check_field">
<div class="checkbox checkbox-adv">
<label for="check3">
<input class="access-hide" id="check3" name="check3" type="checkbox">Organizer
<span class="checkbox-circle"></span>
<span class="checkbox-circle-check"></span>
<span class="checkbox-circle-icon icon">done</span>
</label>
</div>
</div>
</div>
</div>
There's a missing comma in this line that's probably causing your trouble
.item_container2, .item_container3 .item_container4,
The reason for this issue is .page-container don't width enough.
.item_container4 too large over the .page-container width.
To fix this simply you only need change width of .page-container larger .
Can be set width :
.page-container {
width: 920px;
.........
}
It work correctly!
Hope it help
.item_container1, .item_container2, .item_container3, .item_container4, .item_container5, .item_container6, .item_container7, .item_container8 {
display: inline-block;
width: 436px;
}
, between item_container3 and item_container4 is missing and i thought you might be adjust your width for better look
Related
This question already has answers here:
Positioning Form Elements [duplicate]
(4 answers)
How to align input forms in HTML
(17 answers)
Closed 4 months ago.
I am attempting to have my form input text boxes all line up. However, they are unaligned and I have been unable to solve this. What should I do?
body{
background-color: rgb(134, 210, 221)
}
.event{
display: inline;
float: left;
clear: both;
}
.radio1{
display: inline;
float: left;
}
.radio2{
float: left;
}
.gender{
display: block;
float: left;
clear: both;
}
.required{
color: red;
}
p{
clear: both;
}
label{
display: block;
float: left;
}
#date{
float: left;
}
.submit{
text-align: center;
}
input{
display: inline-block;
margin-left: 10px;
clear: both;
}
<body>
<form>
<p class="event"><span class="required">*</span>Select Event:</p>
<div class="radio1">
<p><input type="radio" id="stock">Stock</p>
<p><input type="radio" id="modified">Modified</p>
</div>
<p><span class="required">*</span>Last Name: <input type="text" name="lastname" id="lastname" />
</p>
<p><span class="required">*</span>First Name: <input type="text" name="firstname" id="firstname"></p>
<p><span class="required">*</span>Address: <input type="text" name="address" id="address"></p>
<p><span class="required">*</span>City: <input type="text" name="city" id="city"></p>
<p><span class="required">*</span>Province: <select name="selectprovince" id="selectprovince">Select Province
<option value="provinces">...</option>
<option value="provinces">AB</option>
<option value="provinces">BC</option>
<option value="provinces">MB</option>
<option value="provinces">NB</option>
<option value="provinces">NL</option>
<option value="provinces">NT</option>
<option value="provinces">NS</option>
<option value="provinces">NU</option>
<option value="provinces">ON</option>
<option value="provinces">PE</option>
<option value="provinces">QC</option>
<option value="provinces">SK</option>
<option value="provinces">YT</option>
</select></p>
<p><span class="required">*</span>Postal/Zip Code: <input type="text" name="postal" id="postal"></p>
<p><span class="required">*</span>Country: <input type="text" name="country" id="country"></p>
<p><span class="required">*</span>Email: <input type="text" name="country" id="country"></p>
<label for="date"><span class="required">*</span>Date of Birth</label>
<input type="date" name="date" id="date">
<p class="gender"><span class="required">*</span>Gender: </p>
<div class="radio2">
<p><input type="radio">Male</p>
<p><input type="radio">Female</p>
<p><input type="radio">Other</p>
</div>
<div class="bottom">
<p><span class="required">*</span>Boat Name: <input type="text" name="boat" id="boat"></p>
<p class="comments">Comments <textarea name="comments" form="form" id="comments" rows="7" cols="20"></textarea></p>
</div>
<p><span class="required">*</span>I agree to the waiver <input type="checkbox"> Yes </p>
<div class="submit">
<input type="submit" id="submit">
</div>
</form>
</select>
HTML structure is very important to understand and to learn how it works and how to put elements together. If you have a good HTML structure, it will be easy to edit and style.
One of your mistakes is that you put the input inside the p. So what you should do is put each row (elements group) in a container with flex display. and put them separated properly in a good structure. then give all elements on the left, the same width to align all right elements properly in a vertical line.
here I did that for the first three groups in your code. you can follow the same steps to do for the rest.
body{
background-color: rgb(134, 210, 221)
}
.container {
border: 1px solid red;
height: fit-content;
display: flex;
min-width: fit-content;
align-items: center;
}
.left {
display: flex;
flex-direction: row;
width: 100px;
/* height: 10px; */
border: 1px solid;
position: relative;
margin-right: 5px;
}
.right {
border: 1px solid blue;
width: 400px;
}
select {
display: flex;
}
.event{
/* display: inline;
float: left;
clear: both; */
}
.radio1{
/* display: inline;
float: left; */
}
.radio2{
/* float: left; */
}
.gender{
/* display: block;
float: left;
clear: both; */
}
.required{
color: red;
}
p{
/* clear: both; */
}
label{
/* display: block;
float: left; */
}
#date{
/* float: left; */
}
.submit{
text-align: center;
}
input{
/* display: inline-block;
margin-left: 10px;
clear: both; */
}
<form>
<div class="container">
<p class="event left"><span class="required">*</span>Select Event:</p>
<div class="radio1 right">
<p><input type="radio" id="stock">Stock</p>
<p><input type="radio" id="modified">Modified</p>
</div>
</div>
<div class="container">
<p class="left">
<span class="required">*</span>
Last Name:
</p>
<input class="right" type="text" name="lastname" id="lastname"/>
</div>
<div class="container">
<p class="left">
<span class="required">*</span>
First Name:
</p>
<input class="right" type="text" name="firstname" id="firstname">
</div>
<p class="left">
<span class="required">*</span>
Address:
<input class="right" type="text" name="address" id="address"></p>
<p class="left">
<span class="required">*</span>
City:
<input class="right" type="text" name="city" id="city"></p>
<p class="left"><span class="required">*</span>
Province:
<select class="right" name="selectprovince" id="selectprovince">Select Province
<option value="provinces">...</option>
<option value="provinces">AB</option>
<option value="provinces">BC</option>
<option value="provinces">MB</option>
<option value="provinces">NB</option>
<option value="provinces">NL</option>
<option value="provinces">NT</option>
<option value="provinces">NS</option>
<option value="provinces">NU</option>
<option value="provinces">ON</option>
<option value="provinces">PE</option>
<option value="provinces">QC</option>
<option value="provinces">SK</option>
<option value="provinces">YT</option>
</select>
</p>
<select>
<p><span class="required">*</span>Postal/Zip Code: <input type="text" name="postal" id="postal"></p>
<p><span class="required">*</span>Country: <input type="text" name="country" id="country"></p>
<p><span class="required">*</span>Email: <input type="text" name="country" id="country"></p>
<label for="date"><span class="required">*</span>Date of Birth</label>
<input type="date" name="date" id="date">
<p class="gender"><span class="required">*</span>Gender: </p>
<div class="radio2">
<p><input type="radio">Male</p>
<p><input type="radio">Female</p>
<p><input type="radio">Other</p>
</div>
<div class="bottom">
<p><span class="required">*</span>Boat Name: <input type="text" name="boat" id="boat"></p>
<p class="comments">Comments <textarea name="comments" form="form" id="comments" rows="7" cols="20"></textarea></p>
</div>
<p><span class="required">*</span>I agree to the waiver <input type="checkbox"> Yes </p>
<div class="submit">
<input type="submit" id="submit">
</div>
</form>
I have 2 questions really. How can I align my radio buttons and checkboxes to the left of my already centered form-group in css.They are currently all center, but I want the checkboxes and radio buttons to be aligned to the left, but still in center. Also how can I make my form take up the whole page with a scroll bar like the example I will provide. everything current just sits at the top of page. Please let me know of any questions, really am stuck here and just need a little nudge. Thanks.
Example: https://survey-form.freecodecamp.rocks/
.text-center {
text-align: center;
margin: auto;
}
.form-group {
text-align: center;
margin: auto;
}
.clue {
text-align: center;
}
.input-checkboxes {
text-align: center;
}
* {
box-sizing: border-box;
box-sizing: inherit;
margin: 0;
padding: 0;
font-family: lato, arial;
}
body {
background: url(images/tech2.webp);
background-size: 100%;
height: 100%;
}
.container {
grid-column: 5 / 9;
max-width: 600px;
margin: 20px auto 20px;
padding: 30px 30px 30px 30px;
border: 1px solid black;
border-radius: 8px;
background-color: rgba(255, 255, 255, 0.763);
}
header {
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
}
h1 {
margin-bottom: 5px;
}
.checkbox,
.radio-button {
display: block;
}
.form-grou>.inline {
margin-right: 6px;
text-align: left;
}
#submit {
font-size: 16px;
display: block;
margin: 0 auto;
background: #2f80ed;
color: white;
border: none;
border-radius: 6px;
padding: 10px 24px;
}
#media only screen and (max-width: 1000px) {
.container {
grid-column: 1 / 12;
}
}
<header class="header">
<h1 id="title" class="text-center">Survey Form</h1>
<p id="description" class="description text-center">Thank you for taking the time to help me improve my skills as a developer</p>
</header>
<div class="container">
<form id="survey-form">
<div class="form-group">
<label id="name-label" for="name">Name:
<input
required
id="name"
for="name"
type="text"
placeholder="Name"></label><br/>
</div>
<div class="form-group">
<label id="email-label" for="email">Email:
<input
required
id="email"
type="email"
placeholder="E-mail"></label><br/>
</div>
<div class="form-group">
<label id="number-label" for="numebr">Age:
<input
required
id="number"
min="13"
max="120" type="number"
placeholder="Age"></label><br/>
</div>
<div class="form-group">
<p>Which option best describes your current role?</p>
<select for="dropdown" id="dropdown" name="role" class="form-control" required>
<option disabled selected>Seelct current role</option>
<option value="student">Student</option>
<option value="teacher">Teacher</option>
<option value="job">Full time job coding</option>
<option value="preferNo">Prefer not to say</option>
<option value="other">Other</option>
</select><br/>
</div>
<div class="form-group">
<label> Based on my portfolio/resume, would you say that I am job ready?<br/>
<input
type="radio"
name="referal"
class="inline"
value="definitely" /> Definitely</label><br/>
<label>
<input
type="radio"
name="referal"
class="inline"
value="maybe" /> Maybe</label><br/>
<label>
<input
type="radio"
name="referal"
class="inline"
value="definitelyNot"/> Definitely not
</label><br/>
</div>
<div class="form-group">
<label>In your opinion, what would you say is my strongest skill?<br/>
<select id="improved" name="improved" class="form-control" required>
<option disabled selected>Seelct an option</option>
<option value="html/css">HTML/CSS</option>
<option value="javascript">Javascript</option>
<option value="ui/ux">UI/UX Design</option>
<option value="response">Responsiveness/Functionability</option>
<option>Project Ideas</option>
</select><br/>
</label>
</div>
<div class="form-group">
<p>What would you like to see improved? <span class="clue">(Check all that apply)</span></p>
<label>
<input
type="checkbox"
name="improved"
class="input-checkbox"
value="frontend"/> Front-End skills<br/>
<input
type="checkbox"
name="improved"
class="input-checkbox"
value="backend" /> Back-End skills<br/>
<input
type="checkbox"
name="improved"
class="input-checkbox"
value="ui/ux"/> UI/UX Design<br/>
<input
type="checkbox"
name="improved"
class="input-checkbox"
value="response"/> Responsiveness/Functionality<br/>
<input
type="checkbox"
name="improved"
class="input-checkbox"
value="response" /> Project Ideas<br/>
<input
type="checkbox"
name="improved"
class="input-checkbox"
value="number"/> Number of Projects<br/>
</label>
</div>
<div class="form-group">
<p>Any other comments or suggestions?</p>
<textarea name="comments" id="comments" rows="3" cols="30" class="input-textarea" placeholder="Enter your comments here..."></textarea>
</div>
<div class="form-group">
<button type="submit" id="submit" class="submit-button">Submit
</button>
</div>
</div>
</form>
</div>
You gave the div with the radio buttons the class .form-group. This class has a property align-center if you remove that from the div the buttons will align to the left.
If you give the .text-center to the <p> the tekst will align center
.text-center{
text-align: center;
margin: auto;
}
.form-group{
text-align: center;
margin: auto;
}
.clue{
text-align: center;
}
.input-checkboxes{
text-align: center;
}
* {
box-sizing: border-box;
box-sizing: inherit;
margin: 0;
padding: 0;
font-family: lato, arial;}
body{
background: url(images/tech2.webp);
background-size: 100%;
height: 100%;
}
.container{
grid-column: 5 / 9;
max-width: 600px;
margin: 20px auto 20px;
padding: 30px 30px 30px 30px;
border: 1px solid black;
border-radius: 8px;
background-color: rgba(255, 255, 255, 0.763);
}
header{
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
}
h1{
margin-bottom: 5px;
}
.checkbox, .radio-button {
display: block;
}
.form-grou > .inline {
margin-right: 6px;
text-align: left;
}
#submit {
font-size: 16px;
display: block;
margin: 0 auto;
background: #2f80ed;
color: white;
border: none;
border-radius: 6px;
padding: 10px 24px;
}
#media only screen and (max-width: 1000px) {
.container {
grid-column: 1 / 12;
}
}
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<title>Survey</title>
</head>
<header class="header">
<h1 id="title" class="text-center">Survey Form</h1>
<p id="description" class="description text-center">Thank you for taking the time to help me improve my skills as a developer</p>
</header>
<div class="container">
<form id="survey-form">
<div class="form-group">
<label id="name-label" for="name">Name:
<input
required
id="name"
for="name"
type="text"
placeholder="Name"></label><br/>
</div>
<div class="form-group">
<label id="email-label" for="email">Email:
<input
required
id="email"
type="email"
placeholder="E-mail"></label><br/>
</div>
<div class="form-group">
<label id="number-label" for="numebr">Age:
<input
required
id="number"
min="13"
max="120" type="number"
placeholder="Age"></label><br/>
</div>
<div class="form-group">
<p>Which option best describes your current role?</p>
<select for="dropdown" id="dropdown" name="role" class="form-control" required>
<option disabled selected>Seelct current role</option>
<option value="student">Student</option>
<option value="teacher">Teacher</option>
<option value="job">Full time job coding</option>
<option value="preferNo">Prefer not to say</option>
<option value="other">Other</option>
</select><br/>
</div>
<div>
<label> <p class="text-center">Based on my portfolio/resume, would you say that I am job ready?<br/> </p>
<input
type="radio"
name="referal"
class="inline"
value="definitely" /> Definitely</label><br/>
<label>
<input
type="radio"
name="referal"
class="inline"
value="maybe" /> Maybe</label><br/>
<label>
<input
type="radio"
name="referal"
class="inline"
value="definitelyNot"/> Definitely not
</label><br/>
</div>
<div class="form-group">
<label>In your opinion, what would you say is my strongest skill?<br/>
<select id="improved" name="improved" class="form-control" required>
<option disabled selected>Seelct an option</option>
<option value="html/css">HTML/CSS</option>
<option value="javascript">Javascript</option>
<option value="ui/ux">UI/UX Design</option>
<option value="response">Responsiveness/Functionability</option>
<option>Project Ideas</option>
</select><br/>
</label>
</div>
<div>
<p class="text-center" >What would you like to see improved? <span class="clue">(Check all that apply)</span></p>
<label>
<input
type="checkbox"
name="improved"
class="input-checkbox"
value="frontend"/> Front-End skills<br/>
<input
type="checkbox"
name="improved"
class="input-checkbox"
value="backend" /> Back-End skills<br/>
<input
type="checkbox"
name="improved"
class="input-checkbox"
value="ui/ux"/> UI/UX Design<br/>
<input
type="checkbox"
name="improved"
class="input-checkbox"
value="response"/> Responsiveness/Functionality<br/>
<input
type="checkbox"
name="improved"
class="input-checkbox"
value="response" /> Project Ideas<br/>
<input
type="checkbox"
name="improved"
class="input-checkbox"
value="number"/> Number of Projects<br/>
</label>
</div>
<div class="form-group">
<p>Any other comments or suggestions?</p>
<textarea
name="comments"
id="comments"
rows="3"
cols="30"
class="input-textarea"
placeholder="Enter your comments here..."></textarea>
</div>
<div class="form-group">
<button
type="submit"
id="submit"
class="submit-button">Submit
</button>
</div>
</div>
</form>
</div>
Remove the css of .text-center and .form-group
I have 3 rows with 2 columns in each row on my HTML page with some labels and inputs.
I see a lot of space between the rows which I tried removing but didn't work. Is there a way to do it?
Here's the HTML Code :
<div >
<h1>
New Patient Record
</h1>
</div>
<div class="row" style="padding-bottom: 0px;">
<div class="column"></div>
<div class="column">
<label > <strong>Date</strong> </label>
<input type="date" name="date" id="date" class="form-control" [(ngModel)]="institutes.date">
</div>
</div>
<div class="row" style="padding-top:0px" >
<div class="container" style="padding-left: 7.5%" >
<form #institutesForm="ngForm" (ngSubmit)="instituteLogins(institutesForm)">
<div class="form-group">
<div class="row">
<div class="column">
<h2><strong> Symptoms</strong> </h2>
<input type="text" name="symtoms" id="symtoms" class="form-control"[(ngModel)]="institutes.symtoms">
<br>
<h2><strong>Diagnosis</strong></h2>
<label> <strong>Condition</strong> </label>
<input type="text" name="condition" id="condition" class="form-control"[(ngModel)]="institutes.condition">
<label><strong> Advice </strong></label>
<input type="text" name="advice" id="advice" class="form-control"[(ngModel)]="institutes.advice">
<br>
</div>
<div class="column">
<h2> <strong>Prescription</strong> </h2>
<br>
<label><strong> Medication </strong></label>
<input type="text" name="medication" id="medication" class="form-control"[(ngModel)]="institutes.medication">
<label><strong> Medicine Type </strong></label>
<input type="text" name="type" id="type" class="form-control"[(ngModel)]="institutes.type">
<label><strong>Course</strong></label>
<input type="text" id="course" name="course" class="form-control"[(ngModel)]="institutes.course">
<label><strong> How many per day? </strong></label>
<input type="text" name="cday" id="cday" class="form-control"[(ngModel)]="institutes.cday">
<br>
</div>
<div class="row">
<div class="column"></div>
<div class="column">
<button id="record" class="btn btn-primary" type="submit" >Add Record</button>
</div>
</div>
</div>
<br><br>
</div>
</form>
</div>
Here's what all I tried: I tried to adjust row spacing using margins, and padding but none of them worked. Is there any other alternative for this?
.modal-dialog.cascading-modal.modal-avatar .modal-header img {
width: 130px;
margin-left: auto;
margin-right: auto;
}
.modal-dialog.cascading-modal.modal-avatar .modal-header {
margin: -6rem 2rem -1rem 2rem;
}
.More{
color: blue;
margin-right: 100px;
}
.column{
margin : 100px;
}
.row{
margin:0;
padding:0;
align-items: baseline;
}
Changing:
.column{
margin: 100px;
}
To
.column{
margin-left : 100px;
margin-right: 100px;
}
Will remove the space between the rows. Is that the end result you're looking for?
Adjusting the margin-left helped me solve the issue.
Also using to add number of empty spaces vertically solved my UI design issues.
For the space between both rows, you can add the padding-bottom
style="margin-top:-50px"
I am trying to design the following form where there will be 2 column. Each column can have any number of form field like left column can have only one form field and right column can have also one form field only or left column can have two form field and right column can have three form field and vice versa.
The way i am doing does not separates two columns. Here is what i have done
Here is what i tried using flex
.row {
display: flex;
}
.input-wrapper {
flex: 1;
padding-left: 15px;
}
<div class="row">
<div class="input-wrapper">
<label>Additional Space</label>
<select>
<option>hello</option>
</select>
</div>
<div class="input-wrapper">
<label>Size</label>
<input type="text" placeholder="length" />
</div>
<div class="input-wrapper">
<label></label>
<input type="text" placeholder="width" />
</div>
<div class="input-wrapper">
<label></label>
<select>
<option>hello</option>
</select>
</div>
</div>
<br/><br/><br/><br/><br/>
<div class="row">
<div class="input-wrapper">
<label>Additional Space</label>
<select>
<option>hello</option>
</select>
</div>
<div class="input-wrapper">
<label>Size</label>
<input type="text" placeholder="length" />
</div>
</div>
Here is the design
First, you need to set width: 100% to the input type you want to span. In your layout, the container already takes the full width.
You should also use display:flex on your input-wrapper and set
flex-direction: column;
justify-content: flex-end;
In order for the text to be shown first and the inputs on the second line.
.row {
display: flex;
}
.input-wrapper {
flex: 1;
padding-left: 15px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
select{
width: 100%;
}
select, input{
border: 1px solid #e1e1e1;
padding: 6px;
border-radius: 3px;
}
label{
font-size: 14px;
color: #d1d1d1;
margin-bottom: 4px;
}
<div class="row">
<div class="input-wrapper">
<label>Additional Space</label>
<select>
<option>hello</option>
</select>
</div>
<div class="input-wrapper">
<label>Size</label>
<input type="text" placeholder="length" />
</div>
<div class="input-wrapper">
<label></label>
<input type="text" placeholder="width" />
</div>
<div class="input-wrapper">
<label></label>
<select>
<option>hello</option>
</select>
</div>
</div>
<br/><br/><br/><br/><br/>
<div class="row">
<div class="input-wrapper">
<label>Additional Space</label>
<select>
<option>hello</option>
</select>
</div>
<div class="input-wrapper">
<label>Size</label>
<input type="text" placeholder="length" />
</div>
</div>
I am looking for a way to make this search bar with its inputs and buttons responsive. However i got stuck with Bootstrap properties and when I shrink the window everything stacks very bad and I just can't figure out how to apply some better classes and props. Here's the codepen link: http://codepen.io/anon/pen/WGKOmB
Appreciate all advices
This is my html:
.row {
background-color: blue;
padding: 40px 30px;
}
.main {
background-color: grey;
width: 1202px;
height: 156px;
margin: 0 auto;
}
.formContainer {
width: 1140px;
height: 85px;
background-color: green;
margin: 0 auto;
position: relative;
top: 50%;
transform: translate(0, -50%);
}
button {
height: 37px;
width: 160px;
}
.choice {
background-color: lightgrey;
height: 37px;
}
div.form-group.checkbox {
width: 207px;
background-color: white;
padding: 5px 10px;
}
select.form-control {
width: 173px;
}
input.form-control.choice-input {
/*.choice input input*/
width: 360px;
height: 38px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<body>
<div class="container">
<div class="row">
<!-- row -->
<div class="col-md-8 col-sm-6" style="background-color: lightblue; height: 74px;">
<p>Lorem ipsum</p>
<div class="form-inline">
<div class="form-group checkbox">
<span><input type="checkbox" value="" checked></span>
<label>Lorem</label>
<span><input type="checkbox" value=""></span>
<label>Ipsum</label>
</div>
<div class="form-group">
<select class="form-control">
<option value="one">Lorem ipsum</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</div>
<div class="form-group">
<input class="form-control choice-input" type="text" placeholder="Placeholder text">
</div>
</div>
<!-- end form-inline -->
</div>
<div class="col-md-4 col-sm-6" style="background-color: lightgreen; height: 74px;">
<p class="pull-right">Lorem ipsum</p>
<div class="btn-group">
<button class="btn btn-default" style="margin-right: 10px">Lorem ipsum lorem</button>
<button class="btn btn-default">Lorem lorem lorem</button>
</div>
</div>
</div>
</div>
<!-- end row -->
</div>
</body>
Word from the wise (not me), never use inline styling. Always put everything in CSS. Also, you set a specific height for both the blue box and the light green box. Therefore, even when the browser is narrower and would be in col-sm-* and col-xs-* territory, you still have a set height. You should give a class name, for example form-height and then in CSS write something like the following:
.form-height {
height: 150px; /* Or whatever height you find appropriate */
}
#media (min-width:768px) {
.form-height {
height: 74px;
}
}
What this would do is say that when the browser is narrower than 768px, i.e. when it is considered col-xs-* by bootstrap, it should have a certain height. When it is larger it will have a different height.
However, an ever better solution is to never even use the height property. The reason you are doing this is probably because you want a certain padding. Therefore, you can write the following CSS for the class:
.form-height {
padding: 10px 0px; /* Give the top and bottom 10px of padding and nothing to the right or left */
}
Try this code
<div class="container">
<form class="form-inline" style="padding: 20px 0;">
<div class="row">
<div class="col-sm-8 col-md-9">
<div class="form-group">
<label class="checkbox-inline"><input type="checkbox" value="">Option 1</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 2</label>
</div>
<div class="form-group">
<select class="form-control" id="sel1">
<option>Option 1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<div class="form-group">
<input type="text" class="form-control" id="usr" placeholder="Placeholder">
</div>
</div>
<div class="col-sm-4 col-md-3">
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-success">Success</button>
</div>
</div>
</form>
Demo here : https://jsfiddle.net/adb0br5e/1/