CODEWITHSUNDEEP
javascriptfirefoxfirefox-addonxuladd-on
Tony
Tony

Reputation: 507

Element height and position in firefix extension

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?

Upvotes: 2

Views: 74

Answers (3)

nmaier
nmaier

Reputation: 33182

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:

pack="end"

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.

Upvotes: 0

Filipe Silva
Filipe Silva

Reputation: 21657

Try changing 

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

to

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

it will look like this:

enter image description here

Upvotes: 1

please_delete_my_account
please_delete_my_account

Reputation: 119

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.

Upvotes: 0

Related Questions