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;
}
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
Why is one input box full width and the others so short? This is my html. I am using bootstrap:
<form action="https://www.example.net/auth/create_user" class="form-horizontal" id="login-attempts-form-admin method="post" accept-charset="utf-8">
<div class="container">
<div class="row">
<div class="col-sm-6 col-xs-6">
<!-- id -->
<div class="form-group">
<label for="id">
Reference Id
</label>
<div class="input-group">
<input type="text" name="id" value="" id="id" style="" class="form-control" placeholder="" disabled="disabled" />
<div class="input-group-addon"><i class="ti-info"></i>
</div>
</div> <!-- end input group -->
<span class="help-block">
The Reference Id is created automatically.
</span>
</div> <!-- end form-group Id -->
<!-- ip_address -->
<div class="form-group">
<label for="ip_address">
IP Address
</label>
<div class="input-group">
<input type="text" name="ip_address" value="" id="ip_address" style="max-width:none !important" class="form-control input-xlarge" placeholder="" />
</div> <!-- end input group -->
</div> <!-- end form-group ip_address -->
<!-- login -->
<div class="form-group">
<label for="login">
Login
</label>
<div class="input-group">
<input type="text" name="login" value="" id="login" style="" class="form-control" placeholder="" />
</div> <!-- end input group -->
</div> <!-- end form-group login -->
</div>
</div> <!-- end of row -->
</div> <!-- end of container. -->
</form>
I even tried to make the ip_address field wider by stating style="max-width:none !important" but no use. Is there any way to make the fields wider? Is there a preset width in bootstrap? I was of the belief the default was max width.
This is what my final output looks like:
Low rep to add as a comment, but trying your code end up with same length input fields. So don't see a problem from my end.
One thing maybe the version of bootstrap you are using, as I used the latest from the Bootstrap page (4.1.3), as older versions might have some changes within the CSS.
You could add your CSS which would give a better view if you are not changing something.
Another thing is to try:
input {
max-width: 100%;
}
When I tested the code I didn't see any different widths with the inputs.
On ip_address field, I am using style="max-width:none !important"... Any CSS you add will not work with the inline style max-width:none; !important.
It will override any changes you are making in the CSS file or any where else. Inline styles especially !important will override any attached style sheets or classes.
I think the problem may be you have this on your input style="max-width:none !important"It is overriding the default bootstrap setting and not setting your input to max width.
That's if you want them wider, shorter wrap in a <div> then manipulate the <div> with CSS or the "col-sm-6" etc.. classes.
Example from Bootstrap website version 4. Also, version 3 has the "form-control" class as well. It makes your form 100% width then you can manipulate it by wrapping in a <div> of your choice or another suitable element or CSS.
EXAMPLE:
<form>
<div class="form-group">
<label for="exampleFormControlInput1">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name#example.com">
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control" id="exampleFormControlSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlSelect2">Example multiple select</label>
<select multiple class="form-control" id="exampleFormControlSelect2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
</form>
https://getbootstrap.com/docs/4.0/components/forms/
When I tested the input field lengths weren't different.
But if it happens try styling the input tag with
<input style="max-width: 100%">
or add this to css
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
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
We have the following form:
<div class="form-horizontal">
<fieldset>
<legend>Reports</legend>
<div class="control-group">
<label class="control-label">Year</label>
<div class="controls">
<select id="ddlYear" class="input-small">
<option value="2011">2011</option>
<option selected="selected" value="2012">2012</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label">Project</label>
<div class="controls">
<label class="" id="lbProjectDesc">House X repairs</label>
</div>
</div>
<div class="control-group">
<label class="control-label">Costs</label>
<div class="controls">
<div class="input-append">
<input type="text" value="0,0" class="span2" id="tbCosts" disabled="disabled" >
<span class="add-on">€</span>
</div>
</div>
</div>
<hr>
<div class="control-group">
<div class="controls">
<input type="submit" value="Save" onclick="$(this).button('loading');" id="btnSave" class="btn btn-primary" data-loading-text="Saving...">
</div>
</div>
</fieldset>
</div>
http://jsfiddle.net/9JNcJ/2/
The problem is that the label lbProjectDesc (text= "House X repairs") is not displayed correctly.
What class can we set or what change needs to be made to fix it?
(Preferrably the correct way, not a css hack)
#lbProjectDesc {
margin-top: 5px;
}
(doesn't consider this as a "hack" :) forked : http://jsfiddle.net/davidkonrad/LK95Q/
Taking into account Selva and davidkonrad responses we solved it like this:
.form-horizontal .control-group .controls label {
margin-top: 5px;
}
This way it affects all the cases where labels are inside horizontal forms but doesnt displace verticaly the description labels of other input types...
Works too with padding-top: 5px;
Avoid the unwanted padding from that and set what ever you want. Here problem is padding.
#lbProjectDesc {
margin-top: 5px;
}
add and see.
Demo : http://jsfiddle.net/9JNcJ/5/