Can I please get code to turn a text-box 'scrollable'?

  • Benflips
    Asked on July 8, 2019 at 7:31 PM

    Hi - a long time ago I had some text boxes on my form that were set to a particular height, and had a scroll bar visible to read all of the content.

    Could you please provide me with a sample of such code again?

    I know how to use developer tools to identify the text box.

    I just need to know how to force-set the height of the box, and then have a scroll bar visible and functional.

    Thanks in advance.

  • Ashwin JotForm Support
    Replied on July 8, 2019 at 10:05 PM

    Instead of adding a textbox field, you should add a text area / long text entry field in form. This will display a scroll bar if the text content exceed the textarea height. You can also set the number of rows in the long ext entry field as well. Please check the screenshot below:

    1562637920textarea1 Screenshot 10

    Hope this helps.

    Do try it out and get back to us if you have any question.

  • Victoria_K
    Replied on July 9, 2019 at 2:39 AM

    Hi!

    Can you please let us know what is the form and field in it to apply codes to?

    Basically, you can use something like this:

    .form-html {

      height: 100px;

      overflow-y: scroll;

    }

    Guide: How-to-Inject-Custom-CSS-Codes

    1562654361Untitled2 Screenshot 10

  • Benflips
    Replied on July 9, 2019 at 6:21 PM

    I will try this.

    However I would ideally like code that I can apply to just one given text field, rather than something that will apply to the entire form.

    I would also like to be able to colour the border and put in a border radius of 20px.

    And I would like the scroll bar to be permanently visible - in the suggestion above, it looks like the scroll bar is only visible when a client actively is navigating over the text field.

  • David JotForm Support Manager
    Replied on July 9, 2019 at 7:54 PM

    It is possible to target the specific text field, you can inspect the element to find the ID:

    1562716042inspect Screenshot 10

    So, this would be the code to target just that html field: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    #id_16 .form-html {

      height: 100px;

      overflow-y: scroll;

    }

    In regards to setting a color to the border, and also a border radius, please try with this code:

    #cid_16{

        border: solid 6px;

        border-color: blue;

        border-radius: 8px;

    }

    Result: https://form.jotform.com/91897331500962

    1562716282border Screenshot 21

    In regards to the scrollbar visibility, I have checked it in Chrome and Firefox browser, and it shows all the time. What browser are you using?