Safari & Mobile View of Form Off

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

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

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!

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

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

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:

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

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

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

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.

Thanks for confirming that!

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

Best regards,
Lars

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.

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

@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.