Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix form-control-feedback position when label has sr-only class #13320

Merged
merged 3 commits into from
May 1, 2014
Merged

Fix form-control-feedback position when label has sr-only class #13320

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3777ef0
Fix form-control-feedback position when label has sr-only class
reywood Apr 11, 2014
06f6c9f
Fix indent
reywood Apr 11, 2014
458cb69
Add documentation for using optional icons with sr-only labels
reywood Apr 11, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 18 additions & 2 deletions docs/_includes/css/forms.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -511,7 +511,7 @@ <h3>With optional icons</h3>
<p>You can also add optional feedback icons with the addition of <code>.has-feedback</code> and the right icon.</p>
<div class="bs-callout bs-callout-warning">
<h4>Icons, labels, and input groups</h4>
<p>Manual positioning of feedback icons is required for inputs without a label and for <a href="../components#input-groups">input groups</a> with an add-on on the right. For inputs without labels, adjust the <code>top</code>value. For input groups, adjust the <code>right</code> value to an appropriate pixel value depending on the width of your addon.</p>
<p>Manual positioning of feedback icons is required for inputs without a label and for <a href="../components#input-groups">input groups</a> with an add-on on the right. You are strongly encouraged to provide labels for all inputs for accessibility reasons. If you wish to prevent labels from being displayed, hide them with the <code>sr-only</code> class. If you must do without labels, adjust the <code>top</code> value of the feedback icon. For input groups, adjust the <code>right</code> value to an appropriate pixel value depending on the width of your addon.</p>
</div>
<div class="bs-example">
<form role="form">
Expand Down Expand Up @@ -550,7 +550,7 @@ <h4>Icons, labels, and input groups</h4>
</div>
{% endhighlight %}

<p>Optional icons also work on horizontal and inline forms.</p>
<h4>Optional icons in horizontal and inline forms</h4>
<div class="bs-example">
<form class="form-horizontal" role="form">
<div class="form-group has-success has-feedback">
Expand Down Expand Up @@ -593,6 +593,22 @@ <h4>Icons, labels, and input groups</h4>
</form>
{% endhighlight %}

<h4>Optional icons with hidden <code>.sr-only</code> labels</h4>
<div class="bs-example">
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
<input type="text" class="form-control" id="inputSuccess5">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
</div>
{% highlight html %}
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
<input type="text" class="form-control" id="inputSuccess5">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
{% endhighlight %}


<h2 id="forms-control-sizes">Control sizing</h2>
<p>Set heights using classes like <code>.input-lg</code>, and set widths using grid column classes like <code>.col-lg-*</code>.</p>
Expand Down
6 changes: 6 additions & 0 deletions less/forms.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -322,6 +322,12 @@ input[type="checkbox"],
}


// Reposition feedback icon if label is hidden with "screenreader only" state
.has-feedback label.sr-only ~ .form-control-feedback {
top: 0;
}


// Static form control text
//
// Apply class to a `p` element to make any string of text align with labels in
Expand Down