Xul: Dynamically populating a hbox with vboxes results in elements places vertically

Question

I'm trying to populate in runtime an hbox elements with vboxes elements using the following code:

Xul code :

<hbox style="overflow:auto;" id="canvasContainer"> </hbox>

Javascript code :

  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);
  }

This results in canvas and labels being displayed vertically one under the other one. Do you know were the problem could come from? Could it be that it is not possible to populate boxes dynamically? Is it a bug in Xulrunner? Do you have an idea of a possible workaround without using grids?

Answer 1

The problem was the line : let canvasVbox = document.createElementNS("http://www.w3.org/1999/xhtml",'vbox');

VBox is not part of xhtml but part of the xul syntax, so I just needed to replace "http://www.w3.org/1999/xhtml" by "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" and now it works.