JQuery UI: resizable div with scrollbar

Question

I made a resizable div and now I want a scrollbar (y-axis) when the user resized it too much. When there is enough space for the rows of text, the scrollbar should disappear. I thought this could be done with overflow-y: auto but it didn't.

What it should look like enter image description here

What it actually looks like

https://jsfiddle.net/1wk4mevo/4/

As you can see, there is always a scrollbar even if there is enough space for all content in the div. How can I fix this? (code can be seen in the fiddle)

MyStream · Accepted Answer · 2015-07-11 07:16:49Z

3

Change the CSS for your handle. If you drop the height from 7px to 0px the scrollbar goes away. The element is within the box, so the 'extra' height is causing the scrollbar to appear at all times.

So, I tried removing the bottom:-5px; See below for a new fiddle.

https://jsfiddle.net/1wk4mevo/8/

Overriding this CSS works:

.ui-resizable-s {
    bottom:0px;   
}

And produces the result you're looking for.

answered Jul 11, 2015 at 7:16

MyStream

2,5511 gold badge16 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Klipp Ohei Over a year ago

Thank you very much! and well explained :)

Collectives™ on Stack Overflow

JQuery UI: resizable div with scrollbar

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related