how can I get overflow scroll bars to be hidden unless needed when using jquery ui's resizable?

Question

Live sample: http://plnkr.co/edit/ivjvAZ?p=preview

I'm using jquery ui and angular to make a resizable directive for divs that are absolutely positioned.

The problem here is that the divs have scrollbars all of the time, even the mostly empty ones. I want the blue box to be resizable but not to have scroll bars when all the content is visible. I need the green box divs to be resizable and draggable, so the absolute positioning has to stay (doesn't it?).

How can I get these scrollbars to only show when needed?

Answer 1

Simply add this to your css:

.ng-scope .ui-resizable-e {
    right: 0px;
}

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

The .ng-scope part is to add specificity and also higher priority for the defined styles to the selected elements in your markup.

DEMO: http://plnkr.co/edit/IXicY5sjAI6CJVWUqFFU?p=preview

Explanation: The container div has overflow: auto; and the scroll handles have a width and height of 100% and a position of bottom: -5px; and right: -5px; (100% of the container and offset of some pixels on each direction) which always automatically push them out of the viewable part of their container, so the scrollbars always show up because of the overflow: auto; property.

Answer 2

Set overflow to 'auto'

overflow:auto;