How do I align select boxes except for the label, which i want to remain at the top left?
<form class="form-inline">
<div class="form-group">
<label for="SelectDate">Date of Event</label>
<select class="form-control" id="SelectMonth">
<option>Jan</option>
<option>Feb</option>
<option>Mar</option>
</select>
<select class="form-control" id="SelectDay">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<input class="form-control" type="Number" placeholder="Year">
</div>
</form>
This code makes it all aligned but I'm trying to make it look like:
Date
[month][day][year] not
Date [month][day][year]
Thanks guys.
You can add this styles to your label:
.form-inline label[for="SelectDate"] {
display: block;
}
Now it will display it as you wanted: https://codepen.io/anon/pen/aLdZgX
Related
Hello all I am very new to HTML and CSS and am currently working on a small lab for school. I am trying to have my two reset and submit button be horizontal with each other instead, they are one on top of the other. I am not supposed to change any of the HTML just make changes to the CSS code. The buttons are in a span element at the bottom. I added my form code to add more context
<form>
<span class="row">
<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="Jaylen Carroll">
</span>
<span class="row">
<label for="dob">Date of Birth</label>
<input type="date" id="dob" name="dob">
</span>
<span class="row">
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="jaylen#gmail.com">
</span>
<span class="row">
<label for="city">City</label>
<input type="city" id="city" name="city" placeholder="Ottawa">
</span>
<span class="row">
<label for="province">Province</label>
<select id="province" name="province">
<option>Please Select..</option>
<option value="AB">Alberta</option>
<option value="BC">British Columbia</option>
<option value="MB">Manitoba</option>
<option value="NB">New Brunswick</option>
<option value="NL">Newfoundland and Labrador</option>
<option value="NS">Nova Scotia</option>
<option value="ON">Ontario</option>
<option value="PE">Prince Edward Island</option>
<option value="QC">Quebec</option>
<option value="SK">Saskatchewan</option>
<option value="NT">Northwest Territories</option>
<option value="NU">Nunavut</option>
<option value="YT">Yukon</option>
</select>
</span>
<span class="row">
<input type="reset" id="reset" name="reset">
<input type="submit" id="submit" name="submit">
</span>
</form>
When you paste the code in an HTML editor it comes out like this:
How I need it to be:
My Css code looks like this:
h1{
text-align:center;
}
label{
margin-top: 16px;
font-weight: bold;
display: block;
text-align: center;
font-size: medium;
}
input{
text-align:center;
display: block;
margin: 15px;
width:150px;
}
form{
margin:0 auto;
width:215px;
}
HTML elements start on separate lines by default. One solution would be to put your buttons in a group with a div element then use the float CSS property to horizontally align them.
HTML
<div class="button-group">
<input type="reset" id="reset" name="reset">
<input type="submit" id="submit" name="submit">
</div>
CSS
.button-group input {
float: left;
}
You can refer to this w3 schools link for more information on button groups:
https://www.w3schools.com/howto/howto_css_button_group.asp
you can use display flex
This defines a flex container; inline or block depending on the given value. It enables a flex context for all its direct children.
Set flex:direction as column.
This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns.
.row{
display:flex;
flex-direction:column;
}
<form>
<span class="row">
<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="Jaylen Carroll">
</span>
<span class="row">
<label for="dob">Date of Birth</label>
<input type="date" id="dob" name="dob">
</span>
<span class="row">
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="jaylen#gmail.com">
</span>
<span class="row">
<label for="city">City</label>
<input type="city" id="city" name="city" placeholder="Ottawa">
</span>
<span class="row">
<label for="province">Province</label>
<select id="province" name="province">
<option>Please Select..</option>
<option value="AB">Alberta</option>
<option value="BC">British Columbia</option>
<option value="MB">Manitoba</option>
<option value="NB">New Brunswick</option>
<option value="NL">Newfoundland and Labrador</option>
<option value="NS">Nova Scotia</option>
<option value="ON">Ontario</option>
<option value="PE">Prince Edward Island</option>
<option value="QC">Quebec</option>
<option value="SK">Saskatchewan</option>
<option value="NT">Northwest Territories</option>
<option value="NU">Nunavut</option>
<option value="YT">Yukon</option>
</select>
</span>
<span class="row">
<input type="reset" id="reset" name="reset">
<input type="submit" id="submit" name="submit">
</span>
</form>
for the last class row which contains the 2 buttons you can replace its class name and apply this CSS to it
.class-name {
display:"flex",
// if you want to keep space between the two buttons
justify-content:"space-between"
// if not don't put `justify-content` and instead put a margin to one of the buttons to
// keep a little distance between them
}
so display "flex" is your friend when you want to group elements as a row
I am trying to add a checkbox below a select element in an inline form. Is there an option to "break" the line in order to add the checkbox below?
This is what I am trying to achieve:
And this is what I have at the moment:
jsFiddle
<div class="form-inline">
<div class="form-group">
<select class="form-control select-year text-smd">
<option>Month</option>
<option>January</option>
<option>February</option>
</select>
</div>
<div class="form-group">
<select class="form-control select-year text-smd">
<option>Year</option>
<option>2016</option>
</select>
</div>
<div class="form-group ml-15 mr-15">
<label> - </label>
</div>
<div class="form-group">
<select class="form-control select-year text-smd">
<option>Month</option>
<option>January</option>
<option>February</option>
</select>
</div>
<div class="form-group">
<select class="form-control select-year text-smd">
<option>Year</option>
<option>2016</option>
</select>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> I currently work here
</label>
</div>
</div>
I think the easiest way is to put it in a help-block and right align it. Then add a little CSS to override the form-group aligment to the top.
.form-inline .form-group {
vertical-align: top;
}
http://bootply.com/dCbo7trghW
best answer is that from Aramil (in the comments)
if you wan the "lazy" option, you can always use this
(i do not recommend this code, use the grid instead)
.checkbox-inline{
position: relative;
top: 2em;
right: 11em;
}
I got 2 input fields below. One select another input text. I need it to stay inline even in mobile mode.
How do I prevent input fields within from breaking? They stay inline regardless of screen size.
<div class="col-sm-4">
<label class="control-label">Form label</label>
<div class="form-inline">
<div class="form-group">
<select class="form-control">
<option value="A">Option A</option><option value="B">Option B</option><option value="C">Option C</option><option value="D">Option D</option>
</select>
</div>
<div class="form-group">
<input class="form-control" type="text">
</div>
</div>
</div>
From http://getbootstrap.com/css/
Bootstrap's inline forms, as in:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form class="form-inline">
<div class="form-group">
<select class="form-control" >
<option>Thing One</option>
<option>Thing Two</option>
</select>
</div>
<div class="form-group">
<input type="text" class="form-control">
</div>
</form>
States in the docs 'This only applies to forms within viewports that are at least 768px wide.'
You could directly force them to stay inline with a fluid width in CSS and floating the elements.
Ex: https://jsfiddle.net/cm94dup9/
You can use tables for both select field and text field.
In table you can specify the width of the so both are inline.
<table>
<tr><td><div class="form-group">
<select class="form-control">
<option value="A">Option A</option><option value="B">Option B</option><option value="C">Option C</option><option value="D">Option D</option>
</select>
</div></td></tr>
<tr><td>
<div class="form-group">
<input class="form-control" type="text">
</div>
</td></tr>
</table>
if you mean inline, both to be have same width and are on each other. Not that both are in same line.
What has worked for me is wrapping the label and input, select, checkbox, etc.. in a div tag.
<form>
<div style=" white-space: nowrap;overflow: hidden;" >
<label>
<select>
<option value="?">Select</option>
<option value="february">February</option>
<option value="march">March</option>
<option value="april">April</option>
</select>
</label>
</div>
</form
i have a form which i implemented form-inline and bootstrap-select . That is working fine for screen width> 768, however when i try to resize it to ipad size, it is no longer inline. How to solve my problems:
because i set data-width="auto" for bootstrap-select, it is no 100% (1 column) or 50%(2 columns, which is most ideal in ipad case to display two select box side by side). i tried many ways, e.g. resetting the attribute data-width to "50%" then call $('.selectpicker').selectpicker(render);, but failed, what to do?
the checkboxes are auto break into four lines, for ipad size, i think it is better to keep them in one line, what can i do?
JSFiddle links: http://jsfiddle.net/nc16ntwq/ as the codes cant appear
<form class="form-inline" style="margin:10px 0px;">
<div class="form-group">
<select id="date" name="date" class="date selectpicker" data-width="auto">
<option value='01'>01</option>
<option value='02'>02</option>
</select>
</div>
<div class="form-group">
<select id="dateYear" name="dateYear" class="date selectpicker" data-width="auto">
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
</select>
</div>
<div class="form-group">
<select id="toDate" name="toDate" class="date selectpicker" data-width="auto">
<option value='01'>01</option>
<option value='02'>02</option>
<option value='03'>03</option>
</select>
</div>
<div class="form-group">
<select id="toDateYear" name="toDateYear" class="date selectpicker" data-width="auto">
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019" selected>2019</option>
</select>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input id="v1" type="checkbox" checked> Value 1
</label>
</div>
<div class="checkbox">
<label>
<input id="v2" type="checkbox" checked> value 2
</label>
</div>
<div class="checkbox">
<label>
<input id="v3" type="checkbox"> value 3
</label>
</div>
<div class="checkbox">
<label>
<input id="v4" type="checkbox"> Values 4
</label>
</div>
</div>
</form>
JSFIddle. I only do this for dropdown. Just add this to you CSS
.form-inline .form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
I have a form that is divided into two sections both sitting next to each other. I am not sure how to go about this as I have read that some people use tables and others use lists? I am new to html and CSS but I would just put the two sections in divs and float one to the left. I read however that this is not a good method as divs are supposed to define two different things?
I have read a lot of questions and blogs about this but it's making me slightly more confused.I am just wanting to know the best way to go about this for this particular form.
Here is the code:
http://jsfiddle.net/EdZ32/
<div class="bookingForm">
<form action="">
<label for="flightType">
Please select your flight<br>
<select name="type" id="flightType">
<option value="Fixed Wing">Fixed Wing</option>
<option value="Helicopter">Helicopter</option>
<option value="Glider Flights">Glider Flights</option>
</select> <br>
</label>
<label for="numberPassengers">
Number of Passengers<br>
<select name="type">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select><br>
</label>
<label for="startDate">
Start date <input type="date" name="startDate"><br>
</label>
<label for="departureTime">
Departure itme <input type="date" name="departureTime"><br>
</label>
<!--SECTION TWO -->
<label for="name">
Full Name* <input type="text" name="name"><br>
</label>
<label for="email">
Email* <input type="text" name="email"><br>
</label>
<label for="phoneNumber">
Phone Number* <input type="number" name="phoneNumber"><br>
</label>
<label for="postalAddress">
Postal Address <input type="text" name="postalAddress"><br>
</label>
<label for="city">
City <input type="text" name="city"><br>
</label>
<label for="additionalInfo">
Additional Information<br>
<textarea rows="10" cols="30" name="comment" form="usrform">
Enter text here...</textarea>
</label>
</form>
I would just use two different divs for this:
HTML
<div class="left">
<!-- Second Section Here-->
</div>
CSS
.bookingForm {width:600px;} /* Choose your custom width or no width at all */
.bookingForm .left {float:left;width:49%;}
.bookingForm .right {float:right;width:49%;}
Also, your Labels should not wrap all the imput elements but just the text like this:
<label for="additionalInfo">
Additional Information
</label>
I have updated your code on JSfiddle here:
http://jsfiddle.net/EdZ32/4/
i have edited your code and i hope this helps you
you must specify 2 division for each set of inputs you have. then put CSS to float them right to each other
<div id="sec1"></div>
<div id="sec2"></div>
Above was added to your code and a CSS for float.
JSFIDDLE