Safari & Mobile View of Form Off

  • Profile Image
    jcie
    Asked on November 22, 2021 at 03:50 AM

    Hi Jotform – I have two related questions for our Button Radios widget we've been customizing.

    1) On Safari our CSS doesn't carry over. How can we make the CSS work for this widget in Safari?

    Chrome View (correct) – rounded corners; all buttons on line

    1637570848_619b59207e137_

    Safari View (incorrect) – none of the CSS carried over

    1637570898_619b59529f96e_


    2) Is there a way to make this widget collapse to two rows, rather than one scrolling row in in mobile view?

    Thank you in advance for your help!

  • Profile Image
    Lars_L
    Answered on November 22, 2021 at 06:17 AM

    Hello,

    For your second question, it seems to automatically make new rows for me on mobile with this CSS for the wrapperButtonRadio class. And display on one row if the mobile is in landscape view.

    /* Button Margin Between */
    .wrapperButtonRadio {
    margin-right: 15px;
    border-radius:15px;
    width:100px !important;
    }


    As for the rounded corners, I've been able to replicate it in Safari macOS and Safari/Chrome iOS. It seems like these browsers handle the CSS for border-radius differently. I'm still checking how to get rounded corners for these. I'll reply here during the day with my findings.

    Best regards,
    Lars

  • Profile Image
    Lars_L
    Answered on November 22, 2021 at 06:39 AM

    Hello again,

    I believe I've managed to get it working on all browsers and avoid any scrolling as well.

    This is the CSS on the widget I used:

    /* Button Margin Between and rounded corners */
    .wrapperButtonRadio{
    margin-right: 15px;
    border-radius:15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -o-border-radius: 15px;
    -ms-border-radius: 15px;
    -khtml-border-radius: 15px;
    width:102px !important;
    }
    .wrapperButtonRadio > label{
    border-radius:15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -o-border-radius: 15px;
    -ms-border-radius: 15px;
    -khtml-border-radius: 15px;
    }

    /* Button row full width */
    #radio-container > div{
    width:100% !important;
    }

    /* Button Background */
    span {
    background-color: #76507F;
    width:100px;
    color:#fff;
    }

    /* Button Hover Background */
    span:hover {
    background-color: #FFFFFF;
    }

    /* Button Text Color*/
    .wrapperButtonRadio label span {
    color: #FFFFFF;
    }

    /* Button Text Color*/
    .wrapperButtonRadio label span:hover {
    color: #76507F;
    }

    /* Checked Button Color*/
    .checkedButtonRadio + label span {
    background-color: #FFFFFF;
    color: #76507F;
    }

    .radios input+label span {
    font-size:16px;
    }

    /* Remove Active State Carrot*/
    .blue .actviv_elem {
    background:none;
    }

    @media only screen and (max-width:480px) {
    label {
    width: 100px ! important;
    }


    And in the CSS for the form itself, I had to add this:

    iframe{
      width:100%!important;
    }


    Please give this a try, and if you notice that it's not acting as expected in any browser, please let us know.

    Best reagards,
    Lars

  • Profile Image
    jcie
    Answered on November 22, 2021 at 11:27 AM

    Hi Lars – This is great and I think we're 95% there. Two small issues that I'd be appreciative if you could look into it.

    On mobile Safari there's quite a bit of padding/margin below the radio buttons:

    1637598413_619bc4cdddae8_


    Also, the bottom of the form seems to be getting cut off here:

    1637598472_619bc50845e68_

  • Profile Image
    Lars_L
    Answered on November 22, 2021 at 12:19 PM

    Hello,

    I wasn't able to replicate the form cutting off, but I have this CSS if you wish to add some padding at the bottom of the form to avoid that. This would be added in the forms CSS.

    .supernova body {
    padding-bottom: 30px !important;
    }

    And the "30px" can be adjusted if you want more or less padding.

    I'm looking into finding a solution for the spacing and will reply back here in a bit about that.

    Best regards,
    Lars

  • Profile Image
    Lars_L
    Answered on November 22, 2021 at 03:47 PM

    Hello again,

    With how the widget works, we might not be able fix the padding/margin. But I'm working on some CSS to make the basic Single Choice field looks the same.

    With the Single Choice field, the spacing is automatic based on how narrow the screen is. And we would also be able to adjust it if we need to.

    Is there any other reason for why you're using the Button Radios widget other than the look of it? Just so I'm not missing anything while trying to solve this with the Single Choice field.

    Best regards,
    Lars

  • Profile Image
    jcie
    Answered on November 23, 2021 at 01:16 AM

    Hi Lars – Thanks for this reply; I missed it earlier today.

    And you got it, the main reason why we were using the Button Radios was because of how it looked. We are trying to achieve those nice round buttons for donation purposes.

  • Profile Image
    Lars_L
    Answered on November 23, 2021 at 07:53 AM

    Thanks for confirming that!

    I'll continue working on the CSS for the Single Choice field then.

    Best regards,
    Lars

  • Profile Image
    Lars_L
    Answered on November 23, 2021 at 09:46 AM

    Hello again,

    I believe I got it working the same way as the widget now. I have my test form here: https://www.jotform.com/213253073038953

    From my testing it behaves correctly on all devices and the spacing it automatic now.

    1637678684_619cfe5c951a7_

    I've included the new CSS below which should be added in the form's CSS.

    .form-radio-item input[type="radio"]:checked+label {
    background-color: #fff;
    color: #76507f;
    width: 100px;
    }

    .form-radio-item > label:after , input[type="radio"] , .form-radio-item > label:before{
        display: none;
    }

    div[data-component="radio"] > span{
    width: 102px !important;
        float: none !important;
    }

    .form-radio-item{
    display: inline-block;
        margin-right: 15px;
    border-radius:15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -o-border-radius: 15px;
    -ms-border-radius: 15px;
    -khtml-border-radius: 15px;
    width:102px !important;
    display: inline-block;
        height: 42px;
        position: relative;
        border: 1px solid #d5d5d5;
        box-shadow: 0 2px 2px rgba(0,0,0,.1);
        box-sizing: border-box;
    }

    .form-radio-item > label:hover{
        font: 700 13px/40px Lato,sans-serif;
        font-family: inherit;
        text-align: center;
        cursor: pointer;
        width: 100px;
        background-color: #FFFFFF;
        display: block;
        white-space: nowrap;
        text-overflow: ellipsis;
        padding: 0 3px;
        font-size: 16px;
        color: #76507F;
    }

    .form-radio-item > label{
    border-radius:15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -o-border-radius: 15px;
    -ms-border-radius: 15px;
    -khtml-border-radius: 15px;
        display: inline-block;
        margin-bottom: -5px;
        position: relative;
        height: 40px;
        font: 700 13px/40px Lato,sans-serif;
        font-family: inherit;
        text-align: center;
        color: #999;
        background: linear-gradient(to bottom,#fff 0,#eee 100%);
        cursor: pointer;
        -webkit-transform: translateZ(0);
        width: 100px;
        background: #76507F;
        color:#ffffff;
        font-size: 16px;
        padding: 0;
    }


    Please let us know if anything isn't looking or acting the way it should when you've been able to test this!

    Best regards,
    Lars

  • Profile Image
    calennora
    Answered on November 25, 2021 at 05:46 AM

    I need a coding guide to just fix my form issue its not responsive in tablets only please help me to fix this problem.
  • Profile Image
    Mike_G
    Answered on November 25, 2021 at 07:10 AM

    @calennora

    We encourage our users to open separate tickets for their concerns to avoid confusion.

    Since that is the case, I have moved your concern to another ticket that you can access by clicking this link: https://www.jotform.com/answers/3540931

    We will be responding to that ticket shortly. If you have any follow-up questions about your concern, please refer to that ticket. Thank you for understanding.