I have a service which fetches data from the server on startup. This is working fine. The data gets populated into an array. When the array is filled, I check if the length is greater 0. If so another view gets displayed..
This is working fine on windows / android devices.
As soon as I use apple safari on my mac (with chrome its working), iPad or iPhone the view is not changing. Even with using chrome on iPad or iPhone.
Heres the template
<div class="container">
<div class="row">
<div class="col-md-12 col-xs-12" *ngIf="imageCount === 0">
<p class="text-center">sorry mate.. </p>
</div>
<div class="col-md-12 col-xs-12" *ngIf="imageCount !== 0">
<div class="center-image">
<p class="text-center">some other great code.. </p>
</div>
</div>
</div>
</div>
any suggestions would be great.
Related
My images wont stay on the same row once i put the <p> in, they both sit in there own row, not sure what im doing wrong here
<div class="container">
<div class="row">
<div class="image-fluid text-center">
<img class="bruno" src="resourcesnew/css/Img/bruno.jpg">
<p class="h6">Bruno</p>
<img class="anth" src="resourcesnew/css/Img/anth.jpg">
<p class="h6">Anthony</p>
</div>
</div>
</div>
I think whatever CSS you used in class="row" is not acting the way you expect, because that div has a single child.
I don't know what's in your css file, but the following HTML works as I expect you want:
<div class="container">
<div class="image-fluid text-center" style="display:flex">
<div>
<img class="bruno" src="resourcesnew/css/Img/bruno.jpg">
<p class="h6">Bruno</p>
</div>
<div>
<img class="anth" src="resourcesnew/css/Img/anth.jpg">
<p class="h6">Anthony</p>
</div>
</div>
</div>
Each image/text pair gets its own div, and what used to be your row div now has multiple children.
This code works perfectly in desktop on windows. but when i test it in safari ios the third col always collapse and jump to a new line.
here is the code:
<div class="container">
<div class="row">
<div class="col-4">
First, but unordered
</div>
<div class="col-4 order-sm-4">
Second in sm+, last in mobile
</div>
<div class="col-4 order-3">
Last in sm+, Second in mobile
</div>
</div>
</div>
Anybody else experienced it? is it a bug?
Thanks
I think you wrote the order classes wrong. Bootstrap is mobile first so col-sm for example is sm and up (to lg).
This is probably what you want:
<div class="container">
<div class="row">
<div class="col-4">
First, but unordered
</div>
<div class="col-4 order-3 order-sm-1">
Second in sm+, last in mobile
</div>
<div class="col-4 order-2">
Last in sm+, Second in mobile
</div>
</div>
</div>
Tell me if there's any issue with this code!
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 installed Bootstrap for my Rails and decided to test out making a grid. This is my code.
<div class="row">
<div class="span4">
<h1>About the Creator</h1>
<p>
</p>
</div>
<div class="span8">
<h1>About the Site</h1>
<p>
</p>
</div>
</div>
This is what it looks like. As you can see, it's in 2 rows, however it should be in 2 columns. There doesn't seem to be anything wrong with the code itself as far as I can see. I don't think I made a mistake during installation, because when I installed bootstrap, it automatically stylized my webapp. Any help?
What version of bootstrap are you using? In recent versions of bootstrap the syntax is <tag class="col-xs-4"> rather than <tag class="span4">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-4">
<h1>About the Creator</h1>
<p>
</p>
</div>
<div class="col-xs-8">
<h1>About the Site</h1>
<p>
</p>
</div>
</div>
There are 4 classes you can use in order to specify column size:
col-xs-#
col-sm-#
col-md-#
col-lg-#
They were introduced so that you could have columns have different portions of the screen on different platforms. For example, perhaps you want your main content to take up 12 columns, instead of 10, on a mobile phone. TO do this do:
<div class="row">
<div class="col-xs-12 col-md-10">
Content
</div>
</div>
I'm trying to get bootstrap-modal.js to work in Rails but can't figure it out. At this point, I'm just trying to get the event to fire when I click the button as in this fiddle
http://jsfiddle.net/mjmitche/xt4aQ/16/
using the exact same code in Rails nothing's happening when I click.
I have this html set up in a view
<h3>Demo</h3>
<!-- sample modal content -->
<div id="modal-from-dom" class="modal hide fade">
<div class="modal-header">
×
<h3>Modal Heading</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
Primary
Secondary
</div>
</div>
<button data-controls-modal="modal-from-dom" data-backdrop="true" data-keyboard="true" class="btn danger">Launch Modal</button>
And bootstrap-modal.js copied into the javascripts folder in the assets pipeline
In Rails,
But nothing's happening when I click launch in my rails application
= javascript_include_tag "application"
wasn't in the application layout so bootstrap-modal.js also wasn't included. problem now solved.