[Resolved] custom field multiline text stuck on horizontal scroll. Overflow-y not working

[Author]

Posts

[davidm-13]

I'm trying to create a vertical scroll text box for a multi-line field without success.
Shows only vertical scroll.
Attached html, css and frontend.
Thanks for any help.

[Luo Yang]

Hello,

It needs custom CSS codes, I have searched it in google, and found some related results, for example:
https://stackoverflow.com/a/26647045
For your reference.

More help:
hidden link

[davidm-13]

Hi Luo,
Thanks for your reply. I tried the css in the link you gave, but the results are exactly the same as the above screenshot.
I've spent many hours trying to sort this out without any success. Really appreciate if you could take a look.
Thanks

[Luo Yang]

It is a custom CSS problem, please provide a test site with the same problem, also point out the problem page URLs, I need to test and debut it in a live website. thanks

[Waqar]

Hi,

Thank you for sharing these details.

Luo is on vacation, so I'll be following up on this ticket.

During troubleshooting, I noticed that the website has a CSS style "white-space: nowrap;" which makes the text in the comment box, show in a single line, without any next line-wrapping.
( screenshot: hidden link )

You can override that for the text inside the div with class "cmnt-box", by including the "white-space: normal;" property in the existing custom CSS code in the template:

.cmnt-box {
    float: left;
    width: 300px;
    overflow-y: auto;
    max-height: 300px;
    white-space: normal;
}

regards,
Waqar

[davidm-13]

My issue is resolved now. Thank you!