Need help aligning form with CSS - css

Hey I have a very simply question but I am not quite sure how to achieve this without using HTML tables. Basically what I want is the label to to be on the left with 3 radio button to its right. The thing is, I want each individual radio button to be aligned vertically.
For example:
Label - choice 1
..........- choice 2
..........- choice 3
The HTML structure I am using is as follows:
<label for="radio1">Label</label>
<input type="radio" name="radio1"> <span class="form-span">Option 1</span>
<input type="radio" name="radio1"> <span class="form-span">Option 2</span>
<input type="radio" name="radio1"> <span class="form-span">Option 3</span>
Can anyone help me to align the form properly?
Thanks :)
EDIT
I found a very simply solution and was wondering whether is it an acceptable one: could you please tell me if it acceptable according to HTML standards?
<label for="radio1">Label</label>
<span class="form-span"><input type="radio" name="radio1"> <span class="form-label">Option 1</span></span>
<span class="form-span"><input type="radio" name="radio1"> <span class="form-label">Option 2</span></span>
and CSS:
.form-span {display:block}

The easiest way is to wrap everything in a div:
<div class="container">
<label for="radio1">Label</label>
<input type="radio" name="radio1"> <span class="form-span">Option 1</span>
<input type="radio" name="radio1"> <span class="form-span">Option 2</span>
<input type="radio" name="radio1"> <span class="form-span">Option 3</span>
</div>
and then add the following CSS:
.container{height:200px;}
label{float:left; height:100%;}
input{float:left;}
.form-span{display:block;}
Check out this jsFiddle to see a live example.

HTML
<label for="radio1">Label</label>
<div id="parentDiv">
<input type="radio" name="radio1"> <span class="form-span">Option 1</span>
<input type="radio" name="radio1"> <span class="form-span">Option 2</span>
<input type="radio" name="radio1"> <span class="form-span">Option 3</span>
</div>
CSS
#parentDiv, label, input, span {
float:left;
}
input {
clear:both;
margin-left:5px;
}
span {
margin-left:5px;
}
Check it out : http://jsfiddle.net/gNHB7/

Related

Bootstrap 4 checkbox/switch control - how to be small (-sm)?

Using BS4 the custom switch/checkbox can be added to the form. Unfortunately - the small (-sm) modification wont work. I attach a code sample and an image.
https://www.codeply.com/p/gZuRjGvqG2
What I want to achieve is to get the switch become as small (in height) as the input field itself. I cannot find "custom-control-sm" or similar class, and form-control-sm wont work.
<div class="input-group input-group-sm">
<span class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-table"></i>
</span>
</span>
<span class="input-group-prepend">
<span class="input-group-text">
<span class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input form-control-sm" aria-autocomplete="none" autocomplete="off" id="DefineAttributes" name="DefineAttributes" title="Define the attributes" value="true">
<label class="custom-control-label form-control-sm" for="DefineAttributes"></label>
</span>
</span>
</span>
<input type="text" class="form-control" aria-autocomplete="none" autocomplete="off" id="Attributes" name="Attributes" placeholder="Attributes ..." value="something">
<span class="input-group-append">
<a class="btn btn-sm btn-outline-primary " title="Select attributes" href="#">Select</a>
</span>
</div>
Had to do the following changes:
Add p-0 to <span class="input-group-text"> (the one for the checkbox).
Add "style=height: 0;" to <input type="checkbox" ... & <label class="custom-control-label ... to remove any height the invisible element has.
Adjust the position of the resultant slider with custom margins on the <span class="custom-control custom-switch">, i.e., added: "style="margin-left: 24px; margin-right: -12px;"
This should result in a proper looking slider, and in the sm size.

Bootstrap 3 input-group-addon losing markup

Please help me out, after adding the extra input-group-addon I am losing the markup of this form field. I would also like to have the chevron icon moved to the end of the form field instead of the input-group-addon. Even the label is now in the wrong position.
<?php
<div class="col-md-6">
<div class="input-group has-success has-feedback" id="add_km_tarief_div">
<label for="add_km_tarief_div">Tarief</label>
<span class="input-group-addon">€</span>
<input type="number" min="0" step="0.01" max="1" class="form-control" id="add_km_tarief" name="add_km_tarief" value="0.19" onkeyup="validate_add_table_1()">
<span class="input-group-addon">p/km</span>
<span class="glyphicon glyphicon-ok form-control-feedback" id="add_km_tarief_glyp"></span>
</div>
</div>
?>
Try With This
<div class="col-md-6">
<div class="input-group has-success has-feedback" id="add_km_tarief_div">
<label for="add_km_tarief_div" class="addyourclassname">Tarief</label>
<span class="input-group-addon">€</span>
<input type="number" min="0" step="0.01" max="1" class="form-control" id="add_km_tarief" name="add_km_tarief" value="0.19" onkeyup="validate_add_table_1()">
<span class="input-group-addon">p/km</span>
<span class="glyphicon glyphicon-ok form-control-feedback addyourownclass" id="add_km_tarief_glyp"></span>
</div>
</div>
Css:
.addyourclassname{float:left}
.addyourownclass{float: left;
position: relative;
top: 0;}

Bootstrap - Layout of Radio Buttons

I have a webpage that uses Bootstrap 3. In this page, I have some radio buttons. Some of them have short labels. Some have longer labels. I'd like to format my radio buttons so that they render like this:
+------------------------------------------------------+
| o Choice 1 |
| |
| o Choice 2. This is a longer label that should |
| wrap. Notice how the wrap does not happen under |
| the radio button. Rather the text is justified |
| |
| o Choice 3 |
+------------------------------------------------------+
In an attempt to do this, I decided to use display:inline-block;, but that's not working. I'd really like to use inline-flex. However, I can't use that because of my target browsers. So, I tried mimicing this functionality using straight HTML. I've created that in this Bootply. Yet, the wrapping behavior is still incorrect. My HTML looks like this:
<div class="container">
<div id="myChoices">
<label class="choice">
<input id="SelectedStation" name="SelectedStation" type="radio" value="1">
<span class="outer"><span class="inner"></span></span>
<p>ABC</p>
</label>
<br>
<label class="choice">
<input id="SelectedStation" name="SelectedStation" type="radio" value="2">
<span class="outer"><span class="inner"></span></span>
<p>CBS</p></label>
<br>
<label class="choice">
<input id="SelectedStation" name="SelectedStation" type="radio" value="3">
<span class="outer"><span class="inner"></span></span>
<p> This is a longer label that should wrap. Notice how the wrap does not happen under the radio button. Rather the text is justified</p>
</label>
<br>
<label class="choice">
<input id="SelectedStation" name="SelectedStation" type="radio" value="4">
<span class="outer"><span class="inner"></span></span>
<p>NBC</p>
</label>
<br>
</div>
</div>
What did I do wrong? Why is a) the label appearing on the line below the radio button and b) why isn't the text wrapping inline with the label?
Thank you
Firstly, you can't use the same id more than once in a single page; so use a .SelectedStation class instead.
Secondly, you can use relative positioning on .choice, absolute positioning on .SelectedStation and apply some left padding to your <p>s.
.choice {
position: relative;
display: block;
}
.SelectedStation {
position: absolute;
top: 0;
left: 0;
}
.choice p {
padding-left: 22px;
}
<div class="container">
<div id="myChoices">
<label class="choice">
<input class="SelectedStation" name="SelectedStation" type="radio" value="1">
<span class="outer"><span class="inner"></span></span>
<p>ABC</p>
</label>
<br>
<label class="choice">
<input class="SelectedStation" name="SelectedStation" type="radio" value="2">
<span class="outer"><span class="inner"></span></span>
<p>CBS</p>
</label>
<br>
<label class="choice">
<input class="SelectedStation" name="SelectedStation" type="radio" value="3">
<span class="outer"><span class="inner"></span></span>
<p>This is a longer label that should wrap. Notice how the wrap does not happen under the radio button. Rather the text is justified</p>
</label>
<br>
<label class="choice">
<input class="SelectedStation" name="SelectedStation" type="radio" value="4">
<span class="outer"><span class="inner"></span></span>
<p>NBC</p>
</label>
<br>
</div>
</div>
#myChoices p {
display: inline-block;
}
p tag is block element, now we changed to inline-block,
as you are using bootstrap, you can use following classes to fix the wrap issue
add col-xs-12 class to #myChoices div tag
add col-xs-2 class to all span.outer tags
add col-xs-10 class to p tag, if p tag is not possible wrap p tag in div
Example codepen

Vertical positioning of bootstrap toggles

I have a couple of bootstrap toggle buttons, as shown in the example below.
For weird reasons, the button text is always vertically aligned to the top whereas the various examples taken from the bootstrap website show button texts vertically centered.
Looking at the doc available on the website (http://www.bootstraptoggle.com), I did not find out any additional setting to put in my code :
<div class="example">
<span class="label label-primary">chk01 - Chambre 1 [A]</span>
<input id="chk01" type="checkbox" data-onstyle="success" data-toggle="toggle" data-height="25">
</div>
<div class="example">
<span class="label label-primary">chk02 - Chambre 2 [B]</span>
<input id="chk02" type="checkbox" data-onstyle="success" data-toggle="toggle" data-height="25">
</div>
<div class="example">
<span class="label label-primary">chk03 - Chambre 3 [N]</span>
<input id="chk03" type="checkbox" data-onstyle="success" data-toggle="toggle" data-height="25">
</div>
<div class="example">
<span class="label label-primary">chk04 - Salle de bains (Lavabo) [C]</span>
<input id="chk04" type="checkbox" data-onstyle="success" data-toggle="toggle" data-height="25">
</div>
<div class="example">
<span class="label label-primary">chk05 - Salle de bains (Baignoire) [D]</span>
<input id="chk05" type="checkbox" data-onstyle="success" data-toggle="toggle" data-height="25">
</div>
<div class="example">
<span class="label label-primary">chk06 - Lumière WC [Z]</span>
<input id="chk06" type="checkbox" data-onstyle="success" data-toggle="toggle" data-height="25">
</div>
Any idea about what I have missed? I hope my question is clear enough. Many thanks for your kind help.

How can I make all these onto 1 line with Bootstrap 3?

What I have done here is use the standard Bootstrap grid system of .col-md-5 and .col-md-7 under .row to place all the element on 1 row but I can't seem to make it work.
Another thing is the element keeps getting pulled down to another line below the input.
<div class='col-md-12'>
<div class='row'>
<div class='col-md-5'>
<select class='form-control'>
<option value='us'>USA</option>
</select>
</div>
<div class='col-md-7'>
<span class="" style="display: inline">
<span class="input-group">
<span class="input-group-addon">
ZIP/Postal code
</span>
<input class="form-control" type="text">
</span>
<a href='#' class=''>
cancel
</a>
</span>
</div>
</div>
</div>
How can I put all these onto 1 line?
Here's a jsfiddle for it: http://jsfiddle.net/2656xt63/
There's nothing wrong with your bootstrap column classes, but the elements will only appear side by side on md screen widths (>= 992px). The fiddle panel is narrower than that so the elements are stacked.
If you use col-xs-* the elements will appear side by side at all times.
Alternatively, for a small form such as this, you could use an inline form:
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="country">Country</label>
<select class='form-control' id="country">
<option value='us'>USA</option>
</select>
</div>
<div class="form-group">
<span class="input-group">
<span class="input-group-addon">
ZIP/Postal code
</span>
<input class="form-control" type="text">
</span>
</div>
<div class="form-group">
<a href="#" class="btn btn-default">
cancel
</a>
</div>
</form>
Here's a bootply demonstrating the inline form.

Resources