Background colour datepicker and other select input fields

15 posts, 1 answers
  1. Tony
    Tony avatar
    6 posts
    Member since:
    Oct 2012

    Posted 14 Dec 2013 Link to this post

    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.

  2. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 14 Dec 2013 Link to this post

    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:
    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.
  3. Tony
    Tony avatar
    6 posts
    Member since:
    Oct 2012

    Posted 14 Dec 2013 Link to this post

    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.

  4. Answer
    Tony
    Tony avatar
    6 posts
    Member since:
    Oct 2012

    Posted 15 Dec 2013 Link to this post

    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.

  5. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 17 Dec 2013 Link to this post

    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.
  6. Joe
    Joe avatar
    16 posts
    Member since:
    Jan 2013

    Posted 24 Jan 2014 Link to this post

    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.

  7. Kaloyan
    Admin
    Kaloyan avatar
    872 posts

    Posted 28 Jan 2014 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  8. fiport
    fiport avatar
    1 posts
    Member since:
    Jan 2014

    Posted 31 Jan 2014 Link to this post

    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. 
  9. Purna
    Purna avatar
    17 posts
    Member since:
    May 2012

    Posted 03 Feb 2014 Link to this post

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

  10. Tony
    Tony avatar
    6 posts
    Member since:
    Oct 2012

    Posted 04 Feb 2014 in reply to Purna Link to this post

    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.
  11. Kaloyan
    Admin
    Kaloyan avatar
    872 posts

    Posted 05 Feb 2014 Link to this post

    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
    Icenium is now Telerik AppBuilder, and is part of the Telerik Platform. For more information on the new name, and to learn more about the Platform, register for the free online keynote and webinar on Wednesday, February 12, 2014 at 11:00 a.m. ET (8:00 a.m. PT)
  12. Joe
    Joe avatar
    16 posts
    Member since:
    Jan 2013

    Posted 10 Feb 2014 Link to this post

    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).
  13. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 13 Feb 2014 Link to this post

    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
    Icenium is now Telerik AppBuilder, and is part of the Telerik Platform. For more information on the new name, and to learn more about the Platform, register for the free online keynote and webinar on Wednesday, February 12, 2014 at 11:00 a.m. ET (8:00 a.m. PT)
  14. Brad
    Brad avatar
    8 posts
    Member since:
    Mar 2014

    Posted 21 Mar 2014 Link to this post

    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


  15. Kaloyan
    Admin
    Kaloyan avatar
    872 posts

    Posted 25 Mar 2014 Link to this post

    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
     

    Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET. Seats are limited.

     
Back to Top