Is it possible somehow to make checkbox and text inline? Having trouble with this one, tried inline options through css, but seems I either can't use it or It is doesn't work.
Here is a simple example. All you need is a wrapper element and one line of CSS. By default, all immediate flex children will share the available horizontal space on the line.
.checkboxRow {
display: flex;
}
<div class="checkboxRow">
<input id="mycheckbox" type="checkbox">
<label for="mycheckbox">I am a label</label>
</div>
<div class="checkboxRow">
<input id="mycheckbox2" type="checkbox">
<label for="mycheckbox2">I am a label</label>
</div>
Related
I want to position a label above and to the left edge of a text field. I put them together in a div. The only problem left is that I need the correct position or display attribute that the input field doesn't react to the label. In that way, I could write text-align:left or float: left to position the label at the very edge of the div and thus at the very edge of the label.
<div class="AlignLeft">
<input type="text" id="1" name="name" maxlength="100" required>
<label for="name" id="1">Align label left</label><br>
</div>
Thank you!
without CSS
to make that on click of the label, the input will be focused.
you will need that your <label> element, have the for="" attribute
this attribute needs the same id="" as the input. (not the name="")
for attribute (docs): https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/for
for making the <label> be on the left
put the label before the <input>
make the input nested inside the <label>, then insert a span before the <input>
no css solution:
<div>
<label for="myId"> <!-- put here the id -->
<span>this is the label text</span> <!-- the text -->
<input type="text" id="myId"> <!-- input -->
</label>
</div>
with CSS
if you can't change the HTML structure, then follow this second way (using CSS)
The float property, you showed before seems to work fine.
so just change the for="" attribute to be equal to the id="" of <input>
.AlignLeft label {
float: left;
}
<div class="AlignLeft">
<input type="text" id="1">
<label for="1">Align label left</label><br>
</div>
or use CSS flex with the direction of reverse
using flexbox you have other advantages like gap or centering, and so on...
.AlignLeft {
display: flex;
/* solve the problem (now the text is on the left side) */
flex-direction: row-reverse;
/* you can center easily using flex, or in this case put it on the left of the page */
justify-content: left;
align-items: center;
/* add a gap is easier with flex */
gap: 1rem;
}
<div class="AlignLeft">
<input type="text" id="1">
<label for="1">Align label left</label><br>
</div>
Im using bootstrap, like that:
<label>
<input type="text">
</label>
the problem is, label is hardcoded with display: inline-block; How to get rid of it, or make it nicer?
override it with your own stylesheet with display:block
You can try it with <label style="display: block;"></label>
If you have bootstrap. Just use the class "form-control" for the textbox. And I suggest you, don't use the 'label' for parent of textbox.
<input type="text" class="form-control">
use this code for 100% width of textbox
It's frowned upon these days, but I believe styling the label inline should override it.
<label style="display:block;">
<input type="text">
</label>
Show solve your query
When creating inline radios in a form-horizontal, is there any way to vertically align the radio buttons? fiddle here - note that button 'EF' is below button 'B', but is offset to the right - I'd like it to be directly below 'B'. I can mess around with padding but I'd rather use the grid if possible. Thanks.
Demo Fiddle
The issue here is that you are effectively placing two columns of content within a single Bootrap column (col-sm-4), you either want to split the radio buttons into separate columns, or apply a set width to them so it is consistent across rows.
Try adding:
label{
width:46%;
}
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
option two
</label>
</div>
Bootply here
Bootstrap has a lot of examples for types of forms. I'm interested in using the "Horizontal form" which looks like this
This is what it looks like after outlining some elements with the web inspector toolbar:
I am working inside of a popup modal and space is already a bit tight. I tried adding bootstrap's grid system's .span1 and .span2 to the labels as a class, but it is not giving the desired behavior.
Is there a way to use some other aspect of bootstrap to get the desired behavior (i.e. tighten up the amount of space that labels on a horizontal form take up)? What is the proper way to do this? I'm using bootstrap version 2.1
i am not aware if bootstrap has got something defined for it..below is a workaround..
<div class="control-group">
<label class="control-label" style="width:auto" for="inputEmail">Email</label>
<div class="controls" style="margin-left:auto">
<input type="text" class="input-small" id="inputEmail" placeholder="Email">
</div>
</div>
i added style="width:auto" which was default 140px and style="margin-left:auto" which was default 160px. Also class="input-small" to reduce the input field width to squeeze out more space so that it fits in modal..
Now you tweak further to fit it as per your needs..
To reduce the vertical spacing, form-control-sm shrinks the font-size (using Bootstrap 4):
<form>
<div class="form-group form-row">
<label class="col-sm-2 col-form-label form-control-sm">Label</label>
<div class="col-sm-3">
<input class="form-control form-control-sm">
</div>
</div>
</form>
How can I align button right next to my input text. Example here
HTML
<div id="frm">
<label>Select an Item:
<input type="text" /><input type="button" value="..." class="open">
</label>
<label>Price:<input type="text" /></label>
CSS
#frm label
{
display:block;
float:left;
padding-right:6px;
}
#frm input
{
display:block;
}
Edit
I want my form elements horizontally aligned in blocks & I like the popup button to align with just one textbox.
I'd suggest to move the <input> outside the <label>, like this:
<div id="frm">
<div class="group">
<label for="item">Select an Item:</label>
<input type="text" id="item" />
<input type="button" value="..." class="open">
</div>
<div class="group">
<label for="price">Price:</label>
<input type="text" id="price" />
</div>
</div>
If you want to separate the inputs from the label, you should place the label text inside an own element, and not mix label text and input into a common tag.
Then, you can use the following CSS:
#frm .group {
display: block;
float: left;
padding-right: 6px;
}
#frm label {
display:block;
}
See how it looks like, is this what you want?
-Easiest way to solve your problem, is to remove all CSS - input is inline by default, so it won't wrap to the next line if you add no CSS.
-And I'd add an extra div to make sure your fields are on seperate lines, no CSS needed either.
Like this:
<div id="frm">
<div class="field">
<label>Select an Item:</label>
<input type="text"><input type="button" value="..." class="open">
</div>
<div class="field">
<label>Price:</label>
<input type="text">
</div>
</div>
http://jsfiddle.net/ckfZE/15/
http://jsfiddle.net/ckfZE/18/
added a span-tag though
This CSS is causing that conflict:
#frm input {
display:block;
}
You could set .open to display:inline to fix this.
Be a little more specific with your question. If you took the CSS out completely they would be aligned right next to each other. If you want them on separate lines add a <br/> after the text input.