How to make radio other option text box align with text in mobile views?

  • Profile Image
    vtiportal
    Asked on August 26, 2017 at 06:45 PM

    I have 3 questions (see attached screenshots):

    1. How to make radio other option text box align with text above it?

    2. Also other option text box overlaps radio button in mobile. Any solution?

    3. And how can I increase the width of this other option text box, for potentially longer text entry?

  • Profile Image
    BDAVID
    Answered on August 26, 2017 at 10:45 PM

    I believe you are referring to this form: http://www.jotform.ca/form/72368083763262 

    Please inject the following CSS code to fix those three issues with the "Other" option of the Multiple Choice fields: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

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

    .form-radio-other-input{

    width: 95% !important;

    margin-left: 2px !important;

    }

    .form-single-column{

    width: 100% !important;

    }

    }

    Result: https://form.jotformpro.com/72378255180964 

    Let us know if you need more help.

  • Profile Image
    vtiportal
    Answered on August 27, 2017 at 04:07 PM

    Thanks. Only works on the larger iphones and android phones. Does not work on smaller/older iphones 4 and 5, and even on the latest window phones.

    And on the working form mobile preview, the text field over radio button overlap still shows.

  • Profile Image
    jonathan
    Answered on August 27, 2017 at 04:52 PM

    I was able to see it was not working when using older mobile device with smaller screen viewer.

    It may need adjustment on the CSS codes. Allow me some more time to identify the needed CSS codes. I'll get back to this shortly.

  • Profile Image
    jonathan
    Answered on August 27, 2017 at 05:23 PM

    We apologize for the inconvenience caused. After further investigation, it turned out this is a bug in the Radio button Other option when using mobile browser.

    I was able to reproduce the issue even when just using a basic test form on any mobile browser.

     

    I have escalated a bug ticket report to the higher team support. We will notify you here once we fixed the issue.