Xul:用垂直盒子动态填充水平盒子会导致元素垂直放置

发布于 2024-10-14 15:59:20 字数 1063 浏览 10 评论 0原文

我正在尝试使用以下代码在运行时使用 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

明天过后 2024-10-21 15:59:20

问题出在这一行:
让 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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文