Element height and position in firefix extension

Question

I am building an extension where I show a window with a progress bar using this code:

 <?xml version="1.0"?>
 <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window
  id="findfile-window"
  title="Please wait.."
  orient="horizontal"
  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

  <progressmeter value="50" style="height:4px;"/>

</window>

But for some reason the height doesn't change and it looks like this https://www.dropbox.com/s/8ekej9vlifc2tt6/Capture.PNG

Any ideas?

Answer 1

Inspect the DOM using the debug tools in your browser. Verify that the bar is actually the progessmeter.

From there, verify the computed height using the debugger.

This should be an easy fix if you know how to use your browsers CSS debugger. If you can put the actual code up in a fiddle I can provide more info.

Answer 2

Try changing

<progressmeter value="50" style="height:4px;"/>

to

<progressmeter value="50" style="max-height:4px;"/>

it will look like this:

Answer 3

CSS box-align / XUL::attr align defaults to stretch. Setting it to something else, on the surrounding box - the window-element in your case -, will fix your issue.

pack="end" example:

Other interesting layout related XUL stuff for laying out your widgets exactly the way you want: flex, pack, orient, separator, grid. The attributes usually also have corresponding CSS rules.