XUL: Popular dinámicamente un Hbox con Vboxes da como resultado elementos en lugares verticalmente
-
24-10-2019 - |
Pregunta
Estoy tratando de poblar en tiempo de ejecución y elementos Hbox con elementos vboxes usando el siguiente código:
Código XUL:
<hbox style="overflow:auto;" id="canvasContainer"> </hbox>
Código JavaScript:
this.canvasContainer = document.getElementById("canvasContainer");
for(var i = 0;i<k;i++){
let imgCanvas = document.createElementNS("http://www.w3.org/1999/xhtml",'html:canvas');
imgCanvas.setAttribute("width",200);
imgCanvas.setAttribute("height",150);
imgCanvas.getContext("2d").fillRect(0,0,200,150);
let canvasVbox = document.createElementNS("http://www.w3.org/1999/xhtml",'vbox');
this.canvasContainer.appendChild(canvasVbox);
let canvasLabel = document.createElement("label");
canvasLabel.setAttribute("value",i);
canvasLabel.setAttribute("flex",1);
canvasVbox.setAttribute("flex",1);
canvasVbox.appendChild(imgCanvas);
canvasVbox.appendChild(canvasLabel);
this.canvasContainer.appendChild(canvasVbox);
}
Esto da como resultado un lienzo y las etiquetas que se muestran verticalmente una debajo del otro. ¿Sabes que podría provenir el problema? ¿Podría ser que no es posible completar las cajas dinámicamente? ¿Es un error en Xulrunner? ¿Tiene una idea de una posible solución sin usar cuadrículas?
Solución
El problema era la línea: dejar canvasvbox = document.createElementns ("http://www.w3.org/1999/xhtml", 'vbox');
VBox no es parte de XHTML sino parte de la sintaxis XUL, por lo que solo necesitaba reemplazar "http://www.w3.org/1999/xhtml" por "http://www.mozilla.org/keymaster/gatekeeper/ allí.is.only.xul "y ahora funciona.