#9119 closed bug (wontfix)

Opened February 25, 2013 07:39AM UTC

Closed February 25, 2013 07:46PM UTC

resizable div with scrollbar : wrong icon position

Reported by:	bartours	Owned by:	bartours
Priority:	minor	Milestone:	none
Component:	ui.resizable	Version:	1.10.1
Keywords:		Cc:
Blocked by:		Blocking:

Description

if you scroll down (or right), icon (in the bottom right corner) positions don't follow scrollbar.

Sample code :

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Resizable - Default functionality</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
    <style>
        #resizable { width: 150px; height: 150px; padding: 0.5em; overflow:auto;}
        #resizable h3 { text-align: center; margin: 0; }
    </style>
    <script>
        $(function() {
            $( "#resizable" ).resizable();
        });
    </script>
</head>
<body>
    <div id="resizable" class="ui-widget-content">
        <h3 class="ui-widget-header">Resizable</h3>
        sydsadsad sad sa re otz tj lkdsjflksajdsa jdsajewq jusjfdsylkfjdslkfjdslitrewoirjewpomdscposjfdsoi jfdslkfjdslk jfdslk jfdslkfjldskjflewi dsgf ztr zd
    </div>
</body>
</html>

http://jsfiddle.net/nmsj3/

Attachments (0)

Change History (3)

Changed February 25, 2013 12:15PM UTC by tj.vantoll comment:1

owner:	→ bartours
status:	new → pending

Fixed the test case to show this: http://jsfiddle.net/tj_vantoll/6Wnrh/.

I'm a bit torn on whether this actually a bug because making an element both resizable and scrollable seems like bad UX - the scroll bar and resizable handles are bound to overlap. You can easily accomplish what you're looking for with a wrapping div - http://jsfiddle.net/tj_vantoll/e6W8j/.

Could you explain why you need the scrollable element to be resizable as well?

Thanks.

Changed February 25, 2013 07:32PM UTC by bartours comment:2

status:	pending → new

Thank you for your solution (I think you should give this example on component page)

I use scrollable div because it contains a "canvas" which grow (but it can't go out screen). This is a small part of window and i give to user the possibility to customize his page because all items/sections on page are independent and not still useful for some users.

Changed February 25, 2013 07:46PM UTC by scottgonzalez comment:3

resolution:	→ wontfix
status:	new → closed

It sounds like using a wrapper is fine for your use case and I don't think we want to be handling scroll events to move the handles around, so I'm going to close this.