Background colour datepicker and other select input fields

[Tony]

Hi,

In iOS7 the datepicker and other input fields with drop-down lists are greyed out and the text difficult to read (see screen.png).

Other people have encountered the problem with PhoneGap and there is a plugin to solve the issue here: https://github.com/EddyVerbruggen/iOSWebViewColor-PhoneGap-Plugin

Has anybody managed to solve this issue with Icenium?

Regards,

Tony.

[Steve]

Hello Tony,

Icenium supports custom Cordova plugins, so you can go ahead and try this plugin inside your Icenium app. For more information on using custom Cordova plugins, refer to:

• Working with Custom Plugins
• Import Custom Plugins

Regards,
Steve
Telerik
You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
Looking for tips & tricks directly from the Icenium team? Check out our blog!
Share feedback and vote for features on our Feedback Portal.

[Tony]

Hi Steve,

Thanks for the reply. I did try that but didn't manage to get it to work. It could be the plugin only works with Phonegap, especially as Phonegap is specifically referred to in the plugin.

As iOS7 is probably the most popular platform and datepickers/drop-down lists will be very frequently used in Icenium, I believe this is something needs to be resolved for all users as it's quite fundamental.

If you have know how I can fix this in Icenium, I'd appreciate it.

Regards,

Tony.

[Tony]

Hi Steve,

 

An update. The plugin is now working and solves the issue.

I still think many other users will encounter this as iOS7 and datepicker/drop-down lists are very commonly used so maybe there should a permanent solution for all users without using custom plugins.

Regards,

Tony.

[Steve]

Hi Tony,

The plugin did work straigh out of the box for me, so using it is no hassle at all. About the webview background color - this is how iOS 7 handles inputs/select and this behavior has been chosen and approved by the OS vendor. Because of that, we do not believe that introducing a "permanent solution" ourselves is something we should do.

Regards,
Steve
Telerik
You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
Looking for tips & tricks directly from the Icenium team? Check out our blog!
Share feedback and vote for features on our Feedback Portal.

[Joe]

I was unable to get the same results as pictured in Tony's screenshots. The background of the select picker native widget is just slightly tinted due its translucent gray background. Also the iOSWebViewColor plugin seems to only work when the Icenium template project WebView document body height assignment on deviceready bug fix is disabled, and the WebView background only shows below the document body content.

//$(document.body).height(window.innerHeight); //disable this or the webview background will not show

Here are the configurations I tested with:

• iPhone4, iOS 7.0.1 & 7.0.4 (upgraded and no change in select dial widget rendering)
• Cordova 3.0.2

Any clues as to what I'm missing? Screenshots attached and here's my exported Icenium test project.

[Kaloyan]

Hello Joe,

Thank you for the information provided. I downloaded your project and deployed it on an iPhone 5 running iOS 7. Everything seemed okay on all Cordova versions above 3.0 (including). I have attached screenshots for clarification.

Please, check if the issue is not in the device you are testing against and if so, contact the creators of the custom plugin.

Regards,
Kaloyan
Telerik

[fiport]

I'm trying to get the same plugin working. I tried to following the documentation provided Steve, but I'm not sure if I'm doing things right. 

1. I downloaded the plugin from GitHub, since it's Plugman compatible, I directly imported it into AppBuilder
2. Plugin.xml didn't have <asset>, but had <js-module> block. I assume I don't have to include anything in index.html, I move on. 
3. I open plugin.xml and comment out version compatibility info. 
4. I call window.plugins.webviewcolor.change('#FFFFFF); on deviceready. 

Still no lucky. From the looks of it, it seems like everybody has difficult getting this to work. Can someone help me out? I've stuck here. 

[Anatoli]

Tony,

Curious to know what you did to make it work, I am also stuck.
I imported the plugin, and I can see it now under plugins folder in my icenium project. 
But, when I invoke it in on deviceready event, it did't recognize it. 

Invoking it like this 
window.plugins.webviewcolor.change('#FF0000');

[Tony]

Hi Purna,

All I did was install the plugin using the standard tools of icenium to import and then invoke in exactly the same way as you are doing.

I don't remember having any issues getting it working.

If you send me your plugin directory structure, I'll compare it with mine and see if I there are any differences, perhaps with the plugin.xml.

Thanks,
Tony.

[Kaloyan]

Hi fiport,

As Joe has noted, make sure that "$(document.body).height(window.innerHeight);" is disabled, as this prevents the normal plugin behavior. Also, you should check if the height is set in the viewport meta tag and if so, remove it. Search for content like this: height=device-height

I hope this solves the issue.

Regards,
Kaloyan
Telerik

[Joe]

Kaloyan, I got to the bottom of the iOS 7.0.4 select picker rendering discrepancy. Turns out that Safari mobile will render the select picker with a translucent gray background overlay slightly revealing the content and WebView background on an iPhone 4 as pictured in my screenshots above but on an iPhone 5 the content and picker background gray overlay is not rendered and the WebViewColor is fully visible as in your screenshots. I deployed the test app on both devices to confirm this.

Nice of Apple to handle the WebView widget rendering differently for two devices on the same OS version (7.0.4).

[Steve]

Hi Joe,

Thanks for sharing this with the community. You could also post this as an issue to the plugin's github repo, in case the author is interested in fixing this specific case.

Regards,
Steve
Telerik

[Brad]

I'm also having the issue of the two posters above. Calling the plugin in my deviceReady method with 

var onDeviceReady = function() {
        window.plugins.webviewcolor.change('#FFFFFF');
};
document.addEventListener('deviceready', onDeviceReady, false);

and get the following error: "Uncaught TypeError: Cannot read property 'webviewcolor' of undefined'"

In my plugins folder I have iOSWebViewColor-PhoneGap-Plugin-master which was created when I imported the zip file from github. I do not see the plugin listed in my project 'Properties' anywhere though, is this an installation problem? I don't see any other steps than just importing the zip file for a plugin that uses js-module here http://docs.telerik.com/platform/appbuilder/creating-your-project/using-plugins/using-custom-plugins/add-custom-plugins

[Kaloyan]

Hi Brad,

I tested the plugin again and unfortunately, I found that it is not working on iOS 7.1 devices. Please, let me know if this happens to be the case on your side. If so, you can contact the creator of that plugin and see if any updates are to be expected.

However, if the issue is not related to the iOS version, I will be happy to assist you further on the matter.

Regards,
Kaloyan
Telerik