Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
Goal
Inside a form, I want to align my row-based fields so that the title of the field is left-aligned, but the inputs are right-aligned.
My form looks like this
<form class="settings", id="settings", onsubmit="OnSubmit();">
<label class="section-title">Basic</label>
<div class="separator"></div>
<section class="setting">
<div class="field">
<span class="field-title">Name: </span>
<span class="entry-group">
<label class="entry-underlined">
<input name="myfield" class="entry" type="number" min="1024", max="65535", placeholder="12345" required>
</label>
</span>
</div>
</section>
.....
<form/>
So for example, I'd love the span.field-title to left align, but the input "myfield" to right align.
Attempts
I've tried many solutions such as flex and align-content, but none worked for me, including
input.entry {
display: flex;
justify-content: flex-end;
float: right;
vertical-align: middle;
}
Question
I need a general direction and working solution of such tasks because it seems an area to revisit often.
Something like this??
.field {
display: flex;
justify-content: space-between;
}
<form class="settings" , id="settings" , onsubmit="OnSubmit();">
<label class="section-title">Basic</label>
<div class="separator"></div>
<section class="setting">
<div class="field">
<span class="field-title">Name: </span>
<span class="entry-group">
<label class="entry-underlined">
<input name="myfield" class="entry" type="number" min="1024", max="65535", placeholder="12345" required>
</label>
</span>
</div>
</section>
<form/>
Are you looking for the input-field to be aligned right or the input value text?
Check this very basic example
input[type=number] {
text-align:right;
}
.field2 {
width:500px;
background:grey;
}
.entry2 {
float:right;
}
<form class="settings", id="settings", onsubmit="OnSubmit();">
<label class="section-title">Basic</label>
<div class="separator"></div>
<section class="setting">
<div class="field">
<span class="field-title">Name: </span>
<span class="entry-group">
<label class="entry-underlined">
<input name="myfield" class="entry" type="number" min="1024", max="65535", placeholder="12345" required>
</label>
</span>
</div>
</section>
.....
</form>
<form class="settings", id="settings", onsubmit="OnSubmit();">
<label class="section-title">Basic</label>
<div class="separator"></div>
<section class="setting">
<div class="field2">
<span class="field-title">Name: </span>
<span class="entry-group">
<label class="entry-underlined">
<input name="myfield" class="entry2" type="number" min="1024", max="65535", placeholder="12345" required>
</label>
</span>
</div>
</section>
.....
</form>
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
i am tying to have the h3 aligned with the form so the form goes to the right and the h3 to the left and both of them to be centered ?
<section style="background-color: #00CDCF; background-image: url(./images/services/contact.jpg);">
<div id="newsletterform">
<div class="wrap">
<h3 style="color:#EF7F1A;">Subscribe to our Newsletter</h3>
<form action="send.php" method="post" id="newsletter" name="newsletter"><input type="email" name="signup-email" id="signup-email" value="" placeholder="Insert email here" /><input type="submit" value="Subscribe" name="signup-button" id="signup-button">
<div id="response"></div>
</form>
</div>
</div>
</section>
use flex and learn more about flexbox
.wrap {
display: flex;
align-items: center;
justify-content: space-between;
}
<section style="background-color: #00CDCF; background-image: url(./images/services/contact.jpg);">
<div id="newsletterform">
<div class="wrap">
<h3 style="color:#EF7F1A;">Subscribe to our Newsletter</h3>
<form action="send.php" method="post" id="newsletter" name="newsletter"><input type="email" name="signup-email" id="signup-email" value="" placeholder="Insert email here" /><input type="submit" value="Subscribe" name="signup-button" id="signup-button">
<div id="response"></div>
</form>
</div>
</div>
</section>
here is my code:
<div class="form-group">
<label class="control-label col-sm-4">Name</label>
<div class="col-sm-8"><input type="text" class="form-control" id="id_name" required/>
<span style="color: red; background-position: right top;">*</span>
</div>
but that sign display under the textbox, how to fix the position of asterisk sign at top right.
you should check wether other elements or elemnt clarifications in your CSS have influence on the behavior of your code. Since the code as it is works just fine.
the use of "float" often dearanges code. So if you use float a lot it could be the cause. "display:block" or other displays can help avoiding those affections.
But as said befor you should clarify your problem more.
#marker {
position: relative;
left:-15px;
top:2px;
}
<div class="form-group">
<label class="control-label col-sm-4">Name</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="id_name" required/>
<span id="marker" style="color: red; background-position: right top;">*</span>
</div>
Check this. i think u need it like same. Use font awesome to put asterisk mark
<div class="form-group">
<label class="col-sm-3 control-label">
Username <i class="fa fa-asterisk" aria-hidden="true"></i>
</label>
<div class="col-sm-7">
<input class="form-control" id="username" name="username" placeholder="Text Field" type="text">
</div>
</div>
I reckon it must be fairly simple but i can't seem to figure out how to get my floats right. The picture shows what i want vs what i have. If you provide an answer please provide the logic also. thanks.
<div id="racks" style="overflow:auto">
<div id="selStat">
<p>No station selected</p>
</div>
<hr id="hrtest">
<div id="rackAction">
<p>Choose the type of card, then select which action to perform.</p>
<div id="radio">
Type:
<div class="fr">
<input type="radio" id="radioS" name="radio"><label for="radioS">S</label>
<input type="radio" id="radioP" name="radio"><label for="radioP">P</label>
<input type="radio" id="radioV" name="radio"><label for="radioV">V</label>
</div></div>
<p>Cardnumber: <input id="cardNum" class="fr" type="number" size="1"/> </p>
<p>Action:
<div class="fr">
<button onClick="addRack()" type="button">Add</button>
<button onClick="deleteRack()" type="button">Delete</button>
</div></p>
</div>
</div>
CSS is as follow:
.fr{
float:right;
}
Syntactically, you can't have a div inside of a p tag. On that topic, check this SO Question. To get the elements on the same line, you can place the "Action" text in a seperate div, and float it left.
The HTML:
<div id="racks" style="overflow:auto">
<div id="selStat">
<p>No station selected</p>
</div>
<hr id="hrtest">
<div id="rackAction">
<p>Choose the type of card, then select which action to perform.</p>
<div id="radio">
Type:
<div class="fr">
<input type="radio" class="margin-bottom" id="radioS" name="radio"><label for="radioS">S</label>
<input type="radio" class="margin-bottom" id="radioP" name="radio"><label for="radioP">P</label>
<input type="radio" class="margin-bottom" id="radioV" name="radio"><label for="radioV">V</label>
</div>
</div>
<p>Cardnumber: <input id="cardNum" class="fr" type="number" size="1"/> </p>
<div class="fl">Action:</div>
<div class="fr">
<button onClick="addRack()" type="button">Add</button>
<button onClick="deleteRack()" type="button">Delete</button>
</div>
</div>
</div>
The CSS:
.fr{
float:right;
}
.fl {
float:left;
}
.margin-bottom {
margin-bottom:10px;
}
The fiddle.
Edit:
As per the comments, you can add a class to the radio buttons in question, and add additional margins or padding to the bottom of the radio buttons. I have updated the code to include the class additions and the CSS.
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>
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/