javascript - Posible error: dijit/layout/ContentPane no cambia de tamaño cuando se agregan widgets como elementos secundarios

dojo dijit.form

Question

Widget dijit/layout/ContentPane no dijit/layout/ContentPane tamaño correctamente cuando se agregan widgets como elementos secundarios.

Pasos para reproducir el problema:

1. Abrir caso de prueba en https://jsfiddle.net/9eja3jtr/
2. Haga clic en el botón de 10 veces "¡Haga clic en mí muchas veces!".

Problema:

• dijit/layout/ContentPane no dijit/layout/ContentPane tamaño cuando se agregan widgets como elementos secundarios. El contenido insertado no es completamente visible.

Necesitaría que se aumentaran las dimensiones para dijit/layout/ContentPane para acomodar los nuevos widgets añadidos, de modo que todos los widgets internos estén visibles.

Creo que esto es un error dentro del widget dijit. Me gustaría saber si hay alguna solución.

Notas: He informado de errores a dojo https://bugs.dojotoolkit.org/ticket/19021

require(["dijit/layout/ContentPane", "dijit/TitlePane", "dijit/form/Button", "dojo/domReady!"], function(ContentPane, TitlePane, Button) {
  this._contentPanel = new ContentPane({
    style: "background-color:red;"
  }, "contentPanel");

  this._titlePanel = new TitlePane({
    title: "I''m a TitlePane",
    content: "Collapse me!"
  }, "titlePanel");

  this._button = new Button({
    label: "Click me many times!",
    onClick: function() {
      this._titlePanel.addChild(new Button({
        label: "Test",
        style: "width: 250px"
      }));
    }.bind(this)
  }, "button");

  this._contentPanel.addChild(this._titlePanel);
  this._titlePanel.addChild(this._button);
  this._contentPanel.startup();
});

Answer 1

Creo que la forma más sencilla de solucionar esto es rodear el contentpane de contentpane con un BorderContainer , el tamaño () se activará automáticamente; de ​​lo contrario, creo que debería volver a calcular todo y cambiar el tamaño de todos los adjuntos (sin usar BorderContainer)

debajo de un fragmento de trabajo: (He especificado el centro de la región para el panel de contenido para evitar errores)

require(["dijit/layout/BorderContainer","dijit/layout/ContentPane", "dijit/TitlePane", "dijit/form/Button", "dojo/domReady!"], function(BorderContainer,ContentPane, TitlePane, Button) {
  this._borderContainer = new BorderContainer({},"borderContainer");
  this._contentPanel = new ContentPane({
   region: "center",
    style: "min-height:125px; background-color:red;"
  }, "contentPanel");

  this._titlePanel = new TitlePane({
    title: "I''m a TitlePane",
    content: "Collapse me!"
  }, "titlePanel");

  this._button = new Button({
    label: "Click me many times!",
    onClick: function() {
      this._titlePanel.addChild(new Button({
        label: "Test",
        style: "width: 200px"
      }));
      
    }.bind(this)
  }, "button");
 this._borderContainer.addChild(this._titlePanel);
  this._contentPanel.addChild(this._titlePanel);
  this._titlePanel.addChild(this._button);
  this._contentPanel.startup();
});

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css" rel="stylesheet"/>
<div class="claro">
  <div id="borderContainer">
    <div id="contentPanel">
      <div id="titlePanel">
        <div id="button">
        </div>
        <div id="content">
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

Creo que desea establecer el indicador doLayout de ContentPane en falso. Entonces no establecerá un tamaño en el ContentPane anidado. Además, elimine la altura de 125px codificada.

Answer 3

Puede hacer una solución simple mediante CSS:

#titlePanel {
  height: auto !important;
}

Ver https://jsfiddle.net/9eja3jtr/3/