UI-Bootstrap - Popover/Tooltip for mobile display - angularjs

I have a problem with Bootstrap-UI Tooltip/Popover-directive in mobile displays.
If the User clicks a button with a Tooltip, this Popover is shown correctly. But unfortunately this popup will not close if the user clicks somewhere else.
Does everyone had the same problem and found a solution for this?
I use the latest version (0.12.1).

Add onclick="void(0)" behavior to some of your background elements which when tapped will get rid of the popovers.
credits: https://github.com/angular-ui/bootstrap/issues/2123

The default triggerMap for the tooltip looks like so:
var triggerMap = {
'mouseenter': 'mouseleave',
'click': 'click',
'focus': 'blur'
};
The mouseenter show trigger has a dismiss trigger of mouseleave. You can try creating your own trigger and adding a blur dismiss trigger like so:
'mouseenter': 'mouseleave blur'

I've had the most success using CSS to allow iOS to detect the "body" (and any nested element that would bubble down) as a clickable element and therefor trigger a "click" event, like you'd expect on a desktop device.
This media query will target touch devices, and not cause a cursor style change on desktop devices. It solves for both Tooltips and Popovers, including tooltips that use mouseenter or outsideClick.
#media (hover: none), (pointer: coarse) {
body {
cursor: pointer;
}
}
I wasn't having issues in Android on Chrome, but the above will fix it for Mobile iOS on Safari or Chrome.

Related

uibModal disable backdrop completely and allow background clicking

I have a modal window that is draggable. I want to disable the backdrop completely. I know that the uibModal has a backdrop property that I can set true/false or static - but that is not enough for me, I want the html content from the background still be clickable for example Google Sheet Help modal window - you can open it, drag it and still work in the background.
How can I disable the backdrop completely and make the content from the background clickable with the modal open? Is this possible with the uibModal or should I just create a modal window in plain javascript/iframe?
I can make the background clickable with this CSS:
.modal {
pointer-events: none;}
.modal-backdrop {
display: none;}
The problem with this is that it kills the draggable functionality because you can no longer click on the modal(only background is clickable).
I resolved my problem with jQuery UI
$(document).ready(function(){
$("#div-name").draggable({ containment: "body", scroll: false, handle:'#header' });
})
As you guys can see I set my ID for the div that I want to be draggable and I also set a containment for the body of the page so people can't move my div out of the view(body) and turned off scrolling. After that I set a handle - this is where you set the draggable part of your div(if you want the whole div to be draggable just remove the handle option) - I set the #header as my handle(top menu bar) - this way people can click inside the draggable div without accidentally moving it. If you want this to work for you, all you need is jQuery and jQueryUI.
This works like a charm and I am very happy!
In addition to CSS mentioned in the question, add pointer-events: all; to modal's content container. Worked for my uibModal.

md-swipe-left and md-swipe-right is doing same functionality (moving only left) on md-tabs in angularjs

enter image description hereangular material's md-tabs swiping functionality is not working properly i.e in two ways .It is working fine for left but when i swipe to right , left functionality is firing.
Here. I open site with mobile mode. so the swiping is working well with arrow button click event. but when i swipe on the tabs for left swipe it is working but for right swipe also it is doing same functionality as left swipe
The issue is caused due to 'pointerevents' API. The 'pointercancel' event is fired when a browser defaults to handling touch events as pan,zoom,etc by itself. The way angular-material handles its touches, a 'pointerdown-pointercancel' event is treated as 'pointerdown-pointerup'. So scrolling down or swiping in any-direction will trigger a 'pointerdown-pointerup' immediately, causing the framework to detect it as a left-swipe.
Solution 1
Apply the css rule:
md-tabs-content-wrapper, [md-swipe-left], [md-swipe-right] { touch-action: pan-y; }
This will correctly detect the swipe direction.
But you will face another problem. Scrolling up/down will cause the tabs to change !!
Solution 2
Do not listen to pointerevents. Mouse and touch events will suffice on desktops and mobiles.
You will have to make changes in angular material code.
If using the angular-material.js file,
Change the following:
// Listen to all events to cover all platforms.
var START_EVENTS = 'mousedown touchstart pointerdown';
var MOVE_EVENTS = 'mousemove touchmove pointermove';
var END_EVENTS = 'mouseup mouseleave touchend touchcancel pointerup pointercancel';
To:
// Listen to all events to cover majority of platforms.
var START_EVENTS = 'mousedown touchstar';
var MOVE_EVENTS = 'mousemove touchmoev';
var END_EVENTS = 'mouseup mouseleave touchend touchcancel';
The issue is recognized and still open.
Here's the discussion:
https://github.com/angular/material/issues/10145
Expansion of Devesh Sati's answer:
if you're using angular-material.min.js,
replace
var v="mousedown touchstart pointerdown",E="mousemove touchmove pointermove",$="mouseup mouseleave touchend touchcancel pointerup pointercancel";
with
var v="mousedown touchstart",E="mousemove touchmove",$="mouseup mouseleave touchend touchcancel";
just remove pointer events i.e. pointerdown, pointermove, pointerup, pointercancel

In Angular, Is it possible to have one trigger for a tooltip to appear, and another for it to disappear?

So I have a button on my template, with a tooltip that gives some extra information about the button. I would like the tooltip to appear when the mouse hovers over the button, and then disappear when the button is clicked. Clicking the button loads a separate view.
Currently I have it so the tooltip appears on hover, but then the problem is that the tooltip sticks around after the button has been clicked. Since the button is no longer part of the current view, the tooltip jumps to the top corner of the screen for a few seconds before disappearing. I'd like it to disappear the moment the button is clicked.
So far I've tried two things to solve the problem, neither of which have worked:
I tried wrapping the JS function which opens a new view in $timeout, hoping that the tooltip would disappear before the new view loads.
I tried changing the tooltip-trigger to 'click', but now the tooltip won't appear when the mouse is hovering over it. It will appear once the button is clicked, and stay there until the view is re-loaded.
Here is my code, which includes the two failed attempts mentioned above:
Test.html:
<a class="the-button" ng-click="loadNewView($event)"
uib-tooltip-html="getToolTipInfo($event)"
tooltip-trigger="'click'"
>
Click Me!
</a>
Test.js:
ctrl.loadNewView = function($event) {
$timeout(function($event) { //timeout
SystemViews.openNewView(ctrl.newView);
});
};
Is it possible to have separate triggers for a tooltip like this? If not, what is another way that I can make sure the tooltip disappears before the new view is loaded?
Thank you very much in advance for any wisdom you'd be willing to impart.
The simplest solution is to hide the tooltip before changing view.
If your tooltip is triggered by a click on your anchor, you can emulate a click in your loadNewFunction function to hide it.
Test.html:
<a id="the-button" ng-click="loadNewView($event)" uib-tooltip-html="getToolTipInfo($event)" tooltip-trigger="'click'">Click Me!</a>
Test.js
ctrl.loadNewView = function($event) {
angular.element('#the-button').trigger('click');
SystemViews.openNewView(ctrl.newView);
};
Maybe this answer can interest you since it's about a very similar question.
I found the solution (for me, at least). I learned that you can have multiple triggers if you separate them by space. For my solution, I used the value:
tooltip-trigger='mouseenter click'.
That way it always turns on when I mouse-over, and turns off when I click.
Test.html:
<a class="the-button" ng-click="loadNewView($event)"
uib-tooltip-html="getToolTipInfo()"
tooltip-trigger="'mouseenter click'
>
Click Me!
</a>
Test.js:
ctrl.loadNewView = function() {
SystemViews.openNewView(ctrl.newView);
};
Hope someone else finds this helpful!

Material Js Md-dialog appears outside of the screen after IPad Mobile Keyboard is used

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);

Prevent body scroll on touch devices when scrolling on modal

I'm working on a web app that uses lots of modal overlays with scrollable content in the modal . On touch devices, and in particular on Android, the mobile browser wants to scroll the body content behind the modal instead of the actual scrollable content area within the modal. Or, if the content does scroll, when it hits the top or bottom of the scrollable area, the scrolling then continues on the body. I don't want the body to scroll at all under any circumstances when the modal is visible/active.
I tried to prevent this with the following code but it seems to have no effect (in this case, $context is the document root):
$context.on('touchmove touchstart touchend', '[data-modal-content]', function(e) {
e.stopPropagation();
});
Anyone have other ideas/insight?
Is there anything wrong with the provided z-index of your elements? Maybe the Modal itself or an inner container isn't stacked on top of the body-text

Resources