La única solución que he encontrado es establecer la altura o el ancho máximo y mínimo con el valor actual.
Ejemplo:
foo.resizable({
maxHeight: foo.height(),
minHeight: foo.height()
});
Pero esto es realmente feo, especialmente si tengo que cambiar la altura del elemento mediante programación.
Respuestas:
Puede configurar la handlesopción de cambio de tamaño para que solo se muestre a la izquierda y a la derecha (o este / oeste), así:
foo.resizable({
handles: 'e, w'
});
Si bien el póster pedía principalmente un cambio de tamaño solo horizontal, la pregunta también pide vertical.
El caso vertical tiene un problema especial: es posible que haya establecido un ancho relativo (por ejemplo, 50%) que desea mantener incluso cuando se cambia el tamaño de la ventana del navegador. Sin embargo, jQuery UI establece un ancho absoluto en px una vez que se cambia el tamaño del elemento por primera vez y se pierde el ancho relativo.
Si encuentra que el siguiente código funciona para este caso de uso:
$("#resizable").resizable({
handles: 's',
stop: function(event, ui) {
$(this).css("width", '');
}
});
Consulte también http://jsfiddle.net/cburgmer/wExtX/ y jQuery UI redimensionable: altura automática cuando se usa este controlador solo
px.
heighta ''los resizey stopmanipuladores)
Una solución muy sencilla:
$( ".selector" ).resizable({ grid: [1, 10000] }); // horizontal
$( ".selector" ).resizable({ grid: [10000, 1] }); // vertical
Esto también funciona para draggable (). Ejemplo: http://jsfiddle.net/xCepm/
{handles: 'se', grid: [10000, 1], autoHide: true}
La solución es configurar su redimensionable para que cancele los cambios de la dimensión que no desea.
aquí hay un ejemplo de tamaño variable solo verticalmente:
foo.resizable({
resize: function(event, ui) {
ui.size.width = ui.originalSize.width;
}
});
Quería permitir cambiar el tamaño del ancho cuando el navegador cambia de tamaño, pero no cuando el usuario cambia el tamaño del elemento, esto funcionó bien:
foo.first().resizable({
resize: function(event, ui) {
ui.element.css('width','auto');
},
});
Para mí, las soluciones con manijas y resizemanipulador funcionaron bien, por lo que el usuario ve el mango pero puede cambiar el tamaño solo horizontalmente, una solución similar debería funcionar para vertical. Sin el controlador de la parte inferior derecha , es posible que el usuario no sepa que puede cambiar el tamaño del elemento.
Cuando se usa ui.size.height = ui.originalSize.height;, no funcionará correctamente si el elemento cambia su tamaño desde el estado inicial.
foo.resizable({
// Handles left right and bottom right corner
handles: 'e, w, se',
// Remove height style
resize: function(event, ui) {
$(this).css("height", '');
}
});
Para un mejor rendimiento $(this)podría eliminarse:
var foo = jQuery('#foo');
foo.resizable({
// Handles left right and bottom right corner
handles: 'e, w, se',
// Remove height style
resize: function(event, ui) {
foo.css("height", '');
}
});
Successfully working div position Vertically and horizontally
-------------------------------------------------------------
<head>
<style>
.resizable {
height: 100px;
width: 500px;
background: #09C;
}
.resizable-x {
height: 100px;
width: 500px;
background: #F60;
}
</style>
<script>
$(function() {
$( ".resizable" ).resizable({
grid: [10000, 1]
});
$( ".resizable-x " ).resizable({
grid: [1, 10000]
});
$( ".resizable" ).draggable();
});
});
</script>`enter code here`
</head>
<body>
<div class="resizable"></div>
<div class="resizable-x"></div>
</body>