I have a form with two fieldset elements
<form>
<fieldset>
</fieldset>
<fieldset>
</fieldset>
</form>
I need to make to be horizontally?
Just float them and add a width.
fieldset {
float: left;
width: 50%;
}
You could put them in a row fluid span6. You can do some other things, but the well will cause issues with row.
<form class="row-fluid well">
<fieldset class='span6'>
<legend>Legend 1</legend>
<label class="radio">
<input type="radio" name="option1"/> Option1
</label>
<label class="radio">
<input type="radio" name="option2"/> Option2
</label>
</fieldset>
<fieldset class='span6'>
<legend>Legend 2</legend>
<select>
<option> option1 </option>
</select>
</fieldset>
</form>
you can do that by add to the mother:
overflow: hidden;
and add to the fieldset:
display: block; float: left;
See the example: http://jsfiddle.net/JXf8g/25/
Related
I'm trying to center a group of inline radiobuttons on my webpage but can't seem to override Claritys' CSS styling.
I've tried placing the clarity code inside a parent DIV tag using align-text:center, align-content:center, align-items: center, using a FIELDSET tag. But none of these have worked so far
<fieldset style='text-align: center'>
<div class="clr-form-control">
<div class="clr-control-container clr-control-inline">
<div class="clr-radio-wrapper">
<input type="radio" id="vertical-radio1" name="radio-full" value="option1" class="clr-radio">
<label for="vertical-radio1" class="clr-control-label">option 1</label>
</div>
<div class="clr-radio-wrapper">
<input type="radio" id="vertical-radio2" name="radio-full" value="option2" class="clr-radio">
<label for="vertical-radio2" class="clr-control-label">option 2</label>
</div>
<div class="clr-radio-wrapper">
<input type="radio" id="vertical-radio3" name="radio-full" value="option3" class="clr-radio">
<label for="vertical-radio3" class="clr-control-label">option 3</label>
</div>
</div>
</div>
</fieldset>
The radiobuttons should be centered in the page.
One approach would be to add your own css class to the clr-control-container and set the following for its css:
.app-centered-radios {
width: 100%;
justify-content: center;
}
Here is a stackblitz with centered inline radio buttons: https://stackblitz.com/edit/so-56050259-center-inline-radio-buttons
size of the select field is affecting by a bootstrap file as shown in the screenshot and i'm unable to find out how to solve this problem.
<form>
<div class="form-group">
<label for="name" class="labstyle">Enter Your Name</label>
<input type="text" class="form-control" name="name" size="20"
maxlength="40" placeholder="Enter You Name" required autofocus>
</div>
<div class="form-group">
<label for="sell" class="labstyle">Chose Your Wish:</label>
<select class="form-control" id="sell">
<option value="0" hidden="hidden" disabled="" selected="">Chose Your
Wish</option>
<option value="morning">Good Morning</option>
<option value="night">Good Night</option>
</select>
</div>
<div class="form-group">
<label for="message" class="labstyle">Message</label>
<textarea class="form-control" name="message" rows="3" cols="40"
placeholder="Optional" maxlength="92"></textarea>
</div>
<button type="submit" class="btn" id="btncustom">Create</button>
</form>
Adding the following will calculate correctly the height in this situation.
select.form-control:not([size]):not([multiple]) {
height: auto!important;
}
include this in abc.component.ts
styles: [`
:host /deep/ select.form-control:not([size]):not([multiple]) {
height: auto!important;
padding: 0.375rem 0.75rem;
}`]
Ok, inside your custom select.form-control class, try to decrease the line-height property for something like that:
line-height: 1.0;
or maybe a small value.
Add this class in your custom style sheet (css file).
.form-control{
height:30px;
line-height:30px;
padding:6px;
}
include this on your css it will fix the problem
#sell.form-control{
height: 46px important!;
}
I'm trying to get radio buttons to stack on top of each other instead of display side by side.
I have several form labels defined as inline-block with a width of 150, for the purpose of aligning the input boxes.
I Know how to do this without a label, but when the labels sit to the left, I can't figure it out.
HTML:
<form action="here.php" method="POST">
<p>
<label for="bday">Birthday:</label>
<input type="date" name="bday">
</p>
<p>
<label for="gender">Gender</label>
<input type="radio" name="gender" value"male">Male
<input type="radio" name="gender" value"female">Female
</p>
<p>
<input type="submit" name="input" value="Submit">
</p>
</form>
CSS:
form {
width:356px;
margin: 0 auto;
}
label {
width:150px;
display: inline-block;
}
How do I get "female" to sit directly under "male".
I've gotten close but I don't think its the right way. I combined the radio button inputs in a <p> then floated its label and itself to the left, added a <br />, then cleared the submit button, but it doesn't look that great.
Advice please? Thanks a bunch,
Josh
I'd suggest reorganising your HTML, to the following:
form {
width: 356px;
margin: 0 auto;
}
fieldset {
margin: 0.5em auto;
width: 90%;;
}
label {
width: 150px;
display: inline-block;
}
fieldset fieldset label {
width: auto;
margin-left: 150px;
}
<form action="here.php" method="POST">
<fieldset>
<label for="bday">Birthday:</label>
<input type="date" name="bday">
<!-- a fieldset groups related input elements together -->
<fieldset>
<!-- a <legend> labels a section of the <form>, identifying
the grouped <inputs>, a <label> was utterly wrong for
this, given it was, and can be, associated with only
one of the <input>s -->
<legend>Gender</legend>
<!-- wrapping the <input> associates the <input> with the appropriate
(parent) label -->
<label>
<input type="radio" name="gender" value="male">Male</label>
<!-- inciedentally, the '=' is not optional, and you were
missing them here to identify the value and its
associated attribute-value -->
<label>
<input type="radio" name="gender" value="female">Female</label>
</fieldset>
<input type="submit" name="input" value="Submit">
</fieldset>
</form>
Add a break?
<input type="radio" name="gender" value"male">Male<br />
<input type="radio" name="gender" value"female">Female
You can put each of the radio inputs in a div ( or other block element ) and then they will sit on top of each other. You could then style those divs using CSS for any other styling you want.
What is the most elegant (ie. non-hacky) way to properly align a group of checkboxes, one or more of which have associated text inputs? Whatever I have tried, I end up with (i) unevenly spaced checkboxes, or (ii) misaligned checkboxes, or (iii) misaligned labels, or (iv) misaligned text boxes.
Since the use case of:
What is your favourite food?
(a) Apple
(b) Banana
(c) Carrot
(d) Other: _______
is surely very common, I wonder whether anyone has found a way to do this with Bootstrap standard classes, before I start forcing my own classes into the code.
Here is the code I have now:
<div class="form-group">
<label class="col-sm-2 control-label">
Favourite food
</label>
<div class="col-sm-10">
<div class="checkbox">
<label>
<fieldset class="form-inline">
<input type="checkbox"/>
Apple
</fieldset>
</label>
</div>
<div class="checkbox">
<label>
<fieldset class="form-inline">
<input type="checkbox"/>
Banana
</fieldset>
</label>
</div>
<div class="checkbox">
<label>
<fieldset class="form-inline">
<input type="checkbox"/>
Other <input type="email" placeholder="someone#somewhere.com" class="form-control"/>
</fieldset>
</label>
</div>
<div class="checkbox">
<label>
<fieldset class="form-inline">
<input type="checkbox"/> Any fruit from one of these colour groups: Red, Green, Blue
</fieldset>
</label>
</div>
</div>
</div>
Screenshot attached showing output in Chrome:
The fourth checkbox is too far from the third, while the text and 'input type=text' on the third line are too low.
Yes, there is a simple bootstrap way, just change the code of the checkbox to this:
<div class="checkbox">
<div class="form-inline">
<label>
<input type="checkbox"/>
Other
</label>
<input type="email" placeholder="someone#somewhere.com" class="form-control"/>
</div>
</div>
Working Example
Here's one way to achieve what you're trying to do. The only change which I've made to your HTML structure is that I've wrapped the description for each checkbox inside a <span> tag and added used this CSS:
input[type="checkbox"] {
position: relative !important;
display: inline-block;
vertical-align: text-bottom;
}
span {
display: inline-block;
vertical-align: middle;
}
Here's a working demo:
input[type="checkbox"] {
position: relative !important;
display: inline-block;
vertical-align: text-bottom;
}
span {
display: inline-block;
vertical-align: middle;
}
.form-inline .form-control {
padding-top: 0px;
padding-bottom: 0px;
height: 20px;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group">
<label class="col-sm-2 control-label">Favourite food</label>
<div class="col-sm-10">
<div class="checkbox">
<label>
<fieldset class="form-inline">
<input type="checkbox" /> <span>Apple</span>
</fieldset>
</label>
</div>
<div class="checkbox">
<label>
<fieldset class="form-inline">
<input type="checkbox" /> <span>Banana</span>
</fieldset>
</label>
</div>
<div class="checkbox">
<label>
<fieldset class="form-inline">
<input type="checkbox" /> <span>Other</span>
<input type="email" placeholder="someone#somewhere.com" class="form-control" />
</fieldset>
</label>
</div>
<div class="checkbox">
<label>
<fieldset class="form-inline">
<input type="checkbox" /> <span>Any fruit from one of these colour groups: Red, Green, Blue</span>
</fieldset>
</label>
</div>
</div>
</div>
I have input text's and label tags. I can't figure out the CSS to get the label text to align right below the input text. Here's a snippet of the HTML:
<form id="sg1">
<label for="member1">member 1</label>
<input name="member1" id="member1" value="jack" />
<label for="member2">member 2</label>
<input name="member2" id="member2" value="carter" />
<label for="member3">member 3</label>
<input name="member3" id="member3" value="jackson" />
<label for="member4">member 4</label>
<input name="member4" id="member4" value="tielk" />
</form>
Trying to get:
[input box 1] [input box 2]
label 1 label 2
etc, with all elements.
A quickly whipped up example that works:
input {
display: inline-block;
width: 6em;
position: relative;
top: -3em;
}
label {
display: inline-block;
width: 6em;
margin-right: .5em;
padding-top: 1.5em;
}
<form id="sg1">
<label>member 1 <input name="member1" id="member1" value="jack" /></label>
<label>member 2 <input name="member2" id="member2" value="carter" /></label>
<label>member 3 <input name="member3" id="member3" value="jackson" /></label>
<label>member 4 <input name="member4" id="member4" value="tielk" /></label>
</form>
Could be improved, but I find it cleaner than extraneous divs, and it degrades much nicer than the label-after-input-approach when CSS support is absent. Personally, I prefer to nest the inputs in the labels anyway.
Use a table (one input/label pair per cell) or left-floating divs (one input/label pair per div). Example:
<div class="pair">
<input type="text" name="foo" value="bar" /><br />
<label for="foo">shabba</label>
</div>
<div class="pair">
…
</div>
CSS:
div.pair {
float:left;
}
You'd make the job a lot easier by wrapping each field (in this case, each input/label pair) in a div.
You can use pure css to get this to achieve what you want, but it requires a lot of adhoc positioning stuff that you're better off not doing.
The simplest way is to put the label beneath the input on the html:
<form id="sg1">
<input name="member1" id="member1" value="jack" />
<label for="member1">member 1</label>
<input name="member2" id="member2" value="carter" />
<label for="member2">member 2</label>
<input name="member3" id="member3" value="jackson" />
<label for="member3">member 3</label>
<input name="member4" id="member4" value="tielk" />
<label for="member4">member 4</label>
</form>
Then you can wrap each input/label pair with a div, and set the div like so:
<form id="sg1">
<div class="wrap">
<input name="member1" id="member1" value="jack" />
<label for="member1">member 1</label>
</div>
<div class="wrap">
<input name="member2" id="member2" value="carter" />
<label for="member2">member 2</label>
</div>
<div class="wrap">
<input name="member3" id="member3" value="jackson" />
<label for="member3">member 3</label>
</div>
<div class="wrap">
<input name="member4" id="member4" value="tielk" />
<label for="member4">member 4</label>
</div>
</form>
#sg1 div
{
clear: both;
float: left;
}
Next you can put
#sg1 label
{
float: right;
}
input
{
display:block;
}