Long text entry field:: Cols and Rows set in the field properties not working when Rich Text is enabled

  • ESFA
    Asked on January 20, 2019 at 8:20 PM

    Hi,

    I am trying to set the height of a text area field using CSS, however, it does not change the height of the field on the form.

    https://form.jotform.co/90196359789881

    The CSS code I am using is:

    #input_18 {
        width : 700px !important;
        height : 75px !important;
    }

    I have checked using Edge, Chrome and Firefox and all are displayed the same.

    I am also looking to set a standard font in the text area.  Can this be achieved?

    Hoping you can help.  Many thanks.


  • Kiran Support Team Lead
    Replied on January 21, 2019 at 3:13 AM

    This is due to the 'Editor Mode' being chosen for the Text area fields. Please note that the CSS code can be applied to the Long text entry field when it is in plain text. Since you have selected Rich Text for the field, it is displaying the editor by using a different plugin which is not allowing to change the width. Let me forward the thread to our backend team to check this up. If there is any news in this regard, you'll be posted here. Thanks!

    The other question related to standard font is moved to a separate thread and shall be addressed there shortly.

    https://www.jotform.com/answers/1706914

    Thanks!


  • ESFA
    Replied on January 21, 2019 at 4:33 PM

    Thanks Kiran.

    It would be very rare for the users of this form to enter a large amount of text.

    So a smaller height would be really useful if possible.  If not, that is fine also.

    Many thanks again.

  • serbay
    Replied on February 7, 2019 at 6:45 AM

    Hello ESFA,

    We have checked your forms and try to realize what you want.

    If you use these css for each rich text area , it's effect the fields in publish mode.

    ===================

    #cid_18 > div:nth-child(2) {

        width : 700px !important;

        height : 75px !important;

    }

    #cid_18 .nicEdit-panelContain {

        width : 700px !important;

    }

    ===================


    You must inject these css for each inputs , 

    CSS must looks like  for 2 inputs ( input_18 and input_21 ) ::


    ===================

    #cid_18 > div:nth-child(2) {

        width : 700px !important;

        height : 75px !important;

    }

    #cid_18 .nicEdit-panelContain {

        width : 700px !important;

    }


    #cid_21 > div:nth-child(2) {

        width : 700px !important;

        height : 75px !important;

    }

    #cid_21 .nicEdit-panelContain {

        width : 700px !important;


    }

    ==================


    Screenshots of result (cloned form) :: 1549539830Screen Shot 2019 02 07 at 2 Screenshot 10


    Hope this helps you.

    Please do not hesitate to contact again , if you need any further assistance.

    Regards.