Embedded form not showing the added CSS style on Safari browser.

  • Profile Image
    chrisstudio
    Asked on May 21, 2020 at 01:04 PM

    Hi,

     

    So over the last couple of nights I have been building some forms with custom css, however all of a sudden, elements of the form just go missing in the form builder and do not reflect what is showing on the final published form.

     

    This has happened twice in the space of two evenings causing me to loose a lot of work. The forms in question are 

    'PAYMENT - SHOWREEL' which can be accessed here:
    https://www.chris.studio/newpayment

    and 

    'SPOKEN REEL SCRIPT UPLOAD' which can be accessed here:
    https://www.chris.studio/spokenreels/scripts/upload

     

    I have checked the css and there are no open brackets or conflicting commands, I have also tried to Clone the form, all to no avail.

  • Profile Image
    KrisLei
    Answered on May 21, 2020 at 02:23 PM

    Hi,

    We apologize for all the inconvenience this has caused you.

    Have you tried reverting the revisions on your form through the revision history tool? For your reference: How-to-View-Form-Revision-History

    I have cleared the form cache on our end, kindly try it again then let us know if the issue persists on your end. 

  • Profile Image
    KrisLei
    Answered on May 21, 2020 at 02:34 PM

    I have also cloned your form and tried to make some changes on the CSS codes, it seems that the changes are showing on published mode.

    1590086077css.jpg


  • Profile Image
    chrisstudio
    Answered on May 21, 2020 at 02:38 PM

    Ah, I didn't even know there was a revision history, thank you so much! I have reverted it back to the most recent one before it started having issues so I didn't loose all that much. Thanks again.

  • Profile Image
    chrisstudio
    Answered on May 31, 2020 at 09:04 AM

    Hi,


    this seems to be happening again, if you open the form in both safari and chrome you can see the css is acting differently and revision history does not seem to work:

    https://www.chris.studio/covid19?9b25fec1-252f-4c8e-ef86-548fa37051c2

    Is it possible for you to clear the cache on your end again?

  • Profile Image
    KrisLei
    Answered on May 31, 2020 at 02:13 PM

    I have cleared your form cache on our end. I have also checked your form and may I ask which CSS code is not showing visibly on your embedded form? Here's what is showing me on my end on Chrome:

    1590948289embed form.jpg

    Then I just tested it on a cross-browser testing application, with Safari browser:

    1590948618embed form2.jpg

    Can you verify if this is what it is showing you on your end? Or please provide us with a screenshot of the issue you are showing? Please follow this guide to post your screenshot on the forum page as we are unable to view attached images to emails: How-to-Post-Screenshots-to-Our-Support-Forum

    Thank you. Looking forward to your response.


  • Profile Image
    chrisstudio
    Answered on May 31, 2020 at 03:15 PM

    Hi,


    YEs this is exactly what I am referring to, the chrome version of the form is how it should look across all browsers but isn't for some reason.


  • Profile Image
    KrisLei
    Answered on May 31, 2020 at 05:14 PM

    Thank you for the confirmation.

    It seems that the issue is with the border-radius on the dropdown fields. Can you try adding the '!important' attribute on the .form-dropdown element on your codes:

    1590959524css.jpg

    I have added it on my cloned form and it seems fixed the issue on Safari browser:

    1590959635safari.jpg 

    Kindly try it on your end and please let us know how it goes. 

  • Profile Image
    chrisstudio
    Answered on May 31, 2020 at 05:24 PM

    Thank you so much for your help, however, I have placed the important command in front of all the border radius commands and it still doesn't seem to work. can you check it on your end, as if it works it may be a DNS cache issue.....


    https://www.chris.studio/covid19

  • Profile Image
    KrisLei
    Answered on May 31, 2020 at 05:37 PM

    I checked again the embedded form on my end and it seems it still has the same issue.

    Have you tried re-embedding your form? Can you perhaps try my cloned form: https://form.jotform.com/201516842882963 

    Looking forward to your response.

  • Profile Image
    chrisstudio
    Answered on May 31, 2020 at 05:46 PM

    Certainly, could you tell me the title of the cloned form as it does not seem to be showing in my forms list.

  • Profile Image
    KrisLei
    Answered on May 31, 2020 at 05:51 PM

    My apologies, it seems that you haven't cloned the form yet on your account, please refer to this guide: How-to-Clone-an-Existing-Form-from-a-URL

    Here's my cloned form: Clone of COVID-19 GIFT CARD

    I hope this helps. Let us know if you need further assistance.

  • Profile Image
    chrisstudio
    Answered on May 31, 2020 at 05:53 PM

    Okay so Ive just cloned the form and embedded that on my website and the issue seems to persist on Safari......

    https://www.chris.studio/covid19

  • Profile Image
    KrisLei
    Answered on May 31, 2020 at 06:41 PM

    Can you also try to load the form itself on iOS browser to verify if it will show the styles for the CSS codes? 

    If it is, then I think the issue is with the embedded form, maybe you can try embedding the form using the Source Code or the Embed codes: Which-Form-Embed-Code-Should-I-Use

  • Profile Image
    chrisstudio
    Answered on May 31, 2020 at 07:25 PM

    Okay, 


    So I have tried it on iOS Safari and it seems to work okay, however it still seems to be wrong on the desktop version of Safari, what does this mean? I have tried 'Embed Code', 'Source Code', and 'iFrame', all to no avail.

  • Profile Image
    chrisstudio
    Answered on May 31, 2020 at 07:34 PM

    I've also just flushed my DNS cache and the problem is still the same.

  • Profile Image
    roneet
    Answered on May 31, 2020 at 11:39 PM

    Could you please embed the iframe code in your website and let us know.

    https://www.jotform.com/help/148-Getting-the-Form-iFrame-Code

    I have injected this code in your form:

    .form-all .form-textbox, .form-all .form-radio-other-input, .form-all .form-checkbox-other-input, .form-all .form-captcha input, .form-all .form-spinner input, .form-all .form-pagebreak-back, .form-all .form-pagebreak-next, .form-all .qq-upload-button, .form-all .form-error-message {
    border: 2px solid !important;
    }

    The form looks like this:

    15909826841.PNG

    You have 3 website links:

    https://www.chris.studio/covid19?9b25fec1-252f-4c8e-ef86-548fa37051c2

    https://www.chris.studio/spokenreels/scripts/upload

    https://www.chris.studio/newpayment

    You want us to inspect all the forms? Please re-embed the forms using the iFrame code.

    We will inspect the website further.

    Thanks.

  • Profile Image
    chrisstudio
    Answered on June 03, 2020 at 02:12 PM

    Hi,


    So I have done everything above and swapped all the embed codes with the iframe codes and it is still showing the same on safari.


    Yes these are the 3 forms that are giving me issues so if you could inspect that would be great.

  • Profile Image
    KrisLei
    Answered on June 03, 2020 at 04:38 PM

    Hello Chris,

    We sincerely apologize for the inconvenience this has caused you. 

    I will escalate a ticket to our developers to further investigate the issue. It seems that the issue is on the border-radius element of the CSS codes on a Dropdown field.

    We will provide you with any update as soon as we hear back from them. Thank you for your patience and understanding on this matter.

  • Profile Image
    chrisstudio
    Answered on June 16, 2020 at 08:15 PM

    Hi Guys,


    Really disappointed that I have not received an update on this issue two weeks after the last message and almost a month since the original post. Can you please fix the issue as soon as is possible as I would like to make the form public.

  • Profile Image
    roneet
    Answered on June 16, 2020 at 09:31 PM

    We are sorry for the inconvenience this has caused.

    Let me make a follow-up to our team on your behalf. Meanwhile could you please clone the form and then add this to your website to see how it goes.

    Please give it a try and let us know how it goes.

    Thanks.

  • Profile Image
    chrisstudio
    Answered on June 16, 2020 at 09:38 PM

    Hi Roneet,


    As you can see from above we have tried this step many times to no avail. I have just tried it again and it did not work. 

  • Profile Image
    roneet
    Answered on June 16, 2020 at 11:04 PM

    We understand your frustration, Chris. We are really sorry for the trouble and the long wait.

    I was testing this website of yours and injected this CSS in your form:

    #first_3,#last_3,#input_8{
       border:1px solid !important;
     
    }

    .form-dropdown{

    border:1px solid !important;

    }

    The changes are reflected in the website too if you see:

    15923628571.PNG

    If you want to make the border bolder than add 2px to the above code. The changes are getting reflected.

    I think you are overriding the CSS by using the !important property that could be the reason that some codes are not getting reflected in the form.

    https://www.chris.studio/covid19?9b25fec1-252f-4c8e-ef86-548fa37051c2

    Are you able to see the changes in the above website at your end?

    Also, what changes were you expecting in the form? Do you want to change the border radius more?

    Looking forward to your response.

    Thanks.

  • Profile Image
    chrisstudio
    Answered on June 16, 2020 at 11:07 PM

    Okay thank you for this, for some reason the above changes are only reflected in chrome and not on safari. 

    The above is exactly what I would like it to look like instead of the boxy dropdown as they are showing on safari.

  • Profile Image
    chrisstudio
    Answered on June 16, 2020 at 11:12 PM

    Actually for some reason it works on safari on my phone and iPad , but not my computer, ive cleared the cache on my computer but it still will not work. Am I doing something wrong?

  • Profile Image
    roneet
    Answered on June 16, 2020 at 11:31 PM

    Could you please try to clear the Safari browser cache:

    To clear the cache of Safari by going to Develop > Empty Cache or pressing Option-Command-E (⌥⌘E) on your keyboard.

    You can also try the website by entering into the private mode (File > New Private Window ⇧⌘N) so that Safari doesn't save the cache of the webpage.

    Please give it a try and let us know how it goes.

    Thanks.

  • Profile Image
    chrisstudio
    Answered on June 16, 2020 at 11:36 PM

    No, so unfortunately after clearing all cache and browsing history, opening it in a new private window, it still looks the same.


    1592364986Screenshot 2020-06-17 at 04.35

  • Profile Image
    roneet
    Answered on June 17, 2020 at 12:19 AM

    I was able to replicate the issue in your form in the MAC OS in the Safari browser.

    I think there is some issue with the existing theme in your form.

    I have cloned the form and then applied the new "Upcoming theme". I have then injected this CSS:

    .form-textbox,.form-dropdown{
      border-radius:25px!important;
    }


    #input_44,#input_8,#input_4  {
     
      width: 650px!important;
    }

    You could test my form on your Safari browser:

    https://www.jotform.com/201678648270967

    Please do not apply this workaround on your existing form as the existing CSS would be gone if you replace the theme. If you want to try out then clone the form and then you may try.

    Let us know how it goes.

    Thanks.

  • Profile Image
    chrisstudio
    Answered on June 19, 2020 at 11:23 AM

    I can't seem to access the 'Advanced Designer' when I apply the 'upcoming' theme. Is this possible?
  • Profile Image
    Basil_A
    Answered on June 19, 2020 at 11:56 AM

    Hi,

    I have moved your last question into a new ticket in order to better address it. You can find it right here:

    https://www.jotform.com/answers/2400085

    Thank you!