Text that is extending beyond the tables.

Hi there,

I just live chatted with support, but they recommended I ask my question here instead so I am hoping someone can help me. :)

Originally about a week ago, I emailed a hard copy form with tables and a sliding scale to Customer Service and asked what was the best way to duplicate it in a JotForm, and amazingly, they coded one (for me to duplicate) and it's ALMOST perfect. 

However, on several pages, the text extends beyond the table (screenshot) and I am not sure how to resolve that. Since I am not the one that originally coded this form, I don't know how to amend it for something like this. :) 

Does anyone know how to fix this? 

Thanks!!!

Melissa 

I reviewed your form but so far I could not see the problem you described on the form.

The text content of the table were not over extending beyond the table even when I resized the browser manually. The text auto wrap within the table cell in the TEXT field so they were not going beyond the table/cell.

See screenshot below

Perhaps I misunderstood the issue. I also could not see the issue on the screenshot you provided.

Please describe the steps how to recreate the issue and we will take a look again.

Thank you.

Hi. 

I am not sure why you can't see the problem on your end - that is strange. I see it every time I preview the form on pages 12-15. 

Here is a screen shot to help you further identify the problem. As you can see here, page 12 of my form, the text extends beyond the table. 

Thanks,

Melissa

The way to replicate this is to preview the form, and look at pages 12-15. 

https://form.jotform.com/73466626091158

Thank you for the clarification and explanation how to see the issue. I do see it now.

I apologize for not seeing it earlier.

Allow us some more time to figure out a workaround fix. I will update you here as soon as I can.

No need to apologize at all! :) I just appreciate your help!

Thank you so much!

The fix I found was adjusting the column height set in the custom injected CSS codes.

Look for this CSS codes on your form.

.form-line.form-line-column {

    top : -34px;

    margin-top : 0;

    left : 36px;

    padding : 0;

    width : 156px;

    border : 1px solid lightgray;

    height : 250px !important;

}

change the number for the height to 265px

.form-line.form-line-column {

    top : -34px;

    margin-top : 0;

    left : 36px;

    padding : 0;

    width : 156px;

    border : 1px solid lightgray;

    height : 265px !important;

}

you can check it on my test form https://form.jotform.com/73536325563964

Let me know if this did not work for you.

Jonathan - THANK YOU SO MUCH!!!!!! That is exactly how to fix it! :) :) :) 

Thank you again, I would have never figured that out on my own!

Thank you for taking the time updating us on the status. We're glad to know it works. :~)

Contact us anytime should you require assistance again.

Cheers