Добавление полосы прокрутки к боковой панели расширения Firefox - PullRequest
Новая
       2

Добавление полосы прокрутки к боковой панели расширения Firefox

2 голосов
/ 06 августа 2010

Я пытаюсь добавить полосу прокрутки к расширению Firefox, чтобы она отображалась, когда окно слишком маленькое.

У меня проблемы с тем, что полоса прокрутки охватывает весь диапазон сверху вниз на боковой панели и отображается только тогда, когда окно слишком маленькое.

Одно расширение, которое обладает функциональностью, которая мне нужна, - это расширение sage, однако, просматривая CSS и XUL, я не могу понять, как оно работает.

Файл XUL 

  <vbox flex="1" id="main" align="center" pack="end" maxwidth="300">
    <spacer height="10"/>
    <image id="logo" maxwidth="300"/>
    <spacer height="20"/>
    <vbox id="button" flex="1">
      <button id="a-button" label=""/>
      <spacer height="20"/>
      <listbox id="listbox1" width="300" maxwidth="300" rows="6">
        <listhead id="list-header">
          <listheader label=""/>
        </listhead>
    </listbox>
      <spacer height="20"/>
    </vbox>
    <tabbox id="details-box" maxwidth="300">
      <tabs id="tabs">
        <tab id=a"-label" label="" style="text-align: center;"/>
      </tabs>
      <tabpanels>
        <vbox>
            <button id="another-button" label="" />
        </vbox>
      </tabpanels>
    </tabbox>
    <spacer height="20"/>
    <vbox maxwidth="300">
        <description id="message" style="display: none;">
            <!-- updated with ajax -->
        <html:h1 id="header"/>
        <html:p id="body"/>
      </description>
    </vbox>
  <spacer flex="10"/>
  </vbox>
  <spacer flex="10"/>
</page>

Соответствующий CSS 

/* Main */

{
    padding: 0;
    margin: 0;
}

#sidebar {
    background-color: #fff;
    font: 10pt "arial", "sans-serif";
    line-height: 11pt;
}

vbox#main {
    padding-left: 20px;
    padding-right: 20px;
    /* min-height: 600px; */
    min-width: 330px;
    overflow-x: hidden;
    overflow-y: auto;
}

Как это выглядит в настоящее время

Пример снимка экрана http://img203.imageshack.us/img203/7209/screenshot20100805at201.png

Желаемый эффект в Sage Extension

Sage Соответствующие Скриншоты http://img193.imageshack.us/img193/9206/sageexample.png

1 Ответ

2 голосов
/ 06 августа 2010

Проблема в том, что vbox # main был не единственным дочерним узлом. У меня также была панель , которая всплывала, основываясь на каком-то действии.

Перемещая панель внутри vbox # main, vbox # main будет занимать все пространство боковой панели.

...