Configurable List Widget: How to align the radio buttons horizontally?

  • cformation
    Asked on November 15, 2017 at 7:52 PM

    Is there any way to make the radio buttons line up horizontally rather than vertically?

  • candy
    Replied on November 16, 2017 at 2:45 AM

    It is possible to make the radio buttons line up horizontally rather than vertically in a configurable list widget by injecting additional CSS codes. Please check the following guide to see how to inject CSS codes to the widgets: https://www.jotform.com/help/428-How-to-Inject-CSS-Codes-to-Widgets 

    I have cloned your form named "Rite of Election 2018" on my side as an example. I've added 2 more radio button options to the configurable list widget and I have seen that they aligned vertically as seen below:

    1510816383Screen Shot 2017 11 16 at 10 Screenshot 10

    I've injected following CSS codes in order to make them align horizontally as you can see in the following screenshot below:

    iframe#customFieldFrame_3 {

      width: 583px !important;

    }

    .radio-container {

      display: -webkit-box !important;

    }

    1510818044Screen Shot 2017 11 16 at 10 Screenshot 21

    Please see that, I have to delete some fields in order to make the radio buttons suit its container. 

    Moreover, there is also a second way. You can also check and clone the following test form on your side in order to investigate it: https://form.jotform.com/73191248323959 

    Please find the CSS codes below in order to align radio buttons horizontally as you can see in the following screenshot below:

    .checkbox, .radio {

    margin: 3px 0;

    min-width: 70px;

    }

    #list {

    width: 100%;

    }

    .radio-container {

    width: 100%;

    display: table;

    }

    .radio {

    display: table-cell;

    width: 1%;

    }

    1510818287Screen Shot 2017 11 16 at 10 Screenshot 32

    I hope this explanation helps. 

    Please try and let us know if you need any further assistance.