Reducing the width of background color when clicking to choose

  • Atikhom
    Asked on February 14, 2020 at 9: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.

    Jotform Thread 2163466 Screenshot
  • BJoanna
    Replied 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

  • Atikhom
    Replied 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?

  • roneet
    Replied on February 14, 2020 at 11:25 PM

    Please allow me some time to check this.

    Thanks.

  • roneet
    Replied on February 15, 2020 at 1: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

    Reducing the width of background color when clicking to choose Image 10

    Let us know if you have further questions.

    Thanks

  • Atikhom
    Replied on February 15, 2020 at 2: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 Screenshot 10

  • Vanessa_T
    Replied on February 15, 2020 at 3: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;

    }

  • Atikhom
    Replied on February 15, 2020 at 3: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.

  • Vanessa_T
    Replied on February 15, 2020 at 6: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.

    Reducing the width of background color when clicking to choose Image 10

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