Cómo hacer que la altura de un dijit Accordionpane dinámico

Question

No puedo encontrar la manera de contar la AccordionContainer para establecer la altura de su panel de acordeón para automóviles de manera que la altura del panel es dinámica en función de su contenido.

En el siguiente código que estoy añadiendo dos paneles a una AccordionContainer. Uno tiene altura de 10px y otro tiene 90 píxeles, pero en ambos casos la altura del panel de acordeón se calcula a 10px. Parece que su siempre tomando la altura de la primera.

var accordionContainer = new dijit.layout.AccordionContainer({'id':'accContainer'}).placeAt("test");
var accordPane = new dijit.layout.ContentPane({"title": "test", "content":"<div style='height:10px'>sdfsdfsdf</div&gt;"});
var accordPane2 = new dijit.layout.ContentPane({"title": "test1", "content":"<div style='height:90px'>sdfsdfsdf</div>"});

accordionContainer.addChild(accordPane);
accordionContainer.addChild(accordPane2, 1);
accordPane.startup();
accordPane2.startup();
accordionContainer.startup();
accordionContainer.selectChild(accordPane2);

Estoy utilizando dojo 1.3.2

Answer 1

Me hizo caso omiso de la función de _getTargetHeight dijit.layout.AccordionContainer y siempre regreso 'auto' para la altura. Animación de paneles deslizantes no funcionará correctamente pero no es tan notable.

_getTargetHeight: function(/* Node */ node){
// summary:
//For the given node, returns the height that should be
//set to achieve our vertical space (subtract any padding
//we may have).
//This is used by the animations.

//var cs = dojo.getComputedStyle(node);
//return Math.max(this._verticalSpace - dojo._getPadBorderExtents(node, cs).h, 0);
return 'auto';
}

Answer 2

No es posible en la actualidad. Escribí un código de blog / muestra para explicar por qué y cómo generar un grupo de TitlePane de que se expanden a su altura naturales (en lugar de la altura del recipiente para el AccordionContainer):

http: // www. sitepen.com/blog/2008/10/21/quick-fixes-and-dojo-support/

Se requiere hacer un solo widget de TitleGroup (personalizado, el código en el blog), y colocando en el interior de TitlePane. Cada comportan mayormente como un AccordionPane (con título = "" atributos, href = "" capacidad de carga, etc.) y los delegados título clics para gestionar el estado abierto / cerrado de los hermanos.

Answer 3

intente ajustar las dimensiones en el mismo acordeón de contenedores a un tamaño que es lo suficientemente grande como para contener el contenido más los paneles de títulos necesarios, por ejemplo.

#accContainer{
  height: 120px;
  width: 200px;
}

La puesta en marcha () llamar en el contenedor debe poner en marcha los paneles secundarios para usted.

Answer 4

Ahora usted también puede utilizar dijit.TitlePanes con ningún contenedor en absoluto. Puede pasar open: false cuando se ejemplariza los paneles para comenzar a retirarse cerrada. Creo encerrándolos en un dojox.widget.TitleGroup emulará el comportamiento de tener 1 abierto a la vez.