I'm using standard Bootstrap 3 classes to style a modal. I'm having some issues with the alignment of a checkbox, and can't for the life of me figure out how to fix it.
Here's what it looks like when it's full-width:
The checkbox is not quite aligned center-vertical with the text, and it would be nice to fix, but that's not my main issue.
Here's what it looks like at a narrower view:
At first I thought it was something in my code, like a style that was overriding Bootstrap, but I've copied my html into a bootply using nothing but standard bootstrap classes, and it behaves the same way.
My css is nothing to write home about; can anyone help me?
You have to change some classes. In the form you have the class form-inline. You must get rid of that class because all the elements get inline inside.
In the input the class .form-control are set to width: 100%; by default, So you must clean that class.
HTML
<div aria-hidden="false" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="trialModal" class="modal fade in" style="display: block;">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
<h4 class="modal-title">Free Trial!</h4>
</div>
<div class="modal-body">
<p style="display:none" id="confirm_message">Thanks for your interest in OurProduct.</p>
<p style="display:none" id="error_message"></p>
<form class="">
<div class="form-group">
<label for="mail">Email</label><br><input placeholder="jane.doe#example.com" id="mail" class="form-control" type="email"></div>
<div class="form-group">
<input class="" id="agree_terms" value="1" type="checkbox">I confirm that I am over 13 years of age and agree to the <a id="modal_privacy_link">Terms and Conditions and Privacy Policy</a>.
</div>
</form>
<div class="modal_privacy">
<h2>Terms and Conditions and Privacy Policy</h2>
<p>We may send you information about our products and services and may contact you about new features or products in which we believe you may be interested. We also may use your contact information for marketing and other purposes. Although we do not currently rent, sell, or otherwise share your information with third parties for purposes unrelated to our products and services, we may do so in the future. If you do not want your information to be shared, you should contact us at support#ourproduct.com. The supply of our products and services will not be conditional upon you consenting to the collection, use, or disclosure of personally identifiable information beyond that required to provide our products, services, or other related purposes.</p>
</div>
</div>
<!-- create new form in block here. just email. call new module to send email and create user--><div class="modal-footer">
<button id="email_link" class="btn btn-default" type="button">Email me a link</button><br><button id="download_trial_64" class="btn btn-default" type="button">Download 64-bit trial</button><br><button id="download_trial_32" class="btn btn-default" type="button">Download 32-bit trial</button><br><button id="working_link" class="btn btn-default" type="button" style="display: none"><span class="glyphicon glyphicon-refresh spinning"></span> Processing...</button>
</div>
</div>
<!-- /.modal-content --></div>
<!-- /.modal-dialog --></div>
DEMO HERE
As a good UX practice and HTML syntax, you should put your message between <label> tags to actually check the box when you click on the message.
<div class="form-group">
<input class="" id="agree_terms" value="1" type="checkbox">
<label for="agree_terms">I confirm that I am over 13 years of age and agree to the <a id="modal_privacy_link">Terms and Conditions and Privacy Policy</a>.</label>
</div>
Related
I have a problem that I can not solve for months! I'm using a package of bootStrap and JS styles, in which I referenced them in my _Layout. On all the pages that are rendered and inherit from the Main page, everything works without problems. Just open the windows in modal, that the problems started to appear ... Note that the DropDown located in the page Index is stylized correctly, but the same dropdown in the Create view does not work.
<div class="modal fade modal-primary" id="modalGenerica" role="dialog" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" aria-hidden="true" data-dismiss="modal">x</button>
<h4 class="modal-title" id="myModalLabel">Customer</h4>
</div>
<div class="modal-body">
<div id="modal-content">
Carregando...
</div>
</div>
</div>
</div>
</div>
For my modals to work, my controller returns a View "Create", but when it is loaded in modal (Set in Index), I need to play null for the Layout property, else the window does not open. (This could be a problem). I've tried opening Modals using PartialViews, but it also does not work ...
I'll leave the link to anyone who wants to take a look at the project:
https://onedrive.live.com/?id=40838E65B9F8787E%21120&cid=40838E65B9F8787E
Let's say I have HTML like this:
...
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="invalidCheck">
<label class="form-check-label" for="invalidCheck">
Agree to something
</label>
</div>
<div class="invalid-feedback">
I am outside of `form-check`!
</div>
</div>
...
I want to force to show the <div class="invalid-feedback">... without using JavaScript (want to use Bootstrap CSS only). And I know I can use CSS classes like was-validated or is-invalid, but invalid-feedback is outside of form-check. Is there an easy and simple way to show invalid-feedback by adding Bootstrap related CSS classes?
I found one solution:
<div class="invalid-feedback d-block">
Now I am visible!
</div>
But I feel like it's a hacky solution. Please advise!
Use display classes to display it manually for example d-block
use it like so
<div class="valid-feedback d-block">
or
<div class="invalid-feedback d-block">
Find more in documentation
There are better ways.
1)
Look into a was-validated class, that you can set on the form like so
<form action="..." class="was-validated" method="POST" novalidate>
When set on the form it displays validation feedback and also colorcodes the input field.
Just add it conditionally on your form, when validation failed on the server side.
2)
Or you can use some JavaScript to be in control of what is displayed. You can add this class dynamically
$('form').addClass('was-validated');
and you can also dynamically check if the form is valid like so
if ($('form').checkValidity()) {...
I'm using a template based on Bootstrap 3 and there is a weird display issue with Firefox for file input elements: basically the click area covers a huge part of the page, which means that anything around them cannot be clicked without triggering a file upload.
Here is what I mean by large area (with Firebug, based on the <input type="file"> element):
While with Chrome it's fine:
And with IE it's also fine.
Here is the link to the theme page where you see the issue (only happening to the first type of "advanced file input", where the input element itself is displayed): http://www.keenthemes.com/preview/metronic_admin/components_form_tools.html
And here is the code for the file display:
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="input-group input-large">
<div class="form-control uneditable-input span3" data-trigger="fileinput">
<i class="fa fa-file fileinput-exists"></i>
<span class="fileinput-filename"></span>
</div>
<span class="input-group-addon btn default btn-file">
<span class="fileinput-new">Select file</span>
<span class="fileinput-exists">Change</span>
<input type="file" name="documents-0">
</span>
Remove
</div>
</div>
Any idea how I can force the input element click zone to stay within its limits on Firefox?
Thanks in advance!
How do I make a VoiceOver on Mac read the aria-label (or another aria- attributes) with no conflict with tabindex?
I am trying to provide some accessibility stuff to a search result page with the structure like this
<div class="header">
<input value="" name="search" type="search"/>
</div>
<div class="main">
<div class="adv-block">
Link to adv 1
Link to adv 2
</div>
<div class="search-result">
Search result 1
Search result 2
</div>
</div>
First, I want a user with tab navigation skip advertisments, so I provide tabindex for and input and then for the search results, like this.
<div class="header">
<input value="" name="search" tabindex="1" type="search"/>
</div>
<div class="main">
<div class="adv-block">
Link to adv 1
Link to adv 2
</div>
<div class="search-result">
Search result 1
Search result 2
</div>
</div>
But then I would like to help screen reading programme (in my case a VoiceOver on Mac) to read the zones correctly. So, I mark the search results contaiter with its role and description.
<div class="header">
<input value="" name="search" tabindex="1" type="search"/>
</div>
<div class="main" role="main" aria-label="Search results">
<div class="adv-block">
Link to adv 1
Link to adv 2
</div>
<div class="search-result">
Search result 1
Search result 2
</div>
</div>
The problem is that VoiceOver also navigates according to tabindex and it goes from the input directly to the first link.
I tried to cheat with adding a tablindex attribute to the container
<div class="header">
<input value="" name="search" tabindex="1" type="search"/>
</div>
<div class="main" role="main" aria-label="Search results" tabindex="2">
<div class="adv-block">
Link to adv 1
Link to adv 2
</div>
<div class="search-result">
Search result 1
Search result 2
</div>
</div>
But this cases changes for a usual tab navigation.
So, is there a way to make VoiceOver read that a user proceeded to a search result zone?
Please be very careful when trying to force a particular navigation style, as tabbing is not the only (or even primary) method of navigating with a screen reader.
Most of the time a screen reader user would use 'browse' navigation to read the content. On VoiceOver this is cntl-alt-right arrow, in Jaws/NVDA it is just down-arrow.
Browse mode will go through all content, not just form controls and links. Browse mode is not affected by tabindex.
The problem with tabindex is that it over-rides the default (code) order, which can be very confusing when it doesn't match the browse order. This is more obvious when there are other things in the page, and then you skip chunks of content and go to the lowest tabindex.
I would recommend something like:
<header role="banner">
<div class="header" role="search">
<label for="search" class="hidden">Search</label>
<input value="" name="search" type="search" id="search">
</div>
</header>
<div class="adv-block">
Link to adv 1
Link to adv 2
</div>
<main role="main" id="main" aria-labelledby="results">
<h1 id="results" class="hidden">Search results</h1>
<div class="search-result">
Search result 1
Search result 2
</div>
</main>
NB: I am assuming there will be other stuff to go into the header, otherwise it wouldn't be worth using the header with banner role.
Typical ways that people using screen readers get to the 'content' are:
Arrow down through everything, time consuming but reliable.
Skip by heading (cntl-alt-cmd-h in VoiceOver), and the main heading 1 is a good indicator of the primary content of the page.
Open the landmarks dialogue (cntl-alt-u and then left/right to find it in VO) and go to the 'main' landmark.
Tabbing through links, and consistency trumps efficiency here.
Overall I would recommend against trying to manipulate the tab-order, and make sure you provide good headings, landmarks, and maybe a skip-link if you really need to provide a short-cut. This applies to Windows based screen readers as well.
The current w3 accessibility standard says to try to avoid using positive tabindex values. It is best practice to layout your dom so that you can simply use tabindex=0 for everything that should be tabbable to.
This is a very strange issue. On the Reveal Form (onclick of "Price and Save My Shopping List"), I thought that for some reason the text box and dropdown were disabled. This is not the case; however, it's only allowing me to click on them on the far right of the control--I had to increase the dropdown to "medium" from "small" to be able to interact with it at all. I have no idea why this is happening and couldn't even think of what to Google. So I've looked at everything related to Foundation Reveal to no avail.
Here is the jsfiddle, but although it works on my site, it does NOT on jsfiddle. If you want to see it in action, I'll send you a link to my site.: http://jsfiddle.net/jenborn/TQjm9/
Here is the modal form since apparently I have to include code if I link to a jsfiddle:
<form id="saveShoppingList" action="" method="POST" class="custom">
<div class="small-12 columns">
<div class="small-6 small-centered columns"><h4>Your Shopping List</h4></div>
<div id="makemebold" class="large-4 columns"><!--label for="name"-->Name it: <!--/label--></div>
<div class="small-8 columns"><input type="text" id="name" name="name" /></div>
<div id="makemebold" class="small-4 columns"><!--label for="style"-->Style: <!--/label--></div>
<div class="small-8 columns"><select id="beer_style" class="medium"><? echo $style_opt ?></select></div>
<div id="makemebold" class="large-4 columns">Keep Private:</div>
<div class="small-3 left columns"><div class="switch tiny round"><input id="private" name="private" type="radio"><label for="private" onclick="Off">On</label><span></span></div></div>
</div>
<div class="row">
<div class="small-6 large-centered columns">
<button type="submit" class="button radius">Go</button>
<button type="reset" class="button radius alert">Reset</button>
</div>
</form>
You have some major issues in your use of Foundation's grid. You have subsequent columns adding up to well over twelve, and columns nested within other columns without an interposing row. If you go through the Foundation Docs' grid section and rewrite your code accordingly, I'm betting your issue will be resolved. Pay special attention to the section titled "Infinitely nest your grid".
I would also suggest basic improvements like using a label element for your form labels, as browsers will know how to use them better. And for semantics, of course.