Datepicker calendar transparent background issue

  • Resolved eugene212

    (@eugene212)


    4 years, 1 month ago

    Hi,

    Great plugin which has many very useful options in the free version !

    One of such options is a calendar based datepicker, but it renders with transparent background which makes it visually difficult, especially on mobile phones.

    Using Firefox inspector (for Default form style), this seems to come from forminator-form-default.full.min.css styling:

    .ui-datepicker.forminator-calendar–default {
    width: auto;
    z-index: 20000000;
    margin: 0;
    padding: 1px 0;
    border: 0;
    border-radius: 0;
    background-color: transparent!important;
    }

    I have tried to overwrite “background-color” setting in Custom CSS with and without “!important” to no avail (maybe not using proper reference ?).

    It seems that I can set calendar background color directly in Forminator CSS file, but it would be probably overwritten with any Forminator update.

    Please advise if there is a proper way to change the calendar background colour.
    Also it is interesting to know why it is set to “transparent!important” in the original CSS files ?

    Regards,

    Eugene

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Support Saurabh – WPMU DEV Support

    (@wpmudev-support7)

    Hello @eugene212,

    I checked the same on my end but I could not replicate the same. Can you try to add the CSS by navigating to your site wp-admin Dashboard-> Appearance-> Customize-> Additional CSS-> Add CSS there and publish the change and check if that works. If that does not, can you help me with the link to the site to check the same and try to figure out what conflicted there?

    Thank you,
    Prathamesh Palve

    Thread Starter eugene212

    (@eugene212)

    Hi @wpmudev-support7

    As mentioned before, I have already tried Dashboard-> Appearance-> Customize-> Additional CSS-> Add CSS with no success, i.e. I could change background colour of a datepicker field or calendar icon, but could not figure out how to change it for pop-up calendar – this is the one that has transparent background on some devices (specifically Android mobile phone) making it visually very hard to use.

    Can you please advise what CSS I should try to set some background colour for pop-up calendar of the datepicker field ?

    I will then try your suggestions, hopefully it can fix the issue – if it does not work, then I will create a test site for your observation/analysis.

    Regards,

    Eugene

    Thread Starter eugene212

    (@eugene212)

    Correction: I have tried custom CSS in the Forminator form Appearance, not the WP global settings (I could not find where I can do it).

    Also I am using Colibri WP Pro theme if it makes any difference.

    Here is the test site with the “transparent calendar” (as observed on my Android phone):

    https://test.nuramed.ru/booking/

    Regards,

    Eugene

    Plugin Support Patrick – WPMU DEV Support

    (@wpmudevsupport12)

    Hi @eugene212

    Could you please try to use this CSS on Forminator custom CSS or WordPress > Appearance > Additional CSS?

    #ui-datepicker-div.forminator-custom-form-158.forminator-calendar--default {
background-color: #fff!important;
}

    https://monosnap.com/file/kwd8ezkIfBQWJKtPp56bDHSZd5fm2a

    Let us know if this worked for you.
    Best Regards
    Patrick Freitas

    Thread Starter eugene212

    (@eugene212)

    Hi @wpmudevsupport12

    Thanks a lot – it worked as the WordPress Additional CSS (did not work on Forminator custom CSS) !

    I have also applied similar CSS on the production site and all is good now, so I can advise my customers about this good news !

    Regards,

    Eugene

    I had the same problem and this solution worked for me too. Thank you so much!!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Datepicker calendar transparent background issue’ is closed to new replies.