jquery 크기를 조정할 수없는 핸들이 모든면에 표시되지 않습니다.

4면과 4 개의 모서리에 jquery resiazble 상자에 핸들을 넣으려고합니다.jquery 크기를 조정할 수없는 핸들이 모든면에 표시되지 않습니다.

4면에 아무런 문제가없고 상단 모서리를 얻을 수는 있지만 어떤 이유로 하단 모서리가 위로 올라와 내가 잘못하고있는 것의 삶을 볼 수 없습니다.

아래쪽 테두리에는 다른 기호가 표시된 두 번째 테두리가 있으며 크기 조정 핸들은 없습니다. 또한 커서가 SW가 전체 아래쪽 테두리

에 어떤 도움을 크게 당신이 당신의 CSS를 변경 같은

<!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>

출처

2013-08-20 Barry Watts

당신은 현재의 크기 조정 핸들의 스크린 샷을 첨부 할 수 있습니다 어떻게 코드가 크롬의 요소 Inspector에서 보이는? – AdityaSaxena

heres 요소 검사기와 함께 크롬의 화면 shopt http://dakardesign.com/screenshot.jpg 내가 그 se 핸들이 CSS를 가지고 있다는 것을 알 수있다. 스타일 시트가 아닌 곳에서 오는 부분을 알고있다. –

se 핸들에 크기 조정을 적용하면 ... 시각적 요소가 스태킹됩니다.

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

ui-icon 및 gi-icon-gripsmall-diagonal-se 클래스를 제거해야합니다.

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

전체 예제 : http://jsfiddle.net/rwinscot/vNbW5/

출처

2013-10-16 20:32:03

working example이 보인다 내 코드를 heres

감사. pls는 아래의 CSS를 추가하고 확인합니다 :

.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; }

출처

2013-08-20 10:01:55 Era

내가 핸들에 대한 핸들을 추가 할 때 여전히 se 핸들에 문제가 있습니다. http://jsfiddle.net/6cWXF/2/ –

OP? 바이올린에서 완벽합니다. – Era

@ BarryWhatts 그냥 보이지 않습니다. 1.11.4 jQuery에서 동일한 문제가 발생했습니다. –

jquery 크기를 조정할 수없는 핸들이 모든면에 표시되지 않습니다.

답변

관련 문제