jquery resizable handles on all sides not showing

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

  •  25-06-2022
  •  | 
  •  

题

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>

有帮助吗？

解决方案 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/

其他提示

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; }
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top