How can I display the vertical scrollbars on the textarea with rich text format

  • Profile Image
    robdelsol
    Asked on January 25, 2018 at 10:35 PM

    Have several story submission forms, basically the same, with the "long text entry" option in "Rich Text Mode". Stories are 10,000 words.

    This long text field does NOT scroll in "Rich Text" (as it does with "Plain Text" option). 

    Thus, when submitter enters their text in this field, it "pushes" all the other form elements and the submit button down beyond view so NO further entry and/or submission is possible. I don't see an option for forcing a scroll...

    However, THIS Form (your help form) that I am using to submit for help, DOES HAVE THE SCROLL and seems a cleaner - How can I use THIS form element? 

    Below is link for the forms we are using.

    https://sites.google.com/a/newmyths.com/nmwebsite/submissions/sub-2

        

  • Profile Image
    Jim_R
    Answered on January 26, 2018 at 01:57 AM

    We can approach this problem in 2 ways:

    1. Using CSS - I'm currently fiddling around with the CSS needed to automatically show the vertical scrollbar and will get back to you as soon as I have it ready.

    2. Or, you can use a better field. Both the CKEDITOR and the TINYMCE widgets work in a similar way as a rich text field, but these fields automatically have the vertical scrollbar for longer content.

    I'll get back to you with the CSS codes whether I'm successful or not. For the time being, try checking out those two widgets that I mentioned and decide whether you'll use them or if you'll stick to using the Long Text Entry field with Rich Text enabled.

  • Profile Image
    Jim_R
    Answered on January 26, 2018 at 02:04 AM

    The CSS codes below will only apply to this form https://www.jotform.com/71806428270961

    That's the first form on the page you linked on your post so that's the one I used as an example. To automatically show the vertical scrollbar for long content, inject the following CSS codes to your form builder:

    #cid_8 > span > div:nth-child(2) {

      overflow-y: scroll !important;

      height: 358px !important;

    }

    Complete guide: How-to-Inject-Custom-CSS-Codes

    Result:

  • Profile Image
    robdelsol
    Answered on January 26, 2018 at 02:42 PM

    Thank you for your prompt reply and elegant fix - you people are awesome!