I am using the ngTouch module in Angular 1.3.12, running my site on both iPad and desktop.
The problem is specific to mobile devices (iPad).
I have a checkbox input wrapped in a label so that both checkbox and label will detect a touch:
<label><input ng-click="doCheck()" type="checkbox" name="checkbox" id="checkbox1" ng-model="myModel"/>My label</label>
Using ngTouch's ng-click directive does appear much more responsive on the iPad, however in this case, I notice that even though I am able to touch quickly on the checkbox or label, the checkmark only toggles after a slight delay.
How can I make this toggle appear faster? Could this be related to the 300ms delay associated with ng-clicks?
Related
I have a basic create-react-app with Material/MUI text field and button. When I tab from the textfield to the button, it creates an animation on the button where the middle part slightly grows and shrinks. I'm trying to figure out how to get rid of that animation and just show a simple button that has focus. Toggling the options in Chrome debugger hasn't helped me track down where this animation is being created (focus, hover, etc.). In fact, anytime I change any property in the CSS panel it turns the animation off and makes it harder to track down what is causing this.
Thanks.
My team uses AngularStrap to integrate Bootstrap modals (e.g. popover, tooltip, etc.) into our Angular 1.5 app. Unfortunately, I have found it extremely difficult to reliably set focus on elements inside of these modals because of the funky way in which AngularStrap shows them. This logic lives here:
https://github.com/mgcrea/angular-strap/blob/b13098d9d658da9408930b25f79182df920718d2/src/tooltip/tooltip.js
Essentially, all AngularStrap modals start off in the hidden state:
// Set the initial positioning. Make the tooltip invisible
// so IE doesn't try to focus on it off screen.
tipElement.css({top: '-9999px', left: '-9999px', right: 'auto', display: 'block', visibility: 'hidden'});
They are then made visible in response to some internal Angular requestAnimationFrame service callback:
$$rAF(function () {
// Once the tooltip is placed and the animation starts, make the tooltip visible
if (tipElement) tipElement.css({visibility: 'visible'});
...
});
Unfortunately, this means that at the time all of the tooltip's DOM elements are constructed the tooltip is typically not yet visible and any attempts to call focus() on these elements fail. Do note that in my experience this happens intermittently (~20% of the time for me).
I tried disabling animations on the tooltip but it doesn't seem to be smart enough to skip this whole hidden/visible dance in that case. I could obviously try something super hacky (e.g. use an arbitrary timeout before attempting to set focus) but I am looking for a more reliable option.
Why not use the onShow event? It is documented a little bit wrong, but you can attach a handler that focus elements to bs-on-show. Furthermore you could make the handler generic, looking for an element with a focus-me attribute and focus that :
<div bs-popover
data-content='this input should be focused: <input type="text" focus-me>'
data-placement="bottom"
bs-on-show="setFocus"
data-html="true">
click me to show popover
</div>
<div bs-tooltip
data-title='this input should be focused: <input type="text" focus-me style="color:#000;">'
data-placement="bottom"
data-trigger="click"
bs-on-show="setFocus"
data-html="true">
click me to show tooltip
</div>
generic handler
$scope.setFocus = function(e) {
e.$element.find('[focus-me]').focus()
}
http://plnkr.co/edit/3wTinmNb5zsKnfUZQ9tT?p=preview
I implemented a pin/unpin button that updates the db in real time (using firebase with angularfire).
HTML code is the following:
<a class="button button-icon energized icon"
ng-class="{'ion-ios-star-outline': !isPinned, 'ion-ios-star': isPinned}"
ng-click="doUpdatePinForUid(user.auth.uid, !isPinned)"></a>
isPinned variable is synchronized with a value in DB.
This works perfectly in my browser but as soon as I emulate the app on iOS the change of icon from outline to plain goes through intermediate states that display it grey...
User is not pinned : star is outline and energized
I click the button, my user gets pinned : star is plain and grey (yet it should be energized to ; works in a browser not in iOS)
I have to click outside of the button (in a white space in the view) so that the button becomes energized (only on iOS)
I tried to debug it and the grey color seems to appear because of the different status the button goes through with the ng-class thing :
ion-ios-star-remove-active
ion-ios-star-add
ion-ios-star-add-active
...
For information, I tried to update the isPinned variable in my controller by surrounding it in a $timeout because I initially though it was related to the digest cycle, but no.
Any help or suggestion ?
Using angular and material design, I notice that, when you focus an input and then click outside (on nothing particular):
on desktop, the focus is removed from the input
on mobile (android), the focus stays
This is really annoying on mobile, because having an md-autocomplete that is focused, the virtual keyboard slides up and take half of the available height. And there is no way to hide it, except to click on another field or a button!
I really can't understand why the mobile shouldn't behave like the desktop. Is there no way to loose the focus when the user clicks outside or select an element?
app = angular.module('App', ['ngMaterial'])
.config(function( $mdGestureProvider ) {
$mdGestureProvider.skipClickHijack();
});
I know this is already years old question, but in case anyone is the same problem. The $mdGestureProvider.skipClickHijack() worked for me.
We've been designing a site for a while and while the responsiveness isn't amazing, since we had to settle for buying a WP-theme instead of designing the whole thing ourselfs, it works good on most devices. Any bugs/errors that we've found in the theme I've fixed, but this one has me stumped.
When using a basic dropdown menu on a Galaxy device using the standard Internet browser we're getting a bug. When you touch it (i.e click) it quickly flashes and then either scrolls to the top or just jumps slightly up.
The menu is used for navigating with anchors to scroll further down the page. The first option has no value and does not get called in the used javascript.
This is the HTML-markup from one of the pages, but it's the same on all items:
<span class="wpcf7-form-control-wrap forkunskaper-714">
<select name="forkunskaper-714" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" aria-required="true" aria-invalid="false">
<option value="Nybörjare">Nybörjare</option>
<option value="Medel">Medel</option>
<option value="Bra">Bra</option>
<option value="Avancerad">Avancerad</option>
</select>
</span>
Things I've checked with negative results:
Does the scripts run immediately, thinking that the first null option is viable.
Does the scrolling anchor-script interfere with the script for the select-menu.
The last thing I can think of is some of the old scrollTo-code from the Theme interfering in some way, but since this is working on all other browsers it shouldn't be that.
Any tips about weird Galaxy-browser-specific bugs that could be helpful to my problem?
Thanks for any input!
It turns out that the problem had to do with the way the stock Samsung browsers shoots up the drop down menu. It actually resizes the window and that in turn triggered a function I had manipulating the menu you have already opened, and that caused the error in question.
So, the drop down menu (<select>) will in the stock Samsung browser trigger resize() in jQuery.