CSS behaving different on chrome and safari

  • Profile Image
    rahulchavan34
    Asked on December 12, 2020 at 08:33 AM

    Hello,

    The injected css is behaving different in two different browsers, safari and chrome. please see the screen shots below and the css code. could you let know what the issue is here ?

    @media screen and (max-width: 480px){

    input.translatable {

     width: 100% !important;

    }

    }

    @media screen and (min-width: 480px) {

    input.translatable {

     width: 250px !important;

    }

    }

    safari

    1607779915_5fd4c64b85f53_Screenshot 2020

    chrome

    1607779915_5fd4c64b70fdf_Screenshot 2020

  • Profile Image
    Gaetan_B
    Answered on December 12, 2020 at 01:42 PM

    Hello,

    Thank you for reaching out.


    This has to do with the way the Cascade in CSS works. When two conflicting rules target the same element, the browser uses the rules of the cascade to determine which one to apply.


    Here it looks as the breakpoint is the same (480px), and one browser will read the CSS in a slightly different fashion due to those conflicting rules.


    The easiest way I see to fix this would be to change the 480px on one of the media query you've made.


    Should you have any further inquiries, please don't hesitate to reply to this thread.

    Gaetan

  • Profile Image
    Gaetan_B
    Answered on December 12, 2020 at 03:41 PM

    Hello,


    CSS code is read from top to bottom.

    The browser will read the first one, which he will find true, then he will find the second one and find it true as well.

    So he will disregard the first one and apply the last thing that he found to be true.


    Inverting them should do the trick.


    Should you have any further inquiries, please don't hesitate to reply to this thread.

    Gaetan

  • Profile Image
    Sigit_W
    Answered on December 12, 2020 at 10:53 PM

    Hi there,

    Instead of changing styles when the width gets smaller than 768px, you can try to change the design when the width gets larger than 768px. This will make your design Mobile First:

    input.translatable {
    /* For mobile phones: */
     width: 100% !important;
    }

    @media only screen and (min-width: 768px){
    input.translatable {
    /* For tablets and desktops: */
     width: 250px !important;
    }
    }


    Please give it a try, and let us know if you need further assistance.

  • Profile Image
    rahulchavan34
    Answered on December 13, 2020 at 02:23 AM

    Hello,

    I changed it to the the above CSS mentioned. Now for mobile phones its okay, but for tablets and desktop screens, it still shows mobile screen size itself.

    Could you check what it wrong again ?


    1607844181_5fd5c15545367_Screenshot 20201607844180_5fd5c154d3ab3_Screenshot 2020

  • Profile Image
    Richie_P
    Answered on December 13, 2020 at 07:10 AM

    Kindly try this custom CSS in your widget.

    @media screen and (min-width: 768px){

       input.translatable {

     width: 250px !important;

    }

    }


    Let us know how it goes.





  • Profile Image
    rahulchavan34
    Answered on December 13, 2020 at 07:22 AM

    Hello,

    No, that too doesnt work. pls see the screen shot. Could you suggest me a different way to do it?

    1607862161_5fd607910bae9_Screenshot 2020


  • Profile Image
    Richie_P
    Answered on December 13, 2020 at 08:12 AM

    We can try increasing the width of the widget by using this CSS

    #customFieldFrame_18{

       width: 330px !important;

    }

    Then manually increasing the second field width.

    #col2{

       width: 150px;

    }

    Guide:https://www.jotform.com/help/428-how-to-inject-css-codes-to-widgets

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

  • Profile Image
    rahulchavan34
    Answered on December 13, 2020 at 08:21 AM

    Hello,

    It still doesnt work. Could you try to check it from your end by directly inject the correct css code and let me know the correct css code. I have been trying all the variations of the code styles mentioned in this ticket above, but nothing seems to work.

    Thanks

    1607865664_5fd615405caf4_Screenshot 2020

  • Profile Image
    roneet
    Answered on December 13, 2020 at 09:07 AM

    Would you like to set the fields vertically this way?

    1607868357_5fd61fc509da5_

    If yes, you may inject this CSS in the widget:

    th.col1 {

     display: none;

    }

    th.col2 {

     display: none;

    }

    list tbody:first-child > tr:first-child {display: none;} #list {width: 100%; border-collapse: collapse;} #list tbody:first-child > tr > td{display:block; padding: 6px 0;} #list tbody:first-child > tr + tr + tr {border-top: 1px solid #ccc;} #list > tbody:first-child tr td.col1 {padding-top: 20px;} .mobileColumnName {display: inline-block; padding-bottom: 4px; width: 40%; box-sizing: border-box;} .mobileColumnName + input, .mobileColumnName + textarea, .mobileColumnName + select, .mobileColumnName + .radio-container, .mobileColumnName + .checkbox-container, .mobileColumnName + .dateContainer {width: 60%; display: inline-block; box-sizing: border-box; vertical-align:top; box-shadow:none;} .buttonsColumn {text-align: right;}

    Let us know how it goes.

    Thanks.

  • Profile Image
    Jimmy_D
    Answered on December 13, 2020 at 10:30 AM

    Kindly inject the following CSS code into the widget; so it fits the full-screen width of the device it's accessed from (Mobile and PCs).

    table{
    width:100%!important;
    }
    th, td {
        width: 50%!important;
    }


    1607873414_5fd63386dc470_h0KMoFkWVI.gif

    Let us know should you need further assistance.

    Best

  • Profile Image
    rahulchavan34
    Answered on December 13, 2020 at 11:10 AM

    This seems also not to work. Could you please provide me the complete css to inject in the widget css?

    1607875800_5fd63cd86d22b_Screenshot 2020

  • Profile Image
    rahulchavan34
    Answered on December 13, 2020 at 01:58 PM

    Hello,

    This ticket needs an urgent support!!! NO solution is working correctly!

    There seems to be a bug in the widget. Please could you let me know what is wrong with this code? If its correct, then why is it not affecting the field width sizes ???

    @media screen and (min-width: 768){

    input[type=text] {

      width: 100%!important;

    }

    }

    @media screen and (max-width: 480){

    input[type=text] {  

     width: 250px!important;

    }

    }


    1607885837_5fd6640dc88c3_Screenshot 2020

  • Profile Image
    VincentJay
    Answered on December 13, 2020 at 03:20 PM

    Hello,

    Just to clarify/confirm, is the issue only happens on the Safari browser? Upon checking the screenshot you provided, may we know which of the screenshot is correct?

    I don't have a Safari browser at the moment but please try adding this custom CSS code to apply the CSS to any Safari Browser version:

    @media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0)
    { @media {
    insert the Custom CSS code here
    }}

    Please give it a try and let us know if the issue still persists. Thank you!

  • Profile Image
    rahulchavan34
    Answered on December 13, 2020 at 04:24 PM

    Hello,

    So, This code (shown below) works correct on 1) desktop and tablet for chrome browser and 2) On mobile screens both android and IOS

    ----------------------

    input[type=text] {  

     width: 250px;

    }

    @media screen and (max-width: 480px){

    input[type=text] {

      width: 100%;

    }

    }

    ----------------------

    But on Safari desktop browsers, it doesn't work correctly. The Safari reads the CSS code for 480px and I dont know why. Pls see screen shot. Why does it read css defined for 480px screen on desktop?

    1607894506_5fd685ea88aca_Screenshot 2020


    I tried the above code suggested by vincentJay, but it has no affect.

    I hope you could provide a better insight into this peculiar behaviour.

  • Profile Image
    Sigit_W
    Answered on December 13, 2020 at 06:34 PM

    Hi there,

    I would like to apologize for any inconvenience.

    I don't have a native Safari browser at the moment, I did the test using Mac Safari 7 browser agent,

    by applying this CSS, it shows correctly for input with width 250px.

    Please kindly put this in CUSTOM CSS

    input[type=text] {   width: 250px;}@media screen and (max-width:480px){#list tbody:first-child > tr:first-child {display: none;} #list {width: 100%; border-collapse: collapse;} #list tbody:first-child > tr > td{display:block; padding: 6px 0;} #list tbody:first-child > tr + tr + tr {border-top: 1px solid #ccc;} #list > tbody:first-child tr td.col1 {padding-top: 20px;} .mobileColumnName {display: inline-block; padding-bottom: 4px; width: 40%; box-sizing: border-box;} .mobileColumnName + input, .mobileColumnName + textarea, .mobileColumnName + select, .mobileColumnName + .radio-container, .mobileColumnName + .checkbox-container, .mobileColumnName + .dateContainer {width: 60%; display: inline-block; box-sizing: border-box; vertical-align:top; box-shadow:none;} .buttonsColumn {text-align: right;}}


    1607901959_5fd6a307f0d91_screenshot.png

    1607902432_5fd6a4e092cdf_ezgif.com-gif-m


    Please give it a try, and let us know if you need further assistance.

  • Profile Image
    JohnRex
    Answered on December 14, 2020 at 01:24 AM

    Hello @rahulchavan34 - To make it simpler, we would need to target the iframe first. Add this custom CSS code to the form (not to the widget):

    iframe#customFieldFrame_18 {
      min-width: 100%!important;
    }

    Please ensure to remove all other codes there.

    Then add this to the widget:

    input[type=text],table {
      width: 100%!important;
    }

    This works on both mobile and desktops. I even implemented this on a cloned form and here's the link so you could try: https://form.jotform.com/203474857990974

  • Profile Image
    rahulchavan34
    Answered on December 14, 2020 at 05:42 AM

    Thanks, the last answer worked!