I am trying to bring in the progress bar dynamically but it doesn't work for me on IE 11.
<div class="progress-bar progress-bar-success" role="progressbar"
aria-valuemin="0" aria-valuemax="100" style="width: 0%;"
ng-style="{width: (percentageCompletionInitialQues)+'%'}"></div>
Screenshot:
Related
I have been trying to figure out how to make the progress bar display correctly for a while, but I can't seem to figure it out.
I have an integer value (<% goal.ppercent %>) that I want to set as the value of the progress of the bar. When I try to change any of the "aria-value" it doesn't change the progress bar, but when I change the style=" width: " value it changes the bar. Can somebody explain to me how to do the bootstrap progress bar correctly?
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow=
<% goal.ppercent %> aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<%= number_to_percentage(goal.ppercent, precision: 0) %>
</div>
</div>
You need to change the width of the inner .progress-bar in order to change the percentage.
ARIA just stands for Accessible Rich Internet Applications. It's just a set of attributes that make web content more accessible to people with disabilities. In fact, you don't have to have ARIA attributes in order for the process bar to work.
Since you have the percentage, just go ahead and update .process-bar's width as well.
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated"
role="progressbar"
aria-valuenow=<% goal.ppercent %> aria-valuemin="0" aria-valuemax="100"
style="width: <% goal.ppercent %>%;">
<%= number_to_percentage(goal.ppercent, precision: 0) %>
</div>
</div>
We're using Bootstrap 3 (v3.3.5) accordion and it works fine until the screen reader is enabled on the iPad (iOS v9.1). Once the screen reader is enabled, the accordions will no longer expand/collapse for accordions with shorter labels (labels that take up less than 50% of the available space). The shorter label issue is consistent as the screen is rotated between landscape and portrait. The issue can be corrected by making the labels longer than 50% of the available space or centering them. Unfortunately, centering or expanding the label is not an option on our team.
This seems to be a problem with Bootstrap 3 and not Bootstrap 2. I pointed to the bootstrap 2 accordion example here (http://getbootstrap.com/2.3.2/javascript.html#collapse) and enabled the screen reader on the iPad and it worked fine. Then, I pointed to the bootstrap 3 accordion example here (http://getbootstrap.com/javascript/#collapse) and enabled the screen reader on the iPad and it failed to expand/collapse the accordion.
Has anyone found a fix or another workaround? Perhaps, we are missing an attribute to fix the problem or something else.
Here is the code that we're using in our accordion:
<div class="row" id="A">
<div class="col-md-12 col-sm-12 col-xs-12 content">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingA">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#contentA" aria-expanded="false" aria-controls="contentA">This label is to short for any screen
<span class="sr-only sr-only-focusable" id="toggleA">show content</span>
</a>
</h4>
</div>
<div id="contentA" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingA">
<div class="panel-body">
<p>This label is to short to expand/collapse this content on any iPad screen with the screen reader enabled.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingB">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#contentB" aria-expanded="false" aria-controls="contentB">This label works on portrait/landscape screen and will expand/collapse accordion
<span class="sr-only sr-only-focusable" id="toggleB">show content</span>
</a>
</h4>
</div>
<div id="contentB" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingB">
<div class="panel-body">
<p>This label is long enough to expand/collapse this content on the iPad portrait and landscape screens with the screen reader enabled.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingC">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#contentC" aria-expanded="false" aria-controls="contentC">This label works on portrait screen not landscape
<span class="sr-only sr-only-focusable" id="toggleC">show content</span>
</a>
</h4>
</div>
<div id="contentC" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingC">
<div class="panel-body">
<p>This label is long enough to expand/collapse this content on the iPad portrait screen but not the landscape with the screen reader enabled.</p>
</div>
</div>
</div>
</div> <!-- End panel group -->
</div>
</div>
Thank you
This might be related to the following bug:
Use of anchors nested in headings causes issues in VoiceOver, promotes anti-pattern usage
anchors within headings(H4) confuse VoiceOver(VO), which:
causes VO to place the VO cursor on the H4 vs. the anchor,
doesn't read any of the aria attributes on the anchor,
breaks the standard VO-Spacebar interaction
I am using Cordova with JQuery mobile, it working fine on android, but when made build for Windows Phone 8, the JQM Toolbar(Header and footer) not getting fix, Toolbar little goes up when I am scrolling up page and when I am scrolling down the toolbar little goes down, like below screenshots
http://159.100.223.157/screens/IMG_0712.JPG
http://159.100.223.157/screens/IMG_0713.JPG
here is the code
<div role="main">
<div id="SearchRides" data-role="page" class="page innerPage">
<div class="ui-header ui-bar-a ui-header-fixed header" data-position="fixed">
<h1 aria-level="1" role="heading" class="ui-title">Search</h1>
</div>
<!--end header-->
<div class="projects ui-content content">
<form method="post" action="#">
<div class="ui-field-contain">
<label for="txtFrom" style="text-align: center">Source</label>
<input type="text" name="txtFrom" id="txtFrom" placeholder="To">
</div>
</form>
</div>
<!--end body-->
<div data-theme="a" class="footer" data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li> </li>
</ul>
</div>
<!--end footer-->
</div>
</div></div>
I am using material design flexbox layout and in a box, I have two boxes. I create on jsfiddle, to clarify what I mean:
Angular Material app
I want to set between these boxes a space
<div flex layout="row" layout-align="space-between center">
<md-toolbar flex="15">
<h2 class="md-toolbar-tools">
<span>Home</span>
</h2>
</md-toolbar>
<!--How to set space between -->
<md-toolbar>
<h2 class="md-toolbar-tools" layout-align="end center">
<span>Sign Up</span>
<span>Sign In</span>
</h2>
</md-toolbar>
</div>
For those interested in a solution using Angular Flex Layout, you can achieve this with fxLayoutGap directive.
Without fxLayoutGap
<div fxLayout="row">
<div>1. One</div> <div>2. Two</div> <div>3. Three</div> <div>4. Four</div>
</div>
With fxLayoutGap
<div fxLayout="row" fxLayoutGap="20px">
<div>1. One</div> <div>2. Two</div> <div>3. Three</div> <div>4. Four</div>
</div>
I think what you need is 'layout-margin'
https://material.angularjs.org/latest/layout/options
<div layout="row" layout-margin>
<div flex>Parent layout and this element have margins.</div>
</div>
I think you can do it much simpler:
<md-toolbar>
<div class="md-toolbar-tools">
<span>Home</span>
<span flex></span>
<div>
<span>Sign Up</span>
<span>Sign In</span>
</div>
</div>
</md-toolbar>
You can insert flexible element between HOME and SIGNUP elements and it will fill the space between them.
I'm working with Bootstrap and the carousel plugin. This is my code:
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="active item"><img src="img/tree.jpg"></img></div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
But the images are displayed too small. I want to fill it the whole carousel.
Here is an image (yes, the image is bigger than it is shown in the image):
<div id="myCarousel" class="carousel slide" style="width: 400px; margin: 0 auto">
...
</div>
The question is answered here
In bootstrap 3 add the responsive and center classes:
<img class="img-responsive center-block" src="img/....jpg" alt="First slide">
I believe this is a duplicate question.