Reducing the width and length of background when clicking or choosing

  • pratchakhun
    Asked on February 14, 2020 at 8:18 AM

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

    Thank you.


    Jotform Thread 2163375 Screenshot
  • AshtonP
    Replied on February 14, 2020 at 8:28 AM

    Thank you for writing to Jotform support.

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

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

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

  • Atikhom
    Replied on February 14, 2020 at 9:15 AM

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

  • Girish JotForm Support
    Replied 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.

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

  • Ivaylo JotForm Support
    Replied 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.

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

  • jonathan
    Replied on February 14, 2020 at 8: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.

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

  • John Support Team Lead
    Replied 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:

    Reducing the width and length of background when clicking or choosing Image 10

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

  • Girish JotForm Support
    Replied 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.

  • jonathan
    Replied on February 16, 2020 at 1: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 Screenshot 10


    Let us know how it goes.