I'm busy with a Core 2 MVC application, and where IsAdmin is a bool, the following Razor markup:
<div class="form-group">
<label asp-for="IsAdmin" style="display: inline-block;"></label>
<input asp-for="IsAdmin" class="form-control" />
<span asp-validation-for="IsAdmin" class="text-danger"></span>
</div>
it renders as in the below image, regardless of screen, and form-group, width:
My only custom CSS is all for elements selected by id, and has nothing to do with forms layout. I've even tried making the label display: inline-block to no avail. What is wrong here?
How do I achieve the checkbox inline with the label?
Your problem is a result of not actually adding the HTML, CSS classes, etc. that Bootstrap requires for checkboxes. You haven't specified which version of Bootstrap you're using (or even that you are using Bootstrap, before I retagged your question), so here's the two different options:
Bootstrap 4
<div class="form-check">
<input class="form-check-input" asp-for="IsAdmin" />
<label class="form-check-label" asp-for="IsAdmin"></label>
</div>
Bootstrap 3
<div class="checkbox">
<label>
<input type="checkbox" asp-for="IsAdmin" />
#Html.DisplayNameFor(x => x.IsAdmin)
</label>
</div>
Related
I have some custom radio buttons. The final option should be a radio button with an input field.
As you can see, in de Codepen example, the radio button does not align vertically center with the input field.
I have tried everything from calculating top, to display flex.
Codepen: https://codepen.io/monsmado/pen/RwarYEG
<form>
<label>Do you have an elevator?</label>
<div class="custom-control custom-radio">
<input type="radio" id="elevatorYes" name="elevator" class="custom-control-input">
<label class="custom-control-label" for="elevatorYes">Yes</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="elevatorNo" name="elevator" class="custom-control-input">
<label class="custom-control-label" for="elevatorNo">No</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="elevatorOther" name="elevator" class="custom-control-input">
<label class="custom-control-label" for="elevatorOther">
<input type="text" class="form-control" name="elevator" placeholder="Other">
</label>
</div>
</form>
Add this CSS in this case
.form-group:nth-child(4) .custom-control-label:after, .form-group:nth-child(4) .custom- control-label:before{
margin-top: 0.5em
}
I send you the solution in you codepen
https://codepen.io/r0binxp/pen/qBZbJaZ
Well, a quick fix for your situation could be overriding the current top value of the custom radio button and set it to 25% (Since the actual height of it is 50% of your input so the 25% will fit it exactly in middle). Also, note that display flex on the parent element won't work as expected because the customized radio exits within the ::before pseudo-element so it won't get the flex attribute.
.custom-control-label[for=monthsOther]::before,
.custom-control-label[for=monthsOther]::after {
top: 25%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<form>
<label>How many months?</label>
<div class="custom-control custom-radio">
<input type="radio" id="monthsYes" name="months" class="custom-control-input">
<label class="custom-control-label" for="monthsYes">1-2</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="monthsNo" name="months" class="custom-control-input">
<label class="custom-control-label" for="monthsNo">3-5</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="monthsOther" name="months" class="custom-control-input">
<label class="custom-control-label" for="monthsOther">
<input type="text" class="form-control" name="months" placeholder="Other">
</label>
</div>
</form>
NOTE: Keep in mind since the radio button itself and its background on check action is defined in ::before and ::after pseudo-elements you need to override both of them.
This seems like a really hacky way to change the appearance of form elements. The original question is missing any CSS code (which is where all the problems arise) but the linked codepen does show the root causes. It will be very difficult to properly align elements that are absolutely positioned, especially when you start taking left-to-right or larger font sizes into account. Additionally, creating the visual representation of a radio button using a ::before on inside the label is a recipe for frustration and ultimately a bad solution.
The proper solution is probably using vertical-align: middle or vertical-align: baseline on both the radio and the label. but those will have no effect while the elements are absolutely positioned.
TLDR: see last example, it doesn't validate. Halp.
I'm using Bootstrap 3 to layout a form, in 2 columns like this:
<div class="form-group row">
<div class="col-sm-3">
<label for="c_title">Survey title</label>
</div>
<div class="col-sm-9">
<input name="c_title" id="c_title" >
</div>
</div>
So far so good. This looks right, and also validates.
Then, later in the form I have row which is a collection of options...
<div class="form-group row">
<div class="col-sm-3">Survey options</div>
<div class="col-sm-6">
<label><input type="checkbox" name="opt1" >option #1</label>
<label><input type="checkbox" name="opt2" >option #2</label>
<label><input type="checkbox" name="opt3" >option #3</label>
</div>
</div>
I think I really should use <fieldset> and <legend> there, to be nice...
<fieldset class="form-group row">
<legend class="col-sm-3">Survey options</legend>
<div class="col-sm-9">
<label><input type="checkbox" name="opt1" >option #1</label>
<label><input type="checkbox" name="opt2" >option #2</label>
<label><input type="checkbox" name="opt3" >option #3</label>
</div>
</fieldset>
With a bit of CSS to make it look sensible this also looks right and validates.
However I also want to drop an extra element or two into the left hand column. These might be a little popup text bubble, or some extra text noting constraints (e.g. "(max 200 chars)").
I don't think those bits belong inside the <legend> as such, and my understanding is that the whole <legend> gets read out for each form-control within the fieldset .. so that would be quite tedious to a11y users. (BTW, I'll probably link the legend to the span text via aria-describedby).
So I code it like this:
<fieldset class="form-group row">
<div class="col-sm-3">
<legend>Survey options</legend>
<span class="muted">(see HR manual page 321)</span>
<button type="button" id="beta2"></button>
</div>
<div class="col-sm-9">
<label><input type="checkbox" name="opt1" >option #1</label>
<label><input type="checkbox" name="opt2" >option #2</label>
<label><input type="checkbox" name="opt3" >option #3</label>
</div>
</fieldset>
This still looks right in the browser, however it does not validate. Apparently, the <legend> must be the first and immediate child of <fieldset>.
Any suggestions on how I might handle this? Is the html5 spec overly fussy on this point?
This might just work...
<fieldset class="form-group row">
<legend class="sr-only">Survey options</legend>
<div class="col-sm-3">
<div aria-hidden="true" role="presentation" class="fake-legend">
Survey options
</div>
<span class="muted">(see HR manual page 321)</span>
<button type="button" id="beta2">?</button>
</div>
<div class="col-sm-9">
<label><input type="checkbox" name="opt1">option #1</label>
<label><input type="checkbox" name="opt2">option #2</label>
<label><input type="checkbox" name="opt3">option #3</label>
</div>
</fieldset>
Here, the <legend> is now the first immediate child element of the fieldset (so it validates), but is then prevented from being visible on screen with Bootstrap's class="sr-only" (so is still available as an actual <legend> semantic element for screen readers).
Then, the text of the legend is repeated within the first column div, formatted to appear as if it were a legend (.fake-legend), and then removed for screen readers via aria-hidden="true" role="presentation".
aria-hidden is defined as
aria-hidden: Indicates that the element and all of its descendants are not visible or perceivable (i.e.presentable to users in ways they can sense) to any user as implemented by the author. (See related aria-disabled).
Authors MAY, with caution, use aria-hidden to hide visibly rendered content from assistive technologies only if the act of hiding this content is intended to improve the experience for users of assistive technologies by removing redundant or extraneous content. Authors using aria-hidden to hide visible content from screen readers MUST ensure that identical or equivalent meaning and functionality is exposed to assistive technologies.
role="presentation" is defined as
presentation (role): An element whose implicit native role semantics will not be mapped to the accessibility API.
The intended use is when an element is used to change the look of the page but does not have all the functional, interactive, or structural relevance implied by the element type, or may be used to provide for an accessible fallback in older browsers that do not support WAI-ARIA.
I use the framework Boostrap and I would like to control the radio buttons alignement.
All the examples I saw to display a responsive list of radio buttons do not manage the alignment. Either they were using labels with same size or a fixed width that keep the alignment but nothing really responsive.
I've tried to use the solution below but with
http://jsfiddle.net/rm7n73ep/`
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
Radio button's label 2
Does somebody know how to combine the property for the responsive behavior and for a correct alignment of labels and radio button?
Thanks a lot for your answer!
Add the following class
label{
display: block;
}
Check if this helps :
<div class="form-group">
<label class="col-md-5"> Your label </label>
<div class="col-md-7">
<div class="col-md-6">
<input type="radio" name="name1" value="0" checked/>
<label for="name1">Input 1</label>
<input type="radio" name="name2" value="1" />
<label for="name2">Input2</label>
</div>
</div>
</div>
How do you separate a <label> from its <input> in separate <div>s but still have them linked?
I have an input and a label, and they are in the same div, and the functionality works. If I move the input to a sibling div (sibling in the context of bootstrap), the toggle functionality doesn't work:
<div ng-repeat="uniqJokeType in uniqJokeTypes">
<div class="row">
<div class="col-md-7 col-md-offset-1">
<div class="type-filter-button" ng-class="jokeCssClasses(uniqJokeType)" ng-click="jokeTypeClick(uniqJokeType)">
<label ng-bind="uniqJokeType"></label>
<input type="checkbox" ng-model="uniqJokeType" class="js-switch" ui-switch checked />
</div>
</div>
<div class="col-md-3">
<!-- I want to move the <input> here, but it does not work when placed here -->
</div>
</div>
</div>
Also, is this more of an HTML context issue, or an angular (maybe scoping?) issue?
Just add a for attribute on the label and an id on your input :
<label ng-bind="uniqJokeType" for="myInput"></label>
<input type="checkbox" ng-model="uniqJokeType" class="js-switch" ui-switch checked id="myInput" />
I'm making a form that has a checkbox that is inline with a text input. Here's what I did to make it look nice with bootstrap:
<label class="checkbox">
<input type="checkbox" name="keywords" value="__option__">
<input type="text" name="keywords_other_option" value="" placeholder="Other">
</label>
It looks good, but it doesn't function well. In firefox, the user can't type in the textbox. Is there a good bootstrap way to put the checkbox and the text input inline with each other?
Don't put two input elements inside one label element.
And here is Twitter Bootstrap way to solve this:
<form class="form-inline">
<label class="checkbox">
<input type="checkbox" name="keywords" value="__option__">
</label>
<input type="text" name="keywords_other_option" value="" placeholder="Other">
</form>
Here is DEMO.
Look more examples from official documentation.