why is "hbox" width property a string not an int

[thosrtanner]

I suspect this is in firefox as well, but looking at the specs on mdm (https://developer.mozilla.org/en-US/doc ... erty/width), it suggests that the width property (not attribute) is an integer, which it very clearly isn't, it's a string, which means I need to convert it to an integer if I want to do calculations with it.

I was wondering why this was the case

[Moonchild]

The attributes are strings, which is what you'd normally work with, not the properties.

Can you provide a code example?

[thosrtanner]

Something along the lines of this:

Code: Select all

    let elem = document.getElementByID("something that is an hbox");
    console.log(elem.width, elem.clientWidth);

produces (e.g.)

Code: Select all

     "150", 150

Its a little unclear to me, because attributes that are boolean (e.g. box.setAttribute("collapsed", "true")) correspond to properties that are actual booleans (true/false). For instance, that would result in

Code: Select all

console.log(hbox.getAttribute("collapsed"), hbox.collapsed)

producing

Code: Select all

"true", true

, which is different to the way the 'integer' properties work.

[Moonchild]

I'm pretty sure this is correctly implemented, so I verified this with a little test on a XUL window (the about box).
It returns an int on hbox.width -- so it's correct.

Make sure you're querying and setting attributes/properties on the correct element.

e.g., using the following in the about box:

Code: Select all

  let elem = document.getElementById("PMclientBox");
  console.log(elem.width);
  console.log(elem.height);
  console.log(elem);

Results in:

Code: Select all

552
""
<hbox id="PMclientBox">

hbox doesn't have a height, vbox doesn't have a width; if you mix the two up and set/query a "width" on a "vbox", then it will almost certainly be returned as a string (since you created the new property).

[thosrtanner]

Well, that's strange. My XUL says this:

Code: Select all

          <hbox id="inforss.newsbox1"
                flex="1"
                style="position:relative; overflow:hidden;"
                draggable="false"
                ondragstart="return false"
                ondragover="bar_observer.on_drag_over(event)"
                ondrop="bar_observer.on_drop(event)"
                onmouseover="inforssHeadlineDisplay.pauseScrolling(false)"
                onmouseout="inforssHeadlineDisplay.pauseScrolling(true)"/>

Which I thought might be the issue, but adding a width="0" didn't fix it.

It is attached to the status bar if that is in any way related.

[Moonchild]

I think "flex=1" is your culprit. If you make an hbox flexible, its intrinsic width becomes undefined (since it'll flex to fill the space).

[thosrtanner]

Admittedly the flex seems rather pointless on a display element where the code is manually setting the width.

However, I got rid of the flex and setting style.width to a number of pixels, and it still does that. Even setting the width property to an integer in the browser console ends up with a string.