Reducing the width and length of background when clicking or choosing

  • Profile Image
    pratchakhun
    Asked on February 14, 2020 at 08:18 AM

    Please give me advice on how to reduce the width and length of background color when clicking to choose. 

    Thank you.


    Screenshot
  • Profile Image
    AshtonP
    Answered on February 14, 2020 at 08:28 AM

    Thank you for writing to Jotform support.

    We are checking your form and will get back to you with an update.

  • Profile Image
    AshtonP
    Answered on February 14, 2020 at 09:00 AM

    Thank you for your patience.

    You can add the below CSS code to your form:

    .form-line-active {

       width: 90%;

    }

    Here is a user guide: How-to-Inject-Custom-CSS-Codes

    Let me know if you need any further help from our end.

  • Profile Image
    Atikhom
    Answered on February 14, 2020 at 09:10 AM

    Thank you, but the width remains the same. Please give me further advice. It's shorter. The length is not the problem of the form. The active background is too wide. I want to reduce the width.

  • Profile Image
    Atikhom
    Answered on February 14, 2020 at 09:15 AM

    As you can see from the scheenshot, it's shorter, but it remains so wide that overlaps the question.1581689636reducing the width.png

  • Profile Image
    gerardw
    Answered on February 14, 2020 at 10:12 AM

    This yellow color is the highlight effect that appears for each question. By default, this is the length and width.

    Could you check and let us know if you want the width to be only up to the height of the texts?

    We'll check if it's possible to change.

  • Profile Image
    Atikhom
    Answered on February 14, 2020 at 10:19 AM

    I'd appreciate it if you could reduce the width of the highlight effect only up the height of the texts. Thank you.

  • Profile Image
    IvayloK
    Answered on February 14, 2020 at 11:42 AM

    Can you please try to use the following CSS code:

    .form-line-active {

       height: 0px;

    }

    It will reduce the height of the highlight effect.

    Please give it a try and let us know, if it works for you.

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

    I tried, but it looked like this, which is not OK. I tried to adjust 'px' though. Please give me more advice. Thank you.1581727080reducing the height.png

  • Profile Image
    jonathan
    Answered on February 14, 2020 at 08:20 PM

    I was able to see the issue as well with the CSS codes added.

    .form-line-active {

       height: 0px;

    }

    We will check further on this for the proper resolution. We will update you here shortly.

  • Profile Image
    Atikhom
    Answered on February 14, 2020 at 09:30 PM

    I'm not sure if the problem is because the labels were hidden. I used "Text" to create the labels since this allowed me to underline texts.

  • Profile Image
    JohnRex
    Answered on February 14, 2020 at 10:38 PM

    Like my colleague has mentioned, the highlight's width corresponds to the width of the field itself. So if you want to shorten it, you'll shorten the width of the field itself.

    Please try adding this custom CSS code instead:

    .form-line-active {

       width: 50%!important;

    }

    This reduces the width of the field by 50% when selected, thus making the highlights appear shorter. Here's how it works:

    15817378812163375.gif

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

    Thank you. Now I don't think I have any problem with the width. But I think the height of the highlight effect is not proper. I hope you can help me deal with this problem.

  • Profile Image
    gerardw
    Answered on February 15, 2020 at 12:41 AM

    I understand that you want to reduce the background width of the highlight effect. As far as I can see the width cannot be reduced, only the length can be adjusted with the field width.

    But, let me check on further if there can be any suitable codes to reduce the width of the highlight effect.

  • Profile Image
    jonathan
    Answered on February 16, 2020 at 01:59 PM

    Please try using these CSS codes instead.

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

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

      background-color: #ffffe0 !important;

      width: 50% !important;

    }

    Unfortunately, the overall width can be resized only at certain %. Like in this I set it at 50%.

    1581879571zzz 2020-02-17 02.56.59.png


    Let us know how it goes.