What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Radio buttons don't all display in Safari

    Asked by ThePerfectTrip on July 18, 2016 at 01:09 PM

    The radio buttons at the end of my form only displays 1/4 buttons (only displays "Dreamer") in the Safari browser.  Is there CSS that will adjust that only on the safari browser?? 

    https://www.jotform.com//?formID=60634387256158#

    Thank You

    radio buttons all in JotForm
  • Profile Image
    JotForm Support

    Answered by Charlie on July 18, 2016 at 03:20 PM

    If I am not mistaken, the radio buttons you are referring to are under the payment integration's product list. It seems like you have setup a CSS code to make it four columns. Is that correct? 

    The only case where I see that the radio buttons are disappearing is when I view it on an iPhone iOS device.

     

    In Mac OS X Safari, it is displayed correctly although it shows them on a new line:

     

    Now this depends on how you would like to format the layout of this element on a mobile device. Would you like to have it the same formatting? Please note that the width is much smaller on a device which might congest your product list.

    Here's my proposed solution. Have the product list in 2 columns.

     

    You can clone my form here: https://www.jotformpro.com/form/61995247670972

    Here's what I did:

    1. First, make your form mobile responsive: https://www.jotform.com/help/322-How-to-make-mobile-friendly-forms-on-JotForm 

    2. After that, add this custom CSS code:

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

        #cid_165 {

            column-count: 2 !important;

        }

        #id_165 {

            margin-left : 0 !important;

            margin-bottom: 100px !important;

            height: 100px !important;

        }

        #cid_165 > span {

            display : inline-block !important;

            z-index : 99999999 !important;

            height: 80px !important;

        }

        .form-product-item {

            overflow: visible !important;

        }

    }

     

    Let us know if that will work.