jquery poignées redimensionnables sur tous les côtés ne montrant pas

J'essaie de mettre la poignée sur une boîte jquery resiazble sur les 4 côtés et les 4 coins.jquery poignées redimensionnables sur tous les côtés ne montrant pas

Je peux les obtenir sur 4 côtés sans problème et les coins supérieurs, mais pour une raison quelconque, les coins inférieurs jouent et je ne vois pas pour la vie de moi ce que je fais mal.

la bordure inférieure a une deuxième bordure avec d'autres symboles et la poignée de redimensionnement n'est pas là. De plus, le curseur est SW sur toute la bordure inférieure

toute aide grandement appréciée

Heres mon 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>

Source

2013-08-20 Barry Watts

peut vous joindre une capture d'écran des poignées de redimensionnement actuelles et la façon dont le code semble dans l'inspecteur des éléments sur Chrome? – AdityaSaxena

heres un écran shopt de celui-ci en chrome avec l'inspecteur des éléments http://dakardesign.com/screenshot.jpg Je peux voir que la poignée de se a un peu de css supplémentaire, je ne sais pas d'où cela vient de son pas de la feuille de style –

Lors de l'application redimensionnable à la poignée se ... vous empilez des éléments visuels.

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

Vous devrez supprimer l'icône et ui-ui-cours-icône gripsmall-diagonale soi.

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

Exemple complet: http://jsfiddle.net/rwinscot/vNbW5/

Source

2013-10-16 20:32:03

working example On dirait que vous avez changé votre code CSS. pls ajouter le css ci-dessous et vérifier:

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

Source

2013-08-20 10:01:55 Era

J'ai toujours des problèmes avec la poignée de se quand j'ajoute les poignées selon OP http://jsfiddle.net/6cWXF/2/ –

OP? c'est parfait en violon. – Era

@BarryWatts tout simplement invisible. J'ai le même problème sur 1.11.4 jQuery –

jquery poignées redimensionnables sur tous les côtés ne montrant pas

Répondre

Questions connexes