Page 1 of 1

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

Posted: 2017-10-28, 10:54
by 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

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

Posted: 2017-10-29, 06:58
by Moonchild
The attributes are strings, which is what you'd normally work with, not the properties.

Can you provide a code example?

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

Posted: 2017-10-29, 11:05
by 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.

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

Posted: 2017-10-29, 21:08
by 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).

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

Posted: 2017-10-30, 08:41
by 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.

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

Posted: 2017-10-30, 12:26
by 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).

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

Posted: 2017-10-30, 16:59
by 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.