The Text(HTML) field is overlapping when embedding div.

  • Profile Image
    symphonicdist
    Asked on January 28, 2014 at 03:22 PM

    We have a couple of forms that have scrolling text boxes and we save them and the forms look great but then all of a sudden and randomly, the scrolling text box code that we add is taken out and it messes up the form. Each and every time we do it, save it, it ends up looking like crud. We used this helpful ticket to create: http://www.jotform.com/answers/93326-Scrolling-Text-Box

     

    It worked great for many months but now all of sudden it doesnt. Furhter, we've done some saving via jotform and sometimes get a bug. Can you guys fix or advise on this????

  • Profile Image
    BDAVID
    Answered on January 28, 2014 at 04:22 PM

    Hi, sorry for any inconvenience, I will report this issue to our second level since this was working fine in the pass. Meanwhile please check this thread in which it is recommended to add  overflow:scroll;  style.

  • Profile Image
    symphonicdist
    Answered on January 28, 2014 at 04:25 PM

    Thanks for report.... the code that we have is: <div style="width: 650px; height: 300px; background-color: #ffffff; overflow: scroll;"> RIGHT NOW its on the form but we'll see if it stays. Does that code look correct?

  • Profile Image
    symphonicdist
    Answered on January 28, 2014 at 04:27 PM

    Oh also it seems to happen if any form that we have is filled out then it seems to throw form out (perhaps try that in terms of beta testing). Let me know if you have figured out what the bug may be

  • Profile Image
    symphonicdist
    Answered on January 29, 2014 at 03:57 PM

    Hi there is there any progress? Its kind of a pain to our business as i have to continuosly update the forms daily. Please advise.

  • Profile Image
    EltonCris
    Answered on January 29, 2014 at 04:57 PM

    @symphonicdist

    The scrolling text solution you are using won't work in the form builder anymore due to the some limitation applied on the free text element to prevent XSS or any malicious code injection.

    However, you can try this alternative solution. Inject this CSS codes to that form. Guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Use this CSS codes:

    #id_23{

    padding:0;

    }

    #cid_23 {

    height: 400px;

    overflow-y: scroll;

    width: 100%;

    }

    Result:

    Regards!

  • Profile Image
    symphonicdist
    Answered on January 29, 2014 at 05:25 PM

    Thanks a ton for your help there ! Sorry to keep buggin...

    We actually have another form that has about 3 scrolling text boxes (lol dont hate us for that i hope :)

    Is there a different code you recommend for that type of form?


    Here is this form just in case: http://form.jotformpro.com/form/33109256759966

  • Profile Image
    EltonCris
    Answered on January 29, 2014 at 05:46 PM

    @symphonicdist

    Use this for that form:

    #id_39, #id_40, #id_31{

    padding:0;

    }

    #cid_39, #cid_40, #cid_31 {

    height: 400px;

    overflow-y: scroll;

    width: 100%;

    }

    Basically, you have to use the field IDs of the text elements (bolded on the codes above). If you're going to apply it with multiple text fields, just separate the field ID's with a comma.

    Here's an example on how to get field ID using Chrome Browser's Inspect Element.

    Let us know if you have further questions.

    Regards!

  • Profile Image
    symphonicdist
    Answered on January 29, 2014 at 05:54 PM

    A W E  S O M E.. thanks for your help