How do I get a richlistbox with a fixed listhead?

问题

Targeting Firefox 29+, I'm trying to create a richlistbox with a listhead, containing listheaders, that should stay fixed at the top if the richlistbox content is scrollable, with:

<richlistbox width="400" height="315" seltype="multiple">
  <listhead>
    <listheader label="level" pack="end" width="90"/>
    <listheader label="marker" pack="center" width="115"/>
    <listheader label="default" pack="center" width="90"/>
    <listheader label="prime" pack="center" width="105"/>
  </listhead>
  <richlistitem>
    <!-- some rich content -->
  </richlistitem>
  <!-- enough identical richlistitems here to make them scrollable -->
</richlistbox>

However, it does not work as expected: the listhead scrolls along with the richlistitems, in stead of staying fixed-positioned.

I've tried adjusting the listhead element and/or replace listheader elements with treecol elements (as suggested here and here), but that didn't do anything for me.

Currently the best working solution I have come up with myself is by styling it with:

richlistbox {
  margin-top: 20px;
}
richlistbox listhead {
  position: fixed;
  margin-top: -20px;
}

However, although this gives acceptable results on Ubuntu, it doesn't on Mac (width of listhead is too small (about 5px) and there's too much space (about 3px) between it and the scrollable content), and, although I don't have access to a Windows computer right now, I suspect it will give an alternative result there as well.

Any suggestions to make this work, less hackish, cross-platform?

回答1:

According to this guy right here: http://mike.kaply.com/2011/08/05/richlistbox-tricks-for-your-add-on/

You have to do something like this:

  <listheader style="border: 0; padding: 0; -moz-appearance: none;">
    <treecol value="First Header" label="level" pack="end" width="90"/>
    <treecol value="Second Header" label="marker" pack="center" width="115"/>
    <treecol value="Third Header" label="default" pack="center" width="90"/>
    <treecol value="Fourth Header" label="prime" pack="center" width="105"/>
  </listheader>

so that makes your code above like this: you can copy paste this code at http://ted.mielczarek.org/code/mozilla/xuledit/xuledit.xul but you have to download the addon https://addons.mozilla.org/en-US/firefox/addon/remote-xul-manager/?src=ss which whitelists xul urls, and then add this url. then just copy paste this on the site:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="yourwindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<richlistbox width="400" height="315" seltype="multiple">
  <listheader style="border: 0; padding: 0; -moz-appearance: none;">
    <treecol value="First Header" label="level" pack="end" width="90"/>
    <treecol value="Second Header" label="marker" pack="center" width="115"/>
    <treecol value="Third Header" label="default" pack="center" width="90"/>
    <treecol value="Fourth Header" label="prime" pack="center" width="105"/>
  </listheader>
<richlistbox>
  <richlistitem>
    <description>A XUL Description!</description>
  </richlistitem>
  <richlistitem>
    <button label="A XUL Button"/>
  </richlistitem>
</richlistbox>
<richlistbox>
  <richlistitem>
    <description>A XUL Description!</description>
  </richlistitem>
  <richlistitem>
    <button label="A XUL Button"/>
  </richlistitem>
</richlistbox>
<richlistbox>
  <richlistitem>
    <description>A XUL Description!</description>
  </richlistitem>
  <richlistitem>
    <button label="A XUL Button"/>
  </richlistitem>
</richlistbox>
<richlistbox>
  <richlistitem>
    <description>A XUL Description!</description>
  </richlistitem>
  <richlistitem>
    <button label="A XUL Button"/>
  </richlistitem>
</richlistbox>
<richlistbox>
  <richlistitem>
    <description>A XUL Description!</description>
  </richlistitem>
  <richlistitem>
    <button label="A XUL Button"/>
  </richlistitem>
</richlistbox>
<richlistbox>
  <richlistitem>
    <description>A XUL Description!</description>
  </richlistitem>
  <richlistitem>
    <button label="A XUL Button"/>
  </richlistitem>
</richlistbox>
<richlistbox>
  <richlistitem>
    <description>A XUL Description!</description>
  </richlistitem>
  <richlistitem>
    <button label="A XUL Button"/>
  </richlistitem>
</richlistbox>
</richlistbox>

</window>

来源：https://stackoverflow.com/questions/25310666/how-do-i-get-a-richlistbox-with-a-fixed-listhead