This html needs to display the radio icon to the left of the label but it is above it.
Chrome (left image), firefox 45.0.1 (right image)
The reason I nested the input in the label because the code needs to make the label clickable "clicking the label activate the radio button as well"
How can I get it to display correctly in all browsers? Thanks
.radio-label {
float: left;
}
<label class="radio-label">
<input type="radio" name={{group}} checked={{value}} value={{name}}>{{caption}}
</label>
You can try this:
<label class="radio-label">
<input type="radio" name={{group}} checked={{value}} value={{name}}>
<div>{{caption}}</div>
</label>
and styling like this...
.radio-label {
width: 200px; // you can modify this as per your needs...
}
.radio-label, .radio-label input {
float: left;
}
.radio-label div {
overflow: hidden;
}
display:inline-block property doesn't mean that you are forcing element to come on left it just means you want element in single line. Use float left which actually mean to left align a element
.radio-inline {
float: left;
}
You just try with,
.radio-inline {
float: left;
}
I think you have to pack both in a div and then align one item to left and other on right i.e radio button to left and label to right.
give a specific width to outer div and give 50% to each item
Related
I mean, these two boxes are not aligned horizontally because the labels are not the same size, i want the smaller label to justify to the right, so the boxes could be alingned
https://i.stack.imgur.com/H5FOA.pngstrong[CSS][1]
You can see this example here: https://codepen.io/HMokni/pen/abVOoeJ
label
{
display: block;
}
label span
{
display: inline-block;
text-align: right;
width: 100px;
}
<form>
<label>
<span>Data inicial:</span>
<input type="date" />
</label>
<label>
<span>Data final:</span>
<input type="date" />
</label>
</form>
PS: You can also use flexbox (Flex-end for label and flex-start for inputs) also possible with CSS grid.
One of the simplest ways to achieve this is with the margin-left CSS property, so select your lower element by Id, and play with the margin property:
#second_box_id {
margin-left: 30px;
}
I'm creating a project with HTML and CSS and I want to have options that can be chosen using the checkbox input. However, I want to alter the styling so that the actual box is hidden and the label text can be tapped to indicate a choice instead. I am able to hide the box by lowering its opacity to zero, but I'm struggling to move the invisible box on top of the text so that it appears the text is being tapped rather than the box. This will ultimately be a part of an iOS app.
Here is what I have: Current view with visible boxes and Current view with hidden boxes
The look of the hidden boxes is what I want, but for the background color to change the user has to tap to the left of the text (where the invisible box is).
Here is the HTML:
<div class="full-input preferences">
<input type="checkbox" name="sports" value="Sports" class="preference"><label for="sports">Sports</label>
<input type="checkbox" name="pets" value="Pets" class="preference"><label for="pets">Pets</label>
<input type="checkbox" name="movies" value="Movies" class="preference"><label for="movies">Movies</label>
<input type="checkbox" name="food" value="Food" class="preference"><label for="food">Food</label>
</div>
And the CSS:
.preferences {
display: flex;
flex-wrap: wrap;
flex: 2;
}
.preference {
margin: 0 .5em;
}
input[type=checkbox] {
opacity: 0;
}
input[type=checkbox] + label {
border: 1px solid #38A3B8;
padding: .3em;
border-radius: 5px;
min-width: 3em;
text-align: center;
z-index: 1;
}
input[type=checkbox]:checked + label {
background: #38A3B8;
color: white;
}
I've tried using absolute positioning, but it causes there to be only one box for all of the inputs rather than one box per input for some reason. I've also tried putting the input tag inside the label tag, but from there I can't change the background color when the box is checked.
but for the background color to change the user has to tap to the left of the text (where the invisible box is)
Well that’s because you did not correctly associate the labels with the input fields …
<input type="checkbox" name="sports" value="Sports" class="preference">
<label for="sports">Sports</label>
The for attribute has to refer to the ID of an input field, putting only the name in there is not enough.
<input type="checkbox" id="sports" name="sports" value="Sports" class="preference">
<label for="sports">Sports</label>
This way, the label is correctly associated with the input field, so that clicking the label text will now toggle the checkbox status.
You could add a padding to the Checkboxes that they don't look weird. (The actual size that the Checkbox would occupy)
input[type=checkbox] {
opacity: 0;
padding-right: 10px (or whichever size that fits);
}
Hopefully, this answer helped you resolve the problem (in any way).
Thank you very much.
I have a textbox and checkbox next to each other, my problem is the checkbox goes to the next line:
<td><div class='allDropdown'><input type='text' class='vendorDropdown' /> <input type='checkbox' class='checkbox' /></div></td>
I am trying to get them next to each other.
Here is my CSS:
.allDropdown {
width: 100%;
}
.allDropdown input[type=text] {
float: left;
width: 150px;
}
.allDropdown input[type=checkbox] {
float: left;
}
I have a very long table and I am also using bootstrap, when I try to decrease the size of the textbox, the td just gets smaller and the checkbox goes to the second line
you can position your text box as absolute so it will stick in any side you want
try this..
.allDropdown {
width: 100%;
}
.allDropdown input[type=text] {
float: left;
width: 150px;
}
.allDropdown input[type=checkbox] {
position:absolute;
right:<x>px;
top :<x>px;
}
Yes, actually that code seems about right. It's not rendering the two inputs in different lines. Can you show more code please? There might be some bootstrap styling going on there. On the other hand, instead of floating them, you should always try to change the way the box is being displayed instead of taking it ouf of the frame with the float; have you tried with display:inline-block for both?. Does the table have any styling going on that might be adjusting the size of the TDs?
I have an input box and a button defined like so:
<form class="form-inline">
<input type="text" title= "language" class="input-block-level" placeholder="Insert Languages"/>
<button type="submit" class="btn btn-primary">Filter by Languages</button>
</form>
But the button shows up on the second line. Is it possible to position the button to the right of the input box?
I think you may be misunderstanding the use of input-block-level class. When this class is applied to an input field, the input field will take all available width.
As a result, any element that you place next to it, will roll over to the next line.
If you need the elements to be side by side, remove input-block-level and replace with a more appropriate class (input-mini, input-small, input-medium, input-large, input-xlarge, input-xxlarge or span classes).
I'm using input-xxlarge, but it's still not big enough. How do I
customize it? I've tried something like .input-xxlarge { width:
1500px; !important; height: 30px !important; } , but it doesn't
override it. – Parseltongue 13 mins ago
Inspect the element with developer tools (like in Chrome, Safari etc) and see if other widths/heights are overriding your explicit declarations. I tried changing it on my end and was successful when I changed the actual class in bootstrap.css
set widths desired to each element and float them:
form{overflow: hidden}
form input{
display: block;
width: 70%;
float: left;
}
form button{
display: block;
width: 30%;
float: left;
}
I'm having this problem where I need to place a Label on top of an input element. The below image uses background images to do the trick but I want to do it with a label. Or a span maybe! I tried with may google links where CSS3 styling tutorials but found nothing. All of them are using images to place icons. I want to place a span/label with text in it.
As in the above image How can I place a span or a label in the way the icon is positioned. any ideas.
Do you mean something like this?
Demo
<div>
<label for="test">L</label>
<input type="text" id="test" />
</div>
div {
position: relative;
}
label {
position: absolute;
left: 5px;
}
input[type=text] {
padding-left: 15px;
}