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!
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
I've been trying to align the span3 <div> next to each other but I keep getting them one above the other.
So, I want to have:
SPAN3 SPAN3
and instead I am getting:
SPAN3
SPAN3
I appreciate any help here, thank you very much!
<div class="container">
<div class="row-fluid" >
<div class="span3">
<form class="well" action="login.php">
<legend>Sign In</legend>
<div class="control-group">
</br><input name="username" type="text" placeholder="Enter your username" class="input-large"></br></br>
</div>
<div class="control-group">
</br><input name="password" type="password" placeholder="Enter your password" class="input-large"></br></br>
</div>
<div class="control-group">
<button type="submit" class="btn">Log in</button></br></br>
<a> OR </a></br></br>
<button type="button" class="btn btn-primary">New user? Register Here!</button>
</div>
</form>
</div>
<div class="span3">
<img src="someimage.jpg" alt="sijpg">
</div>
</div>
</div>
Had the same problem, the issue is in Bootstrap 3.0 - It has some bugs in its bootstrap.min.css file.
My suggestion - download 2.3.2, it will work just fine
.span3 { display:inline-block; }
That is?
I have spent more time than I ever care to admit trying to fix this stupid bug. I have a form that displays to the left of some content. It looks okay on a wide and narrow screen, but on a tablet width (it overlays between 770 and 950 or so) the content to the right overlaps the form fields.
Am I missing something in my markup to use Twitter Bootstrap properly or do I need to add some custom styles using breakpoints to fix it? It appears that the fixed pixel width is causing the issue defined in bootstrap.css. Shouldn't these width properties use % since I'm using a fluid responsive layout?
<div class="container-narrow">
<div class="content">
<div class="row-fluid">
<div class="span5">
<form class="form-horizontal" id="applies-Step1-form" action="/" method="post">
<div class="control-group">
<label class="control-label required" for="Step1_email">Email <span class="required">*</span></label>
<div class="controls">
<input size="60" maxlength="255" name="Step1[email]" id="Step1_email" type="text" />
</div>
</div>
<div class="control-group">
<label class="control-label required" for="Step1_home_zip">Home Zip <span class="required">*</span></label>
<div class="controls">
<input size="5" maxlength="5" name="Step1[home_zip]" id="Step1_home_zip" type="text" />
</div>
</div>
</form>
</div>
<div class="span7">
<div class="promo-btm">
<h2>Heading 2</h2>
<ul class="checks">
<li>Bullet One</li>
<li>Bullet Two</li>
</ul>
</div>
</div>
</div>
</div>
</div>
See the attached screenshot for the bug or you can reproduce it yourself using my fiddle.
If someone could help point out a way to fix this I would be extremely appreciative!
Just add a width to your input elements so they can adapt responsively with all of your screen sizes. You can use something like .span12 as a width on your input elements and that should fix the issue:
HTML
<div class="container-narrow">
<div class="content">
<div class="row-fluid">
<div class="span5">
<form class="form-horizontal" id="applies-Step1-form" action="/" method="post">
<div class="control-group">
<label class="control-label required" for="Step1_email">Email <span class="required">*</span></label>
<div class="controls">
<input class="span12" size="60" maxlength="255" name="Step1[email]" id="Step1_email" type="text" />
</div>
</div>
<div class="control-group">
<label class="control-label required" for="Step1_home_zip">Home Zip <span class="required">*</span></label>
<div class="controls">
<input class="span12" size="5" maxlength="5" name="Step1[home_zip]" id="Step1_home_zip" type="text" />
</div>
</div>
</form>
</div>
<div class="span7">
<h2>Heading 2</h2>
<ul class="checks">
<li>Bullet One</li>
</ul>
</div>
</div>
</div>
</div>
Demo: http://jsfiddle.net/yR7Ap/18/
The other posts have pinpointed the root cause of the problem, that your form is too wide for the span5 div with the default bootstrap css
It's not too difficult to make it fit though. See if this helps : http://jsfiddle.net/panchroma/FXXaZ/
I have tightened up your form with this CSS:
/* pull control label left */
.form-horizontal .control-label {
width:70px; /* default 160 */
}
/* pull input box left */
.form-horizontal .controls {
margin-left: 90px; /* defaul 180 */
}
/* shorten input box */
input, textarea, .uneditable-input {
width: 180px; /* default 206 */
}
Good luck!
Your form is too wide for the .span5 column. Try adding this above:
<div class="row-fluid">
<div class="span5">hello</div>
<div class="span7">world</div>
</div>
and add the following style:
.row-fluid > div { outline: 5px solid green; }
and you'll see what I mean.
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've got a set of checkboxes I would like to position using CSS. This is how they are rendered:
<div id="edit-event-type" class="form-checkboxes">
<div class="form-item form-type-checkbox form-item-event-type-pubQuiz">
<input type="checkbox" id="edit-event-type-pubquiz" name="event_type[pubQuiz]" value="pubQuiz" class="form-checkbox">
<label class="option" for="edit-event-type-pubquiz">Pub Quiz </label>
</div>
<div class="form-item form-type-checkbox form-item-event-type-dancing">
<input type="checkbox" id="edit-event-type-dancing" name="event_type[dancing]" value="dancing" class="form-checkbox">
<label class="option" for="edit-event-type-dancing">Dancing </label>
</div>
<div class="form-item form-type-checkbox form-item-event-type-foodDeals">
<input type="checkbox" id="edit-event-type-fooddeals" name="event_type[foodDeals]" value="foodDeals" class="form-checkbox">
<label class="option" for="edit-event-type-fooddeals">Food Deals </label>
</div>
<div class="form-item form-type-checkbox form-item-event-type-liveMusic">
<input type="checkbox" id="edit-event-type-livemusic" name="event_type[liveMusic]" value="liveMusic" class="form-checkbox">
<label class="option" for="edit-event-type-livemusic">Live Music </label>
</div>
</div>
//Other form elements come after.
At the moment, they are getting displayed stacked one on top of another and I would like them to be displayed in stackes of, say 4. So I would like them to be displayed like this:
http://i.imgur.com/SvIQv.png
However, I have limited control over the markup so ideally I would like it all to be done in CSS. I have tried float:left and assigning them a right margin, but when I do that, although they are in stacks of 4, there is an issue where they are not aligned properly. Has anyone had an issue like this before?
Thanks,
give all container divs this class "form-type-checkbox" (also the first - its missing it). also add a container to all this.
css:
.container-of-all {
overflow: auto;
background: #000000;
}
.form-type-checkbox {
float: left;
width: 100px;
margin: 5px 10px 5px 10px;
}
maybe you need to reposition the labels or checkboxes itself a bit to get them on a pretty baseline.