Tengo un contenedor que es una especie de contenedor de diseño para sus hijos y basado en algunos atributos tengo que organizar los niños.JavaScript - Necesito una forma de establecer OuterHeight of the Element
Necesito forma sencilla de configurar outerHeight de un elemento, algo así como,
$(e).setOuterHeight(200);
outerHeight de jQuery no fija la altura en absoluto, de hecho, su método de sólo lectura.
$(e).height(200); // this clips my element
En el método anterior, me suelto fronteras de entrada de tipo texto.
Los elementos secundarios de mi elemento están anclados en función del espacio disponible y algunos otros criterios basados en datos, diseños simples como float, clear etc. no funcionarán porque el relleno, etc. cambia dinámicamente en función de los tamaños. Finalmente terminaré usando Table, incluso si no quiero pero no tengo otra opción, pero de todos modos gracias por la ayuda.
Ahora cuando el elemento tiene un tamaño mayor que el de los niños, entonces no hay problema, pero a veces el elemento contenedor puede tener una altura menor que los niños y, en ese momento, necesito aumentar el tamaño.
function calculateSize(e){
var s = {
width: $(e).innerWidth(),
height: 0
};
var ae = new Enumerator(e.children);
while(ae.next()){
var child = ae.current();
// I have tried all alternatives
// for following lines
// child.clientHeight || child.offsetHeight
// $(child).outerHeight()
// $(child).innerHeight()
s.height += $(child).outerHeight();
}
if(s.height > $(e).height()){
$(e).height(s.height);
}
}
function layoutChildren(e){
....
/// for every child c
/// some steps before
var heightForChildren =
calculatedWithPadMarginBorder(availableHeight,c);
/// tried combinations
$(c).height(heightForChildren);
/// last statement fails for button
/// as button's padding cuts itself
/// removing padding in calculation
/// cuts other input elements !!
/// some steps after
....
}
necesito una explicación de cómo calcular el tiempo de ejecución de altura/anchura de inclusión/exclusión de relleno/margen/etc frontera y cómo configurarlo correctamente para que yo no tener problemas. No puedo seguir probando todas las combinaciones de permutaciones ya que no veo una documentación correcta incluso en el sitio web de jQuery.
Los cálculos de altura fija están bien, pero este es un tipo de elemento dinámico que se redimensiona y ordena a los niños en un orden específico.
El problema es que no hay manera de establecer outerHeight, cuando establecemos altura/ancho de un elemento, la altura/ancho es en realidad alto/ancho interno sin tener en cuenta el margen, mientras que cuando queremos cambiar el tamaño de parent, necesitamos outerHeight, pero no podemos retrasar el outerHeight tan fácilmente.
Mi calculateSize y layoutChildren son dos métodos separados y dos algoritmos separados porque el tamaño de los padres se sumará a la altura de todos los niños. Y luego la altura simplemente se divide por no. de niños apilados uno encima del otro. Mi cálculo es perfecto, pero en mi método layoutChildren tengo "outerHeight" y "outerWidth" del elemento y no tengo idea de cómo configurarlo correctamente usando jQuery o de cualquier otra manera.
Quiero establecer outerHeight para el elemento, jQuery me da el outerHeight, pero ¿cómo lo configuro para el elemento? –
Bien, ahora entiendo. Este es un problema básico con el modelo de caja CSS: http://www.w3.org/TR/CSS2/box.html que han sido muy debatidos. Sugiero un enfoque bastante feo, ya que ya estamos tratando con los cálculos de alturas de JavaScript. Esta es la diferencia que calcula en outerHeight, con y sin márgenes, y cuando establece la altura, agrega esta diferencia. Espero que esto tenga sentido, aunque recomiendo encarecidamente que intente encontrar una solución CSS para esto, en general, estos tipos de arreglos de elementos siempre tienen una solución CSS que funciona mejor que una solución JS – kraenhansen
:) que es realmente una solución fea, y desafortunadamente los cálculos todavía no funcionan bien, porque acabo de descubrir, SELECT y BUTTON son los únicos controles que tienen un cálculo diferente a los otros controles y solo aquellos están recortados. Me encantaría la solución CSS, pero una vez más nos enfrentamos al 30% de los usuarios de IE, y IE 7-8 aún funciona de manera extraña con CSS2. –