I would like to align the following:
<div class="span5">
<div class="">
<span class="label">Label1</span>
<input type="text" class="input-medium" placeholder="0">
</div>
<div class="">
<span class="label">Label2</span>
<input type="text" class="input-medium" placeholder="0" >
</div>
<div class="">
<label class="checkbox inline">
<input type="checkbox"><span>Something</span>
</label>
<input type="text" class="input-medium" placeholder="0">
</div>
<div class="">
<span class="label">Label4</span>
<input type="text" class="input-medium" placeholder="0">
</div>
<div class="">
<span class="label label-inverse">Label5</span>
<input type="text" class="input-medium" placeholder="0">
</div>
</div>
Here's the fiddle:
http://jsfiddle.net/qP46X/1267/
I tried margin right but it didnt help. I am not sure how to align the textboxes together
Use a set width for the .label elements. Ideally you'd have consistency in the layout and you could also use labels for all of the text, but a set width + display: inline-block will work. You can of course change the width as needed.
http://jsfiddle.net/qP46X/1268/
you can also use twitter bootstrap form-horizontal css class and its sub-component classes to fulfill your requirement. i modified a bit styling of your code but you might achieve exactly what you want from the below reference( see Horizontal form in the below link)
Reference: http://twitter.github.com/bootstrap/base-css.html#forms
Demo: http://jsfiddle.net/qP46X/1269/
Related
I have a checkbox button and a Paragraph side-by-side.
It's inline-block and everything is nice... Look:
When I turn my view into responsive, it just drops down a line. Like this:
How do I overcome this issue elegently in CSS without starting build divs around elements and bootstrap the whole deal here? Thanks!
re code; those are 2 columns and both button and paragraph reside in he left column.
EDITED FOR CODE ADDITION:
<div class="row no-pad">
<div class="col-xs-6 left-hand-input">
<!--FORM BEGIN-->
<form class="form-control-static" action="leadGen.php" method="post">
<p>PERSONAL DETAILS</p>
<hr>
<label for="firstName">FIRST NAME:</label><br>
<input name="firstName" id="firstName" type="text"><br>
<label for="email">EMAIL:</label><br>
<input name="email" id="email" type="email">
<p>SHIPMENT ADDRESS</p>
<hr>
<label for="address">ADDRESS:</label><br>
<input name="address" id="address" type="text"><br>
<label for="country">COUNTRY:</label><br>
<input name="country" id="country" type="text"><br>
<label for="zip">ZIP CODE:</label><br>
<input name="zip" id="zip" type="text"><br>
<input type="submit" id="submit" value="SEND">
<p style="display: inline-block; vertical-align: -10px;"> *Required fields</p><br>
<input checked type="checkbox" id="mailingList"/>
<p style="display: inline-block; font-size: 75%;">
Receive exclusive membership deals and offers.</p>
</form>
</div>
</div>
You need to use labels
<label><input type="checkbox" value=" id="mailingList">Receive exclusive membership deals and offers.</label>
Here is the jsfiddle demo: https://jsfiddle.net/o4qgu4gv/2/
You should also consider using col-sm-6 instead of col-xs-6 because it may look nice on an iPhone 4 screen
if it is for the checkbox or any input type tag in particular then a more suitable choice would be to use a label tag instead of a paragraph.
You could use label with its for attribute and it should work fine.
<div id="wrapper">
<input type="checkbox" id="btn"> check
<label for="btn">
this should not shift
</label>
</div>
I've created the following input label/text box, but its huge and runs across the page. Is there anyway I can change the size of the textbox so that it's a lot smaller than it currently is? My code below:
<div class="slds-form-element">
<label class="slds-form-element__label" for="text-input-01">Input Label</label>
<div class="slds-form-element__control slds-input-has-fixed-addon">
<span class="slds-form-element__addon">$</span>
<input id="text-input-01" class="slds-input" type="text" placeholder="Placeholder Text" />
<span class="slds-form-element__addon">%</span>
</div>
</div>
PS: I'm doing this in Lightning, so my CSS is already installed. Unfortunately, I'm not allowed to edit the CSS and have to find another way to resize this. I fsomeone can help me out, that would really help.
If css is absolutely out of the question you could always just add an inline style rule. This is generally not considered best practice, but if that's all you're left with you may not have another option.
<div style="width:300px;" class="slds-form-element">
<label class="slds-form-element__label" for="text-input-01">Input Label</label>
<div class="slds-form-element__control slds-input-has-fixed-addon">
<span class="slds-form-element__addon">$</span>
<input id="text-input-01" class="slds-input" type="text" placeholder="Placeholder Text" />
<span class="slds-form-element__addon">%</span>
</div>
</div>
<style>
input, button, select, textarea {
width: 100%;
}
</style>
<div class="slds-form-element">
<label class="slds-form-element__label" for="text-input-01">Input Label</label>
<div class="slds-form-element__control slds-input-has-fixed-addon">
<span class="slds-form-element__addon">$</span>`enter code here`
<input id="text-input-01" class="slds-input" type="text" placeholder="Placeholder Text" />
<span class="slds-form-element__addon">%</span>
</div>
</div>
Here is the jsfiddle.
This is suppose to give this :
But it does that instead :
Here is the HTML for that part of the page :
<input type="submit" name="BT_resetZoom" value="Reset coordinates" id="BT_resetZoom" tabindex="10" style="height:50px;width:125px;">
<div style="display: inline-block;">
<span id="LBL_Xmin" class="labelsAxis">X :</span>
<input name="TXT_graphXmin" id="TXT_graphXmin"
tabindex="3" type="text" style="width:75px;">
<span id="MainContent_LBL_Xmax"
class="labelsAxis">to</span>
<input name="TXT_graphXmax" id="TXT_graphXmax"
tabindex="4" type="text" style="width:75px;">
<br>
<span id=LBL_Ymin" class="labelsAxis">Y :</span>
<input name="TXT_graphYmin" id="TXT_graphYmin"
tabindex="5" type="text" style="width:75px;">
<span id="MainContent_LBL_YMax"
class="labelsAxis">to</span>
<input name="TXT_graphYmax" id="TXT_graphYmax"
tabindex="6" type="text" style="width:75px;">
<br>
<br>
</div>
I have tryied fiddling with heights, I tryied to surround the button with <div> tags. Nothing works.
How can I make a button align with a div?
To your input's CSS add vertical-align:top:
<input type="submit" name="ctl00$MainContent$BT_resetZoom" value="Reset coordinates" id="MainContent_BT_resetZoom" tabindex="10" style="height:50px;width:125px;vertical-align:top;">
jsFiddle example
The default vertical alignment is baseline, which is what gives your original output.
Try defining the float attribute.
For input float:left
For div float:right
You can add
display:block;
float:left;
to your MainContent_BT_resetZoom
If you do not want to use float, then use
vertical-align:top;
on your MainContent_BT_resetZoom
Hello I have input group with this structure:
<div class="input-group">
<span class="input-group-addon">
Jesteś użytkownikiem<br /> tych urządzeń?
</span>
<span class="form-control">
<input type="checkbox" checked data-bind="checked: MeUser">
</span>
</div>
As you can see input-group-addon consists of two lines and form-control only one line.
Therefor height of both object is not aligning. You can see this in this Fiddle
Can anyone suggest me modifications to make this two object to have same height?
Set a static value to the input-group class
& set static values to the child classes
CSS:
.input-group{
height:100px;
}
.input-group-item{
height:50px;
}
HTML:
<div class="input-group">
<div class="input-group-item"><span class="input-group-addon">
Jesteś użytkownikiem<br /> tych urządzeń?
</span></div>
<div class="input-group-item"><span class="form-control">
<input type="checkbox" checked data-bind="checked: MeUser">
</span></div>
</div>
Using Bootstrap version 2.3.2, I have a form layout like the below image and since the checkbox has an inline label, there is an aligning issue.
Adding margin to input[type="checkbox"] only gives margin to the checkbox, not the inline label. How do I make it so the checkbox and its label vertically align to the text fields next to it?
Here is the
JS BIN if you are interested.
In your HTML add a class that will handle the checkbox margin:
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<label>label 1</label>
<input type="text" />
</div>
<div class="span3">
<label>label 2</label>
<input type="text" />
</div>
<div class="span3 checkbox">
<input type="checkbox" />test description
</div>
</div>
</div>
and in your CSS:
input[type="checkbox"] {
// i just remove this part..
}
.checkbox {
margin: 30px 0 0 0;
}
Don't put the margin on the checkbox, but on the parent div.
Check this jsFiddle.
Hope this helps
Try to always use something like this:
<div class="span3">
<label for="checkbox" class="checkbox">
<input type="checkbox" id="checkbox" class="checkbox">test description
</label>
</div>
http://jsbin.com/itAdAWA/1/edit
How about putting a <label> before the checkbox like this? ..
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<label>label 1</label>
<input type="text">
</div>
<div class="span3">
<label>label 2</label>
<input type="text">
</div>
<div class="span3">
<label>test</label>
<input type="checkbox">
</div>
</div>
</div>
Bootply: http://bootply.com/86998
I just solved this exact problem in bootstrap 3, by simply limiting the height of inline checkboxes to 12 pixels. They are by default 40px, I don't know why !
<div class="checkbox-inline">
<label>
<input type="checkbox" checked="checked" />
<span>My correctly aligned check-box</span>
</label>
</div>
add this in your css file (I personally have a css file named bootstrap-custom.css):
/*
Checkboxes in inline forms are misaligned because for an unknow reason they inherit a height of 40px !
This selector limit the height of inline checkboxes to 12px which is the perfect value to align them to
the other widgets in an inline form.
*/
.radio-inline, .checkbox-inline {
max-height: 12px;
}
Not ideal solution but change your code to ...
<div class="span5">
<input type="checkbox">test description</input>
</div>
and set the margin-top on that. I will result as you want - better.
Bootstrap v5+
<!-- mt-md-4 pt-md-3 this apply margin and padding only for desktop -->
<div class="col-md-3 mb-3 md-mt-4 md-pt-3">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Default checkbox
</label>
</div>