jquery resizable handles on all sides not showing

StackOverflow https://stackoverflow.com/questions/18331185

  •  25-06-2022
  •  | 
  •  

Question

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>

Was it helpful?

Solution 2

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/

OTHER TIPS

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; }
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top