jquery resizable handles on all sides not showing

Asked 20/8, 2013 at 9:10 Answered 16/10, 2013 at 20:32

I am trying to put handle on a jquery resiazble box on the 4 sides and 4 corners.

I can get them on 4 sides no problem and the top corners but for some reason the bottom corners are playing up and I cant see for the life of me what I am doing wrong.

the bottom border has a second border with some other symbols showing and the se resize handle isnt there. Also the cursor is SW on the whole bottom border

any help greatly appreciated

heres my 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.3/themes/smoothness/jquery-ui.css" />
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

 <style>
  #resizable {top:150px;left:150px; width: 150px; height: 150px; padding: 0.5em; }
  #resizable h3 { text-align: center; margin: 0; }
  .ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
  .ui-resizable-n { cursor: n-resize; height: 10px; width: 100%; top: 0px; left: 0; background: url(resize-handle.gif) top center no-repeat; border-top: 1px solid #f00;}
  .ui-resizable-s { cursor: s-resize; height: 10px; width: 100%; bottom: 0px; left: 0; background: url(resize-handle.gif) bottom center no-repeat; border-bottom: 1px solid #f00; }
  .ui-resizable-e { cursor: e-resize; width:10px; right: 0px; top: 0; height: 100%; background: url(resize-handle.gif) right center no-repeat; border-right: 1px solid #f00; }
  .ui-resizable-w { cursor: w-resize; width: 10px; left: 1px; top: 0; height: 100%; background: url(resize-handle.gif) left center no-repeat; border-left: 1px solid #f00; }
  .ui-resizable-sw { cursor: sw-resize; height: 10px; width: 100%; bottom: 0px; left: 0px; background: url(resize-handle.gif) bottom left no-repeat; border-top: 1px solid #f00;}
  .ui-resizable-se { cursor: se-resize; height: 10px; width: 100%; bottom: 0px; right: 0; background: url(resize-handle.gif) bottom right no-repeat; border-top: 1px solid #f00;}
  .ui-resizable-nw { cursor: nw-resize; height: 10px; width: 100%; top: 0px; left: 1px; background: url(resize-handle.gif) top left no-repeat; border-top: 1px solid #f00;}
   .ui-resizable-ne { cursor: ne-resize; height: 10px; width: 100%; top: 0px; right: 0; background: url(resize-handle.gif) top right no-repeat; border-top: 1px solid #f00;}
</style>
<script>
 $(function() {
    $( "#resizable" ).resizable({ handles: "n, e, s, w, se, sw, nw, ne" });
    var handles = $( "#resizable" ).resizable( "option", "handles" );       
    $( "#resizable" ).resizable( "option", "handles", "n, e, s, w, se, sw, nw, ne" );
 });
</script>
</head>
<body>
  <div id="resizable" class="ui-widget-content">
   <h3 class="ui-widget-header">Resizable</h3>
  </div>
</body>

Glaser answered 20/8, 2013 at 9:10 Comment(2)

can you attach a screenshot of the current resize handles and how the code looks in the Elements Inspector on Chrome ? – Fly 20/8, 2013 at 9:30

heres a screen shopt of it in chrome with the elements inspector dakardesign.com/screenshot.jpg I can see that the se handle has some extra css, I dont know where this is coming from its not from the stylesheet – Glaser 20/8, 2013 at 9:41

When applying resizable to the se handle... you're stacking visual elements.

<div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1000;"></div>

You'll need to remove the ui-icon and ui-icon-gripsmall-diagonal-se classes.

$("#resizable").find("div.ui-resizable-se").removeClass("ui-icon");
$("#resizable").find("div.ui-resizable-se").removeClass("ui-icon-gripsmall-diagonal-se");

Complete example: http://jsfiddle.net/rwinscot/vNbW5/

Male answered 16/10, 2013 at 20:32 Comment(0)

working example Seems like you changed your css. pls add the below css and check :

.ui-resizable-handle {
    position: absolute;
    font-size: 0.1px;
    display: block;
}
.ui-resizable-disabled .ui-resizable-handle,
.ui-resizable-autohide .ui-resizable-handle {
    display: none;
}
.ui-resizable-n {
    cursor: n-resize;
    height: 7px;
    width: 100%;
    top: -5px;
    left: 0;
}
.ui-resizable-s {
    cursor: s-resize;
    height: 7px;
    width: 100%;
    bottom: -5px;
    left: 0;
}
.ui-resizable-e {
    cursor: e-resize;
    width: 7px;
    right: -5px;
    top: 0;
    height: 100%;
}
.ui-resizable-w {
    cursor: w-resize;
    width: 7px;
    left: -5px;
    top: 0;
    height: 100%;
}
.ui-resizable-se {
    cursor: se-resize;
    width: 12px;
    height: 12px;
    right: 1px;
    bottom: 1px;
}
.ui-resizable-sw {
    cursor: sw-resize;
    width: 9px;
    height: 9px;
    left: -5px;
    bottom: -5px;
}
.ui-resizable-nw {
    cursor: nw-resize;
    width: 9px;
    height: 9px;
    left: -5px;
    top: -5px;
}
.ui-resizable-ne {
    cursor: ne-resize;
    width: 9px;
    height: 9px;
    right: -5px;
    top: -5px;
}

#resizable {top:150px;left:150px; width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }

Fad answered 20/8, 2013 at 10:1 Comment(4)

I am still having problems with se handle when I add the handles as per OP jsfiddle.net/6cWXF/2 – Glaser 20/8, 2013 at 10:18

OP ? its perfect in fiddle. – Fad 20/8, 2013 at 10:41

@BarryWatts it just invisible. I have same problem on 1.11.4 jQuery – Hardan 4/7, 2016 at 15:10

This solved so much pain! I am working on a HUGE project with many many libraries and it was hard to imagine someone imported the jquery-ui js but didn't include the .css... which is why I never double checked and the resizable handles weren't getting styled. I just threw these in a layout file to check and it worked! Thanks. – Tegument 21/12, 2016 at 21:5

When applying resizable to the se handle... you're stacking visual elements.

<div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1000;"></div>

You'll need to remove the ui-icon and ui-icon-gripsmall-diagonal-se classes.

$("#resizable").find("div.ui-resizable-se").removeClass("ui-icon");
$("#resizable").find("div.ui-resizable-se").removeClass("ui-icon-gripsmall-diagonal-se");

Complete example: http://jsfiddle.net/rwinscot/vNbW5/

Male answered 16/10, 2013 at 20:32 Comment(0)

Recommended topics

Hot tags