Reducing the width of background color when clicking to choose

  • Profile Image
    Atikhom
    Asked on February 14, 2020 at 09:53 AM

    Please give me advice on how to reduce the width of background color which appears when clicking to choose. I think it's too wide that it overlaps other texts. 

    Regards

    Ken

    PS - I've reposted as my previous post disappeared. This may have been due to my account edition.

  • Profile Image
    BJoanna
    Answered on February 14, 2020 at 10:44 AM

    I'm sorry but I am not sure if I understood your question. Do you want to reduce the width of the highlight effect? 

    How long do you want it to be? 

    You can also disable it. 

    Managing Field Error States and Highlight Effect

  • Profile Image
    Atikhom
    Answered on February 14, 2020 at 11:07 PM

    Yes, I think the highlight effect above and below the texts are too much. Can I reduce it?

  • Profile Image
    roneet
    Answered on February 14, 2020 at 11:25 PM

    Please allow me some time to check this.

    Thanks.

  • Profile Image
    roneet
    Answered on February 15, 2020 at 01:49 AM

    Were you referring to this form?

    https://www.jotform.com/200434601590041

    I have injected custom CSS in my cloned form. Please take a look at my cloned form if this is what you would like to implement on your form too.

    https://form.jotform.com/200448749135963

    1581749379888888888.gif

    Let us know if you have further questions.

    Thanks

  • Profile Image
    Atikhom
    Answered on February 15, 2020 at 02:16 AM

    Yes. But the height of the highlight effect should cover only the selected answers. The default effect is too high (see the screenshot below) that it almost overlaps the question. Can I make the height of the highlight effect only up to the height of the texts of the selected option? The background color looks fine to me (as is the case for "1. Uncount noun 'staff'"). Can I make the highlight effect of the same size as the background color?1581750663Screen Shot 2563-02-15 at 14.0

  • Profile Image
    Vanessa_T
    Answered on February 15, 2020 at 03:15 AM

    The highlight is actually per question and not per option.

    If you want to remove the highlight per question, please add the CSS below:

    li.form-line.form-line-active { background-color: transparent !important; }

    Then to highlight only the label of the selected radio button option, please use the CSS below:

    li.form-line-active[data-type="control_radio"] input[type="radio"]:checked+label {

      background-color: #ffffe0 !important;

    }

  • Profile Image
    Atikhom
    Answered on February 15, 2020 at 03:58 AM

    Thank you, Vanessa. It works out very well. The highlight size is perfect. One more question, what should I do if I want to highlight the label of all the radio button options on the same level, including the other option which is not selected. Thank you.

  • Profile Image
    Vanessa_T
    Answered on February 15, 2020 at 06:46 AM

    What you want is actually the default behavior of the form. You can remove the custom css that I have provided you.

    However, I noticed previously that in your form, you were using a Text to display the label instead of using the Single Choice's label.

    1581767109388.png

    Please use the Single Choice's label instead then remove the Text field.