Xul:使用vbox动态填充hbox会导致元素垂直放置

时间:2011-01-26 11:56:52

标签: javascript html xul hbox vbox

我正在尝试使用以下代码在运行时使用vboxes元素填充hbox元素:

Xul代码:

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

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

这会导致画布和标签垂直显示在另一个下面。你知道问题可能来自哪里?是不是可以动态填充框?这是Xulrunner的一个错误吗?如果不使用网格,您是否知道可能的解决方法?

1 个答案:

答案 0 :(得分:2)

问题在于: 让canvasVbox = document.createElementNS(“http://www.w3.org/1999/xhtml”,'vbox');

VBox不是xhtml的一部分,而是xul语法的一部分,所以我只需要用“http://www.mozilla.org/keymaster”替换“http://www.w3.org/1999/xhtml” /gatekeeper/there.is.only.xul“现在它可以工作。