Bootstrap3 and Angular are supposed to play nicely together.... and with Bootstrap being "mobile first" I never thought I'd run into this, but I have.
I have a modal window being popped up from a button (via a standard modalService), which works just fine across the desktop browsers I've tested with (IE 10, 11, Edge, Chrome, Opera, Safari, and Firefox) but fails on mobile. Every mobile I have access to (IOS Chrome, IOS Safari, Android Internet Browser, and Android Chrome).
It also displays the same failure on Chrome emulation of mobile browsers.
In all cases on mobile, the radio buttons and checkbox fail to recognize a tap/click event.. unless I hold for a long long time (much longer than the 300ms I've seen mentioned in articles). In a couple mobile browsers that do capture it - the Angular actions which result from the change are not being executed on the mobile clients (but are on the desktops)
<input type="radio" class="form-control" ng-Model="modalOptions.rScope.selectedItem" name="purchase" ng-value="selectedItem=item" ngClick="modalOptions.rScope.selectedItem=item">
ngTouch is being added to the page to facilitate the faster ngClick event.
I have stripped out all the relevant code and created a plunk showing this : http://plnkr.co/edit/iZV6JRnHHHRwAKO2JJ06
Is this a function of how the radio buttons were defined? And if so, why is the checkbox displaying the same behaviour (I know it doesnt currently have an ngClick on it - but the behaviour is the same):
<input type="checkbox" class="form-control" width="20px" ng-model="modalOptions.rScope.xgiftfor" />
I get no errors indicating the ngTouch module is not being loaded...
The one thing that bothers me... the page for ngClick states:
A more powerful replacement for the default ngClick designed to be used on
touchscreen devices. Most mobile browsers wait about 300ms after a tap-and-
release before sending the click event. This version handles them immediately,
and then prevents the following click event from propagating.
Is ngTouch preventing Angular from continuing to propagate updates on the form? That click event will have other consequences as the modalOption.rScope.selectedItem update occurs.
OR am I stretching to find a reason for this behaviour?
[EDIT]
I have updated the plunk to display the same data set (code slightly modified due to scope) on the main page, and the behaviour on the modal is NOT present on the main page. Run it in your fav desktop browser and it's good on the main page - but open the modal, and it just doesn't work.
http://embed.plnkr.co/WnxArMU9VUVjDwnvueV1
Does anyone have any clue what the modal introducing that is interfering with the processing (and how to work around it)?
I was running into the exact problem. Unfortunately, I only discovered that the ngClick directive is now deprecated with no workaround.
DEPRECATION NOTICE: Beginning with Angular 1.5, this directive is deprecated and by default disabled. The directive will receive no further support and might be removed from future releases. If you need the directive, you can enable it with the $touchProvider#ngClickOverrideEnabled function. We also recommend that you migrate to FastClick. To learn more about the 300ms delay, this Telerik article gives a good overview.
Related
I have a Material-UI <Dialog> element that has worked perfectly for a long time, including in Chrome using device emulation. Recently I noticed that for some reason, when using device emulation in Chrome, the dialog opens, and then immediately closes. The same thing is happening with my <Drawer> element. Looking at the call stack, I can see a topClick event is triggering dispatchEvent and is closing the elements -- even though I've clicked nothing except the UI element that opens the Dialog or Drawer.
When I am not using device emulation, everything runs as expected.
The same anomaly is seen when I access the web app from my iPhone. I have updated to the latest versions of all my React plugins, including react-tap-event-plugin, but the anomaly is still here.
What could be causing this?
Thanks very much in advance to all for any info!
Material-UI has dropped its dependency on react-tap-event-plugin. It now uses onClick instead of onTouchTap.
After inspecting an element, I see this very often-
I then have to switch over to AngularJS tab in Google Chrome and then click the checkbox Enable as seen clearly in the attached image. I don't know why it keeps on switching off after sometime.
It does have a material impact atleast on the application I am working. The moment I switch over to AngularJS tab (so as to enable the very same checkbox aforementioned), the whole application gets refreshed (Ctrl+F5) automatically gets invoked.
It's a disaster for me as the application which I am developing has around 5 to 6 steps. And I do have to cry when I have to inspect an element on step6 and when sometimes there is: $scope is not defined. All the values gets lost since after automatical refresh, the application swill get navigated to step-1.
This happens with the browsers for all the fellow associates in the team. This just makes us nervous.
Kindly suggest.
I'm using angular-materialize for a demo project and so far it's been pretty easy to use. However, when doing a browser compatibility test pass I found that the datepicker component doesn't work when using IE and Edge browsers. On IE it scrolls the page down when the overlay appears and it doesn't even work on Edge browser. You can see the bugs on the angular-materialize demo page Open this link in IE or Edge.
Please refrain from answering this with a question like "Why not use Angular-Material". Although the UI is similar, there are some parts of materializecss that I prefer over Google's Angular-Material. So far, this is the only issue I've found.
I have an Angular web app which have to be responsive. To do that i use Bootstrap and its responsive grid system.
In every page I have to interact with users to set app, or simply change page. For that, I use ng-click and ng-href directives.
I have tested it many times, it works great except when my device screen width is close to phone portrait's width. I noticed this issue when i use chrome dev tools phone emulator and check on my phone a Wiko.
Have you any clue about this problem ? it's kinda weird, isn't it ?
EDIT : I added ngTouch to my app, but no change.
I discovered that my ngclick item was behind div with no ng-click directive when on small screen device.
Just fixed it by revising my responsive.
I have set up the following in my angular app
I have an image with the following ng-mouseover and ng-mouseleave events tied to the image tag
<img ng-mouseover="infoIconStyle={'height':'50px','padding':'10px'}" ng-mouseleave="infoIconStyle={'height':'0','padding':'0'}" src="images/info-icon.svg" />
These mouse over events are then sent to the following div
<div class="dataBoxInfoContent" ng-style="infoIconStyle">{{description}}</div>
Therefore when ng-mouseover is triggered the dataBoxInfoContent div opens due to the height going from 0 to 50px and when ng-mouseleave is triggered the div closes again.
However for some reason ng-mouseleave is not trigged when the mouse leaves the image and this is only in Google Chrome. All works fine in internet explorer and mozilla firefox.
Anyone know why this is the case?
I had a similar problem with Chrome and eventually tracked the issue down to a specific Chrome Extension (for me, it was the AngularJS Batarang extension).
If you have any javascript-profiling extensions, the slowness that those add to your page can sometimes cause unusual behavior in events (in particular, the mouse-movement events).
In the "Profiles" tab of the Chrome debugger, use the "Collect JavaScript CPU Profile" to find out which scripts, if any, are hogs, and then if you hover over the script on the right, it will tell you which chrome extension the hog is a part of.