Opened 7 years ago

Closed 7 years ago

#9119 closed bug (wontfix)

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/

Change History (3)

comment:1 Changed 7 years ago by tj.vantoll

Owner: set to bartours
Status: newpending

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.

comment:2 Changed 7 years ago by bartours

Status: pendingnew

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.

comment:3 Changed 7 years ago by Scott González

Resolution: wontfix
Status: newclosed

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.

Note: See TracTickets for help on using tickets.