How can I make the text section in the sliders more wide?

  • Chelseareiners
    Asked on March 25, 2020 at 1:08 PM

    I'd like these to go all the way across the screen.

    Jotform Thread 2225364 Screenshot
  • Bojan Support Team Lead
    Replied on March 25, 2020 at 2:51 PM

    Greetings and thank you for your message.

    To achieve this, please go to the Scale Rating Properties, and from the General tab set Label Alignment to Top:

    How can I make the text section in the sliders more wide? Image 1 Screenshot 30

    After that, please add the following CSS:

    .form-sub-label-container, .form-sub-label-container table {
      width: 100%;
    }

    This will result in the following:

    How can I make the text section in the sliders more wide? Image 2 Screenshot 41

    To see how to inject custom CSS, please use the following link:
    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Please let us know if this will work for you.

  • Chelseareiners
    Replied on March 25, 2020 at 2:53 PM

    I want the label next to the slider, not on top. Can I have the label take up 50% and the slider take up 50%?

  • Bojan Support Team Lead
    Replied on March 25, 2020 at 4:04 PM

    Thank you for your reply.

    In this case, please add the following CSS:

    .form-label-left {
      float: left !important;
      width: 50% !important;
    }
    .form-sub-label-container, .form-sub-label-container table {
      width: 50% !important;
    }

    You can always adjust the width of the label and slider by changing the width: 50% to desired values.

    Please let us know if this works better for you.