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.
Related
I encountered this specific issue with Material's md-dialog:
I click on any of the text boxes on the web page, which brings up
the mobile keyboard, this is on IPad 9.3.2.
after typing, I then either minimise the keyboard or leave it on
and click a button which shows a md-dialog as modal.
the modal shows up, which grays out and blocks the whole page.
but the dialog box appears outside of the screen, i.e. you cant see
it, you cant touch it, you cant close it.
now if I til the screen to change the orientation from horizontal to vertical or vise-versa, the screen resizes and the dialog is shown properly.
so as soon as i use the keyboard the immediate dialog show will be located incorrectly.
I am wondering if any one had this problem before, and if you know how to solve this issue?
Thanks a lot
I had a similar issue and resolved it by wrapping it in a timeout:
var confirm = $mdDialog.confirm()
.title('Test')
.content('This is test content')
.ariaLabel('Test')
.ok('Got it!')
.cancel('Cancel');
$timeout(
$mdDialog.show(confirm).then(function () {
// Do Something
})
, 0);
I'm working on a mapping app using ionic and leaflet. Note that I am not using the leaflet angular directive, I am using straight JS for the leaflet map (I know, I know...).
The initial state in my app loads the leaflet map just fine. If I switch to another state and back to the map everything is also fine. However, if I launch the app, switch to a different state and open a modal window in that state, then return to the original state, the map is broken and displays a number of grey tiles. The map will not update until the browser window resizes or the orientation of the mobile device is changed.
Here's a demo on Plunker: http://plnkr.co/edit/w67K2b?p=preview. To reproduce:
Click the button at the right side of the navbar which will take you to a different state.
Click the 'Back to map' button to go back to the original state. The map looks just fine.
Click the button in the navbar again.
Click the 'Open modal' button and then close the modal.
Click the 'Back to map' button and you will see that the map is now broken.
I've seen other people report issues with grey tiles, which typically can be resolved with a call to:
map.invalidateSize()
Unfortunately this does not resolve my issue. I'm pretty much a newb, but I think the problem is that when the modal opens, the invalidateSize() method in the leaflet source code is run, since the map div is not visible, the 'size' gets set to x:0, y:0 which ends up breaking the map when I transition back to the original state.
I'm not really sure where to go from here. Perhaps I can use JS to dynamically resize the div and trick leaflet into thinking a resize event has occurred? How would I do this? Any other thoughts?
Thanks!
I'm currently developing a mobile web application with AngularJS, ngAnimate, Angular-Material and UI-Router. I'm following Google Material Design specifications for the UI/UX part.
I'd like to animate a state change 'the Angular way' and especially this 'Parent to child' animation
I've no idea on how to achieve this 'lift & expand' animation.
Thanks for your help !
You have to do it yourself, I guess.
Angular-material is not a magic wand that replicates the animation guidelines of Material Design. Material Design guidelines are simply guidelines, and are loose enough to be hacked — or strictly followed, in the case of Google's Android apps (in-house or not).
My feeling is the angular material team is already pushing like maniacs to bring this awesome tool to 1.0, and will take advantage of the new routing system in Angular 2 to provide some animations like the one you wish to attain out of the box.
But it's the bleeding edge of the bleeding edge, at least for the time being.
Good news seem to be that routes will have their own viewports and sibling viewports.
AngularJS somewhat starts to embrace Polymer's web components concept.
Scroll to "Show me the magic!" on this page, and check these demos. Polymer's ecosystem provides a lot of already-made components to build your app with. It's quite large, and makes you wonder why Polymer doesn't get the same momentum as AngularJS. But I digress...
Option 1
create a custom-made function that gets triggered on a list element being clicked/tapped, to place in your controller (or directive).
Once the user clicks/taps the list element, it triggers the function (console test).
The function should :
retrieve the id of the clicked/tapped item (pass it to the function)
animate : here you have several choices, but here's one : use a ui-router absolute named view (#view_name), and wrap it in a div container with overflow:hidden, that has inital dimensions corresponding to the dimensions of a list item.
Detect the x-y position of the list element that has been clicked (an example, assuming you use AngularJS with jQuery), and you pass it to the "item detail" route (see above), so the rectangle grows with origins corresponding exactly to where the UI is a the moment of the click/tap. The animation shown in the video seems pretty complex: the "item detail page" grows slower on the bottom and faster on the top, when the bottom item is clicked.
Why an absolute named view? Because it will allow, with z-indexing, for the list to stay underneath the "item detail" view, so when the user closes/leaves it, you can roll back your animation, and the rectangle will shrink back to exactly the dimensions and position of the list item. Finally, you transition the opacity:0 and leave the route.
Option 2
Here's a rough mockup of a technique stretching/scrolling an ion-item. It would require to detect the y position of the item, and use ionicScrollDelegate to scroll to it. Also, you would freeze the main scroll so the user get "stucked", until he closes the "detail view", which then releases the scroll.
$scope.toggleStretchedMode = function(itemID) {
$scope.stretched = $scope.stretched === false ? true: false;
if(!$scope.stretched){
$('ion-item').removeClass('stretched');
$ionicScrollDelegate.freezeAllScrolls(false);
}
else
{
$location.hash(itemID);
$ionicScrollDelegate.$getByHandle('mainScroll').anchorScroll(true);
$ionicScrollDelegate.freezeAllScrolls(true);
$('#'+itemID).addClass('stretched');
};
}
A very basic JSFiddle, which needs to be refined (clicked item should scroll to the middle of the screen, then expand).
Note that the JSFiddle only blocks the mousewheel scroll. If seems to block the first swipe, but then the ng-click releases it, so as it is it's far from perfect. You should not only block the list scrolling, but the up and down swipe events.
Also it initalizes badly, only works the second time. But the concept could be something like this.
I have an off panel menu working perfectly on a site. The user can open and close it using both a navicon or sliding it with the finger.
Right now I have a very nice navicon icon that transitions from Menu Icon to X Icon when is clicked (and opens the menu) and the other way around when is clicked again and the menu closes. Buuut if the user slides the menu open or closed instead of using the navicon, the transition is not triggered, which might lead to confusions on the UX (i.e. the menu being closed, and the navicon showing an X instead of the regular 3 horizontal lines icon).
So, the navicon has right now the following code to trigger the transition:
ng-click="open = !open" ng-class="{'open-mob':open}">
I thought that a nice and easy way to fix this, would be to trigger this "open = !open" every time that the menu is open or closed, as the js from the off panel adds the class slidRight to the main section when the menu is open, and removes it when it is closed.
Being so, is there some straight way to check if the class is there using AngularJS?
Something like if class = slidRight -> "open = !open".
Thanks!!
for those (including me) who could not get their head around Angular's documentation, here is an example which worked for me:
angular.element(myElement).hasClass('my-class');
angular.element(myElement).addClass('new-class');
angular.element(myElement).removeClass('old-class');
hope this help someone ...
Angular uses jqLite's .hasClass() natively.
Read here on the angular docs for more info.
http://docs.angularjs.org/api/angular.element
https://docs.angularjs.org/api/ng/function/angular.element
I'm writing automated test cases for a mobile website, somehow the back button appears in the DOM, but is only clickable after mouseover. AndroidDriver is able to find the Element, but it's not clickable. I am not sure why, but it's working fine with the FirefoxDriver. I guess AndroidDriver can't deal with mouseover since there is no mouse ;-)
So I figured out that I use AdvancedUserInteractions, but that is not working:
underlying driver does not implement advanced user interactions yet
It works fine with the FirefoxDriver, so are there any alternative for AndroidDriver?
WebElement BackButton = driver.findElement(By.xpath("//img[contains(#class,'left menu Stuff__landscapeOnly')]"));
actions.moveToElement(Zurueck).build().perform();
//Back.click();
jsLib.callEmbeddedSelenium(driver,"triggerMouseEventAt", Zurueck,"click", "0,0");
How to deal with mouseover using AndroidDriver?
For Ruby, I used..
include Selenium::WebDriver::DriverExtensions::HasTouchScreen
#driver.touch.single_tap(element).perform