How to rearange the radio button to be over its label?

  • Profile Image
    misscairo
    Asked on December 25, 2021 at 11:33 AM


    Screenshot
  • Profile Image
    Ahmed_S
    Answered on December 25, 2021 at 11:47 AM

    Greetings,

    Thank you for contacting Jotform Support.

    Please allow some time to check if this can be rearranged with a CSS code and will get back to you shortly with the updates.

    Thank you for you patience.

  • Profile Image
    Ahmed_S
    Answered on December 25, 2021 at 02:15 PM

    Greetings,

    Please inject the below CSS code into your form by following this guide.

    How to Inject Custom CSS Codes

    #label_input_30_0,#label_input_30_1,
    #label_input_30_2,#label_input_30_3,
    #label_input_30_4,#label_input_30_5
    {
      top: 25px !important;
    }

    #label_input_30_0::before,#label_input_30_1::before,
    #label_input_30_2::before,#label_input_30_3::before,
    #label_input_30_4::before,#label_input_30_5::before{
      margin-left: 50% !important;
      top: -25px !important;
    }

    #label_input_30_0::after,#label_input_30_1::after,
    #label_input_30_2::after,#label_input_30_3::after,
    #label_input_30_4::after,#label_input_30_5::after{
      margin-left: 50% !important;
      top: -22px !important;
    }

    The result will be like this screenshot.

    1640459570_61c76d32947e2_1.png

    Please let us know if you need further assistance, we are happy to help.

  • Profile Image
    misscairo
    Answered on December 29, 2021 at 12:28 AM

    I injected it after the code that is in there already but it didn't seem to do anything?


    Is it possible to also do this for multiple questions as well - but not necessarily all radio buttons?


    Many thanks

  • Profile Image
    Christian_A
    Answered on December 29, 2021 at 04:26 AM

    Hi there!

    Can you please try this custom CSS code instead. I cloned your form, injected this code and it seem to have worked.

    #label_input_31_0, #label_input_31_1, #label_input_31_2, #label_input_31_3, #label_input_31_4, #label_input_31_5{
    position: relative;
    left: -30px!important;
    top: 25px!important;
    }

    *

    1640769736_61cc28c8633f3_radio.gif

    Is it possible to also do this for multiple questions as well - but not necessarily all radio buttons?

    May we please know which fields you're referring to and what change exactly are you try to achieve?


    Please let us know if this works for you or if you need further assistance. Thank you!

    Regards,


  • Profile Image
    misscairo
    Answered on January 11, 2022 at 05:37 PM

    Hello there


    The following questions will need to be in the above format. Is there anyway to just make this CCS for those filling the form on a desktop, and leave it as standard for mobile version?


    Page 3

    It is clear why The People of Cabaret collects my information on my skills, experience and identity

    I believe all the information that the form collected was necessary

    I believe the form captures the right information for me to hear about opportunities that I would be interested in

    I believe The Directory is a useful resource to gain access to job opportunities


    Page 5

    The above process was clear when signing up to The Directory

    I am satisfied with The Directory Process

    I would rather hear about ALL projects

    I would rather have more autonomy over my own judgment on safety

    I would be interested in being on The Panel who assesses the briefs that come though

  • Profile Image
    Christian_A
    Answered on January 11, 2022 at 11:33 PM

    Hi,

    For the questions above, you can spread them horizontally then use the same custom CSS codes.

    1641962327_61de5b57d09ae_Screen Shot 202

    #label_input_30_0, #label_input_30_1, #label_input_30_2, #label_input_30_3, #label_input_30_4, #label_input_30_5{
    position: relative;
    left: -30px!important;
    top25px!important;
    }
    #label_input_104_0, #label_input_104_1, #label_input_104_2, #label_input_104_3, #label_input_104_4, #label_input_104_5{
    position: relative;
    left: -30px!important;
    top25px!important;
    }
    #label_input_29_0, #label_input_29_1, #label_input_29_2, #label_input_29_3, #label_input_29_4, #label_input_29_5{
    position: relative;
    left: -30px!important;
    top25px!important;
    }
    #label_input_32_0, #label_input_32_1, #label_input_32_2, #label_input_32_3, #label_input_32_4, #label_input_32_5{
    position: relative;
    left: -30px!important;
    top25px!important;
    }
    #label_input_38_0, #label_input_38_1, #label_input_38_2, #label_input_38_3, #label_input_38_4, #label_input_38_5{
    position: relative;
    left: -30px!important;
    top25px!important;
    }
    #label_input_41_0, #label_input_41_1, #label_input_41_2, #label_input_41_3, #label_input_41_4, #label_input_41_5{
    position: relative;
    left: -30px!important;
    top25px!important;
    }
    #label_input_42_0, #label_input_42_1, #label_input_42_2, #label_input_42_3, #label_input_42_4, #label_input_42_5{
    position: relative;
    left: -30px!important;
    top25px!important;
    }
    #label_input_43_0, #label_input_43_1, #label_input_43_2, #label_input_43_3, #label_input_43_4, #label_input_43_5{
    position: relative;
    left: -30px!important;
    top25px!important;
    }
    #label_input_72_0, #label_input_72_1, #label_input_72_2, #label_input_72_3, #label_input_72_4, #label_input_72_5{
    position: relative;
    left: -30px!important;
    top25px!important;
    }
    #label_input_44_0, #label_input_44_1, #label_input_44_2, #label_input_44_3, #label_input_44_4, #label_input_38_5{
    position: relative;
    left: -30px!important;
    top25px!important;
    }


    I am still confirming with our team of it's possible to leave the questions vertically arranged when the form is being used on a smartphone and will get back to you as soon as I have an update.

    Thanks & regards,


  • Profile Image
    misscairo
    Answered on January 12, 2022 at 12:12 AM

    Thank you!


    Can the buttons be centred instead aligned to the left?

  • Profile Image
    Christian_A
    Answered on January 12, 2022 at 02:44 AM

    Hi again,

    You can use the CSS code below to keep the fields of topic vertically arranged when the form is viewed through a smartphone and to center-align the radio buttons above the texts.

    1641973375_61de867f0698a_CSS.gif

    .form-multiple-column .form-radio-item label,
    .form-multiple-column .form-radio-item .editor-container{
    display: block !important;
    width: 100%;
    position: unset !important;
    text-align: center;
    padding: 0;
    }
    .form-multiple-column .form-radio+label:after,
    .form-multiple-column .form-radio+span:after {
    display: block;
    margin: 0 auto;
    top: 3px;
    left: calc(50% - 7px);
    }
    .form-multiple-column .form-radio+label:before,
    .form-multiple-column .form-radio+span:before {
    position: unset !important;
    display: block;
    margin: 0 auto 4px auto;
    }
    .form-radio-item{
    padding-left:10px;
    padding-right:10px;
    }
    @media screen and (max-width:480px){
    .form-radio-item {
    padding-bottom: 8px;
    width: 100%;
    }
    .form-multiple-column .form-radio-item label,
    .form-multiple-column .form-radio-item .editor-container {
    text-align: left;
    }
    .form-multiple-column .form-radio+label:before, .form-multiple-column .form-radio+span:before {
    position: absolute !important;
    display: block;
    }
    .form-multiple-column .form-radio-item label, .form-multiple-column .form-radio-item .editor-container {
    padding-left: 20px;
    }
    .form-multiple-column .form-radio+label:after,
    .form-multiple-column .form-radio+span:after {
    left: 3px;
    }
    }


    Please let us know if you need further assistance. Thank you!

    Regards,