0

I'm using jquery ui resizeable on a scrollable list. The jquery part worked well but the "grip" to resize it scrolls along with the list instead of staying positioned absolutely to the list even though the parent is already relative positioned.

I'm not sure what's wrong with the CSS.

Made a fiddle to illustrate: http://jsfiddle.net/2pg7r/

Would appreciate any help or hints!

$( "#unlNotification" ).resizable();

<div id="container">
    <ul id="unlNotification"style="height: 127.7px;">
        <li>qwe</li>
        <li>qwe</li>
        <li>qwe</li>
        ...
    </ul>
</div>

.ui-icon {
    background-color: black;
    width: 20px;
    height: 20px;
}
#container, .ui-resizable {
    position: relative;
}
.ui-resizable {
    overflow: auto;
}
ul, li {
    list-style: none outside none;
}

.ui-resizable-se {
    bottom: 1px;
    cursor: se-resize;
    height: 12px;
    right: 1px;
    width: 12px;
    position: absolute;
}

Edit: Thanks everyone for your help! I realized what i did wrong by looking at both your codes and amended them to include the query part: http://jsfiddle.net/2pg7r/4/ in case anyone needs to use it like that.

I can only pick one as the correct answer so I'll just pick the first one since it's both the same (Sorry!) But thank you!

eruina
  • 853
  • 3
  • 9
  • 18
  • First of all, that is not a valid html structure, div shouldn't be direct child of an ul. http://stackoverflow.com/questions/8557869/is-this-html-structure-valid-ul-div-li-li-div-li-li-div – Vladislav Stanic Nov 25 '13 at 12:15
  • I copied the wrong code sorry. But the div will be automatically added by jquery-ui when initializing resizable. – eruina Nov 26 '13 at 02:17

2 Answers2

1

I placed div outside of ul and moved .ui.resizable-se 20px from right. Is this what you want?

<ul id="unlNotification"style="height: 127.7px;">
    <li>qwe</li>
    <li>qwe</li>
    <li>qwe</li>
    ...
</ul>
    <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div>

css

.ui-resizable-se {
    right: 20px;
}

jsfiddle

Vladislav Stanic
  • 795
  • 8
  • 13
1

it will help you

http://jsfiddle.net/2pg7r/3/

#container {
    position: relative;
}

.ui-resizable-se {
    bottom: 1px;
    cursor: se-resize;
    height: 12px;
    right: 1px;
    width: 12px;
    position: absolute;
    right:20px;
}
Andrii Gordiichuk
  • 1,783
  • 1
  • 12
  • 10