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
Related
I am having a problem with Bootstrap radio inputs in which I can't seem to get the alignment to be vertically in the middle with the text.
<div class="tab-content">
<div class="tab-pane" id="Type">
<form>
<div class="form-group">
<input type="radio"
value="Server"
checked="checked"
class="form-control"
style="width: 34px; display: inline-block" />
<label for="WindowsServer">Windows Server / PC</label><br />
</div>
</form>
</div>
</div>
Can anyone point out what I'm doing wrong or what I can do to fix this?
Got this sorted - after much playing around, I added a style:
input{
vertical-align:bottom;
}
Now the radio and text are aligned perfectly!
Is there a way to select an element that isn't child? I'm not't really sure how to word this or explain it. Hopefully the code will speak for itself:
Fiddle: http://jsfiddle.net/kBhgV/3/
HTML:
<div title="section-1">
<div>
<input type="checkbox" id="item-1">
<label for="item-1">Item 1</label>
</input>
</div>
</div>
<div title="section-2">
<div>Test Drop</div>
</div>
CSS:
[title=section-2] {
display: none;
}
input:checked ~ [title=section-2] {
display: block;
}
Is there a way that when you check the box, it will show section-2 without making section-2 a child of section 1?
change your code from
<div title="section-1">
<div>
<input type="checkbox" id="item-1">
<label for="item-1">Item 1</label>
</input>
</div>
</div>
<div title="section-2">
<div>Test Drop</div>
</div>
to
<input type="checkbox" id="item-1"/>
<div title="section-1">
<div>
<label for="item-1">Item 1</label>
</div>
</div>
<div title="section-2">
<div>Test Drop</div>
</div>
then your css should work fine. You can set the visiblity of your checkbox to hidden and position it absolutely somewhere off the page.
my site uses a similar technique for the navigation so you can see how it works by inspecting the code.
http://www.aktof.ca/
changed your fiddle
http://jsfiddle.net/kBhgV/4/
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/
My code as follows, generated by a software and I cannot change any of the values.
<div class="cred-field cred-field-ticket-month-or-course">
<div class="cred-label">Month or Course</div>
<div id="cred_form_3584_1_wpcf-ticket-month-or-course-radios" class="myzebra-radios">
<div class="myzebra-radios-single">
<label class="myzebra-style-label">
<input id="cred_form_3584_1_wpcf-ticket-month-or-course_wpcf-fields-radio-option-a6da15467aeb84f539c0dc1cd766ccd6-2" class="myzebra-control myzebra-radio myzebra-prime-name-wpcf-ticket-month-or-course" type="radio" checked="checked" value="wpcf-fields-radio-option-a6da15467aeb84f539c0dc1cd766ccd6-2" name="wpcf-ticket-month-or-course">
<span class="myzebra-radio-replace"></span>
</label>
<label id="cred_form_3584_1_label_wpcf-ticket-month-or-course_wpcf-fields-radio-option-a6da15467aeb84f539c0dc1cd766ccd6-2" for="cred_form_3584_1_wpcf-ticket-month-or-course_wpcf-fields-radio-option-a6da15467aeb84f539c0dc1cd766ccd6-2">per month</label>
</div>
<div class="myzebra-radios-single">
<label class="myzebra-style-label">
<input id="cred_form_3584_1_wpcf-ticket-month-or-course_wpcf-fields-radio-option-f63eb739e2a6499a882c8e82aa35b028-1" class="myzebra-control myzebra-radio myzebra-prime-name-wpcf-ticket-month-or-course" type="radio" value="wpcf-fields-radio-option-f63eb739e2a6499a882c8e82aa35b028-1" name="wpcf-ticket-month-or-course">
<span class="myzebra-radio-replace"></span>
</label>
<label id="cred_form_3584_1_label_wpcf-ticket-month-or-course_wpcf-fields-radio-option-f63eb739e2a6499a882c8e82aa35b028-1" for="cred_form_3584_1_wpcf-ticket-month-or-course_wpcf-fields-radio-option-f63eb739e2a6499a882c8e82aa35b028-1">per course</label>
</div>
</div>
</div>
<div style="clear: both;"></div>
I need help in putting this radio button side by side (horizontally).
I cannot do this because it will affect other radio buttons on the same page. Is there any other techniques?
.myzebra-radios-single {
float: left;
}
You can use css cover,
<div id="cred_form_3584_1_wpcf-ticket-month-or-course-radios" class="myzebra-radios">
add class 'single', like this:
<div id="cred_form_3584_1_wpcf-ticket-month-or-course-radios" class="myzebra-radios single">
and css code:
.single .myzebra-radios-single{ float:none;}
the single class can be added to any .myzebra-radios-single father in front of the class
addclass like this:
$('#cred_form_3584_1_wpcf-ticket-month-or-course-radios').addClass('single');
the id should be unique
you can target
#cred_form_3584_1_wpcf-ticket-month-or-course-radios .myzebre-radios-single
that is, the class that you want to target, but only if it is a descendant of the given id
I'd like to have some "horizontally styled" fields inside a "vertically styled" form with Bootstrap.
How can I do that (if possible)?
You can leverage Bootstrap's existing classes (checkbox.inline)to get the effect you're looking for. The key to making it look right is to specify padding-left: 0px; on the labels:
<div class="control-group">
<div class="controls">
<label class="checkbox inline" style="padding-left: 0px;" for="inputColor">Favorite Color <input type="text" id="inputColor" class="span2" /></label>
<label class="checkbox inline" style="padding-left: 0px;" for="inputNColor">Next Color <input type="text" id="inputNColor" class="span2" /></label>
</div>
</div>
Please see http://jsfiddle.net/jhfrench/Hzucn/ for a working example.
I tried to create a new class for you (along the lines of .controls-row label.inline { padding-left: 0px;} so you wouldn't have to do styling on the element, but it caused more conflicts than I anticipated. So if you're going to use this solution pervasively, you might want to invest the time in untangling that...
You can use similar formatting to .form-horizontal implementation in bootstrap. (scroll sown to Horizontal Forms here: http://twitter.github.com/bootstrap/base-css.html#forms)
Wrap your labels and form elements in grouping divs (that's what .control-group does in Horizontal Form layout in bootstrap).
Float labels left to show them in horizontal alignment with the fields.
label.horizontal {
float: left;
width: 160px;
padding-top: 5px;
margin-right: 20px;
text-align: right;
}
In the above example, labels with class .horizontal will be "horizontally styled" and the rest "vertical" or default form layout.
there is a class ready to use on bootstrap!
check this example:
<div class="span6">
<form>
<div class="controls controls-row">
<input id="name" name="name" type="text" class="span3" placeholder="Name">
<input id="email" name="email" type="email" class="span3" placeholder="Email address">
</div>
<div class="controls">
<textarea id="message" name="message" class="span6" placeholder="Your Message" rows="5"></textarea>
</div>
<div class="controls">
<button id="contact-submit" type="submit" class="btn btn-primary input-medium pull-right">Send</button>
</div>
</form>
</div>