Popup in android mobile devices

Popup in android mobile devices

  
Hi,
I have a mobile application that uses popups from richwidgets, it works fine in several devices (including ios and windows mobile devices), but i have an issue with android devices. When i select an input box from the popup to enter some data, it selects me the input box from the page behind the popup, i've tried several approches to solve this problem but with no success.

Any help would be appreciated
Thanks in advance
Hi Hugo,
Can you provide us with a sample eSpace where that happens?

Cheers
Hi,
I managed to solve the problem with a little work around, first i didn't mention that the popup was a custom one from the RichWidgets original popup.
To solve my problem, basically i used javascript to disabled the input elements from the page where i call my popup, and enabled them after closing the popup, not the most pretty solution but it solved my problem.

Thanks anyway
Cheers
Miguel Ventura wrote:
Hi Hugo,
Can you provide us with a sample eSpace where that happens?

Cheers
 
I encountered this same problem on a tablet with the android operating system and using the default browser that comes with it, which I suppose is the Dolphin.
What happens is that if we have a page with inputs and we open a popup, also with inputs, on that same page, when we click on the popup the inputs in the page are the ones to be clicked.
 
Is there any alternative to the solution given by Hugo?
Ok, I finally managed to get an Android tablet with an old stock browser (I believe that the current stock browser was replaced by chrome) and I've found several quirks regarding the inputs. These problems aren't limited to applications built with the OutSystems platform: a google search for "android browser inputs" will yield a lot of results about these problems.

Problem #1 - Focus is sent to the inputs that are below (excepted behavior would be the focus to be sent to the inputs above)
This problem can be solved by tweaking the tabindex property of the inputs. Apparently the inputs with the lowest tabindex property will have higher priority when getting the focus. Thus this problem can be solved by using extended properties in the inputs:
  • In inputs inside the popup content, set an extended property tabindex with values starting from 1
  • In inputs outside the popup (in the main page) set an extended property tabindex with values starting from a higher value (eg: 100)
You should also be able to solve this at runtime by using javascript.

// untested script, use at your own risk
osjs(function() { // as soon as we can
  var i = 0;
  osjs('input,textarea').each(function() { // for all inputs
    osjs(this).attr("tabindex", (osjs(this).attr("tabindex") || ++i) + 100);
  });
});

Problem #2 - An overlay is created when an input gains focus and it's usually misplaced, giving the illusion of two inputs
This overlay has to do with the mechanism used by the browser to allow writing text in the input fields. This problem can be minimized with CSS

input[type=text], textarea {
    -webkit-user-modify: read-write-plaintext-only;
    -webkit-backface-visibility: hidden;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    transform: rotateY(0deg);
}

By adding that piece of CSS to your theme, your inputs should now render correctly in the android stock browser.

I've also tested in chrome and in the browser that ships with the newest versions of the android OS but I found no problem whatsoever.

Cheers