Xul:用垂直盒子动态填充水平盒子会导致元素垂直放置
我正在尝试使用以下代码在运行时使用 vboxes 元素填充 hbox 元素:
Xul code :
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 中的错误吗?您是否知道不使用网格的可能解决方法?
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?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
问题出在这一行:
让 canvasVbox = document.createElementNS("http://www.w3.org/1999/xhtml",'vbox');
VBox 不是 xhtml 的一部分,而是 xul 语法的一部分,所以我只需要将“http://www.w3.org/1999/xhtml”替换为“http://www.mozilla.org/keymaster/gatekeeper/” There.is.only.xul”现在可以工作了。
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.