Search code examples
jquery-uijquery-ui-resizable

Add handle icon to jquery resizable

I have a div that needs to be height resizable. Adding the resizable bar at the top was not an issue however I also need to add an icon on the left side of the gray bar so it's more obvious to the user that they can drag that.

Unfortunately I can't seem to get it to work. Setting a background to the ui-resizable-n class won't work and adding an <img/> tag to the generated handle, event though I can make it look right, I can't grab the icon and drag it.

Any thoughts ?

http://plnkr.co/edit/tAQbS6LYMebLGsCXPJwL?p=preview

Layout: https://dl.dropboxusercontent.com/u/2227188/handle%20on%20the%20left.png (the gray bar is between 2 divs and it's resizing both of them .. that part is done - notice the icon on the left of the bray bar).

Solution

  • As per your screenshot, you just need to make changes in CSS to get that resize handler.

    enter image description here

    Please change the image url of handler as per your screenshot.

    .lower .ui-resizable-n {
  background: url(https://i.sstatic.net/Xkiaa.png) no-repeat; 
  height: 10px;
  left: -8px; /*Adjust this value to fit it properly in the container*/
  top: -5px;
}
.lower.ui-resizable {
  border-top: 3px solid gray;
}

    DEMO