INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

prefwindow size wrong on Mac even after calling window.sizeToContent()

prefwindow size wrong on Mac even after calling window.sizeToContent()

(OP)

I ran into a problem recently where the prefwindow size would often be wrong in Fx under Mac OS X, even after calling window.sizeToContent(). Fx would certainly animate between the prefpanes, but the heights would be out most of the time (sometimes too large, sometimes too small, causing cropping of the content).

I tried a lot of things, including playing around with the -moz-box-sizing style, and adding extra margin and padding to various elements, all without much success.

I finally found a fix that worked every time, without too much work. It involves 3 steps:

1) Don't put the prefpane markup in the main options XUL file - put each prefpane in its own XUL file and include them in the main XUL file like so:

CODE

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="chrome://browser/skin/preferences/preferences.css" type="text/css"?>
<?xml-stylesheet href="chrome://whatever/skin/options.css" type="text/css"?>
<!DOCTYPE prefwindow SYSTEM "chrome://whatever/locale/options.dtd">
<prefwindow
    id="whatever-preferences"
    type="prefwindow"
    windowtype="whatever:preferences"
    title="Preferences"
    label="Preferences"
    buttons="accept,cancel"
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
>

    <prefpane id="page1" label="Page 1" src="chrome://whatever/content/options-page-1.xul" />
    <prefpane id="page2" label="Page 2" src="chrome://whatever/content/options-page-2.xul" />
    <prefpane id="page3" label="Page 3" src="chrome://whatever/content/options-page-3.xul" />


</prefwindow>

The format of the linked XUL files is as follows:

CODE

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE prefwindow SYSTEM "chrome://whatever/locale/options.dtd">
<overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

    <prefpane id="page1">
        <preferences>
            <!-- Prefs for page 1 here -->
        </preferences>

        <!-- Layout and elements for page 1 here -->
    </prefpane>

</overlay>

2) Add the following code to the prefwindow's CSS file:

CODE

prefpane > .content-box,
prefwindow > .paneDeckContainer {
    overflow: visible;
}

3) Remove any and all references to "window.sizeToContent()"


By default, the elements referred to by selectors in step 2 have their "overflow" style set to "hidden" (I'm not sure why), causing the cropping.

What I haven't yet got to the bottom of is why it only happens with some prefpanes... another extension I'm helping with doesn't seem to suffer from the problem, so I'm guessing that it's something around the reset style sheets.

It's also worth noting that I have no height / min-height specified for any of my prefwindow or prefpane elements.

Hopefully this will help someone else avoid the week-long headache I've had trying to get my extension looking good in 3 different OSes!

Dan

 

Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page @ Code Couch: http://www.codecouch.com/dan/

Code Couch Snippets & Info: http://www.codecouch.com/

The Out Atheism Campaign
 

RE: prefwindow size wrong on Mac even after calling window.sizeToContent()

(OP)

Ooops... I forgot to mention, so it doesn't then break on browsers where the animate setting is false, you'll need to call window.sizeToContent() onpaneload only if the animate preference is false, e.g:

CODE

var fadeInEffect = Application.prefs.get('browser.preferences.animateFadeIn');
if (!fadeInEffect.value) {
    window.sizeToContent();
}

Dan

 

Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page @ Code Couch: http://www.codecouch.com/dan/

Code Couch Snippets & Info: http://www.codecouch.com/

The Out Atheism Campaign
 

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close