La única solución que he encontrado es establecer la altura o el ancho máximo y mínimo con el valor actual.¿Cómo cambiar el tamaño SOLO horizontal o verticalmente con jQuery UI de tamaño variable?
Ejemplo:
foo.resizable({
maxHeight: foo.height(),
minHeight: foo.height()
});
Pero esto es realmente feo, sobre todo si tengo que cambiar la altura del elemento de programación.
Se podría establecer el cambio de tamaño handles option para mostrar sólo a la izquierda y la derecha (o hacia el este/oeste), así:
foo.resizable({
handles: 'e, w'
});
La solución consiste en configurar el tamaño variable por lo que anula cambios de la dimensión que no quieres
aquí es un ejemplo de sólo verticalmente de tamaño variable:
foo.resizable({
resize: function(event, ui) {
ui.size.width = ui.originalSize.width;
}
});
Mientras que el cartel estaba pidiendo principalmente para una horizontal de sólo cambiar el tamaño, la pregunta no pide vertical, también.
La carcasa vertical tiene un problema especial: es posible que haya establecido un ancho relativo (por ejemplo, 50%) que desee conservar incluso cuando se cambie el tamaño de la ventana del navegador. Sin embargo, jQuery UI establece un ancho absoluto en px una vez que primero cambia el tamaño del elemento y se pierde el ancho relativo.
Si se encuentra el siguiente código para trabajar para este caso de uso:
$("#resizable").resizable({
handles: 's',
stop: function(event, ui) {
$(this).css("width", '');
}
});
Ver también http://jsfiddle.net/cburgmer/wExtX/ y jQuery UI resizable : auto height when using east handle alone
Muy interesante, gracias. Lo tendré en cuenta. Creo que es importante señalar que el elemento redimensionable debe tener su ancho establecido por css si no se perderá después del cambio de tamaño. Vea aquí http://jsfiddle.net/paska/wExtX/10/ – Diego
Esta es la solución que estaba buscando. Por alguna razón, a pesar de que el identificador está deshabilitado para la región, sus dimensiones parecen establecerse en px. Si no usas este método, pierdes tu% de altura o ancho. – Serhiy
gracias, tengo solución. –
Una solución muy sencilla:
$(".selector").resizable({ grid: [1, 10000] }); // horizontal
$(".selector").resizable({ grid: [10000, 1] }); // vertical
Esto funciona para arrastrable() también. Ejemplo: http://jsfiddle.net/xCepm/
quería para permitir cambiar el tamaño de la anchura cuando el navegador vuelve a tamaños, 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í soluciones con las dos asas y el controlador resize funcionó bien, por lo que el usuario ve el controlador pero puede cambiar el tamaño solo horizontalmente, una solución similar debería funcionar para la vertical. Sin el manejador de la esquina inferior , el usuario podría ignorar que puede cambiar el tamaño del elemento.
Al usar ui.size.height = ui.originalSize.height;no funcionará correctamente si el elemento cambió 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ían 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>
que acaba de encontrar una advertencia con esta solución.Todavía pondrá el ancho y alto cuando se hace como un estilo en línea. Esto me está causando problemas con una solución solo vertical. Una vez que lo cambie de tamaño, se establece el ancho y ya no es 100% (sino un valor de px). Solo poniendo esto aquí en caso de que otros estén buscando y lo encuentren. – Fernker
@Fernker Sí, eso es un dolor. – Ben
puede obtener un porcentaje de ancho si le otorga propiedades de ancho mínimo y ancho máximo del mismo valor a su div. No se anulará :) –