My Forms check boxes are appearing differently on different types of PC's, How can I fix this?

  • jackjones
    Asked on September 5, 2016 at 10:57 AM

    I have created two different form's and when I view them in chrome on a windows PC they look fine. However, if I open them up on chrome in a Mac the check boxes go wonky. See the image below... My Forms check boxes are appearing differently on different types of PCs, How can I fix this? Image 1 Screenshot 20

    On the top row you have two of the same forms open in chrome but on different PC's. the top left form is open on a Mac and as highlighted the buttons are all wonky. Whereas on the top right form which is open on chrome on a windows PC, They are aligned straight. 

    The second row is another form which is demonstrating the exact same problem. 

    Do you know how this could be fixed? 

    Many Thanks, 

    Jack Jones.

    Jotform Thread 924521 Screenshot
  • David JotForm Support Manager
    Replied on September 5, 2016 at 11:54 AM

    Thanks for reporting this, I will check this further, and get back to you as soon as I find the solution.

  • David JotForm Support Manager
    Replied on September 5, 2016 at 1:08 PM

    Each browser version renders the styles a little bit different. But I have been able to make the checkboxes lined up by modifying the CSS code. This is the final code: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    a.jf-branding {

        display : none !important;

    }

    #id_8 {

        padding : 0px;

        margin-left: -.35px;

    }

    .form-line{

       margin-left: 75px;

    }

    .form-dropdown {

        border : 1px solid #ccc;

        font-size : 1em;

        padding : 11px 5px 9px 5px;

        border-radius : 8px;

        box-shadow : 0 1px 2px #eee inset;

    }

    See the result in my form version, here is the url: https://form.jotform.com/62484776378978 

    My Forms check boxes are appearing differently on different types of PCs, How can I fix this? Image 1 Screenshot 20

    You can remove all the injected CSS code, and replaced for the one I provided, or you can simply clone my form and use it: http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL 

    Let us know if you need more help.