2012-02-08 7 views
0

ここで、問題のスナップです:ZKリストボックス:水平スクロールバーがhflex =分(その他の容器で/タブボックス)で表示されない

Link to a picture of the problem

レイアウトhflex =「分」せずに正常に動作します - もちろんの列が狭すぎます。ここではブローアップは次のとおりです。

<?xml version="1.0" encoding="UTF-8"?> 
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" ?> 
<zk> 
    <style> 
    .module-alternative-amount-cell { 
     text-align: right; 
    } 
    .cost-entry-alternative-amount-cell { 
     text-align: right; 
    } 
    </style> 
    <window id="thisEditor" width="99%"> 

     <!-- header label --> 
     <vbox> 
      <space height="5px" /> 
      <hbox> 
       <space width="5px" /> 
       <label id="header" value="A header" 
        style="font-weight:bold;font-size:16px;color:#525252" /> 
      </hbox> 
      <space height="5px" /> 
     </vbox> 

     <groupbox mold="3d"> 
      <caption label="General Information" 
       style="font-weight:bold"> 
      </caption> 
      <grid> 
       <columns> 
        <column label="" width="20%" valign="top" /> 
        <column label="" width="80%" valign="top" /> 
       </columns> 
       <rows> 
        <row style="background: white;border:none"> 
         <label value="Name" /> 
         <textbox id="nameText" width="350px" ></textbox> 
        </row> 

       </rows> 
      </grid> 
     </groupbox> 

     <space height="5px" /> 

     <groupbox mold="3d"> 
      <tabbox id="editorTabbox"> 
       <tabs> 
        <tab label="A" /> 
        <tab label="M" /> 
       </tabs> 
       <tabpanels> 
        <tabpanel > 

         <listbox > 
          <listhead sizable="true"> 
           <listheader label="Name" 
            sort="auto(name)" sortDirection="descending" /> 
           <listheader label="Description" /> 
          </listhead> 
          <listitem > 
           <listcell label="n1" /> 
           <listcell label="d1" /> 
          </listitem> 
          <listitem > 
           <listcell label="n2" /> 
           <listcell label="d2" /> 
          </listitem> 
         </listbox> 
        </tabpanel> 
        <tabpanel id="mtp" > 
         <vbox id="modulesTabpanelVbox" spacing="2" width="99%"> 
         <listbox > 
          <listhead sizable="true"> 
           <listheader label="Name" 
            sort="auto(name)" sortDirection="descending" hflex="min"/> 
           <listheader label="Description Description Description Description Description Description" hflex="min" /> 
           <listheader label="Description Description Description Description Description" hflex="min" /> 
           <listheader label="Description" hflex="min"/> 
           <listheader label="Description" hflex="min"/> 
          </listhead> 
          <listitem > 
           <listcell label="n1" /> 
           <listcell label="d1" /> 
           <listcell label="d1" /> 
           <listcell label="d1" /> 
           <listcell label="d1" /> 
          </listitem> 
          <listitem > 
           <listcell label="n2" /> 
           <listcell label="d2" /> 
           <listcell label="d2" /> 
           <listcell label="d2" /> 
           <listcell label="d2" /> 
          </listitem> 
         </listbox> 
         <listbox > 
          <listhead sizable="true"> 
           <listheader label="Name" 
            sort="auto(name)" sortDirection="descending" hflex="min"/> 
           <listheader label="Description" hflex="min"/> 
           <listheader label="Description Description Description Description Description" hflex="min"/> 
           <listheader label="Description" hflex="min"/> 
           <listheader label="Description Description Description Description" hflex="min"/> 
          </listhead> 
          <listitem > 
           <listcell label="n1" /> 
           <listcell label="d1" /> 
           <listcell label="d1" /> 
           <listcell label="d1" /> 
           <listcell label="d1" /> 
          </listitem> 
          <listitem > 
           <listcell label="n2" /> 
           <listcell label="d2" /> 
           <listcell label="d2" /> 
           <listcell label="d2" /> 
           <listcell label="d2" /> 
          </listitem> 
         </listbox> 
         </vbox> 
        </tabpanel> 
       </tabpanels> 
      </tabbox> 


     </groupbox> 
    </window> 
</zk> 

私はいくつかの列を追加した例の長さのために、問題を参照してくださいしてからページをリロードするには、ブラウザのウィンドウを狭くしてください。

(編集:私は今あなたがより広い列を作ることによって表示されるように水平スクロールバーを強制することができますさらに、スクロールバーのみが行うことができる2つのタブがある場合に表示されるように、listheadに真=かなりの追加)

背景:私は同じ方向に行くかもしれないいくつかの質問を見つけましたが、私が見つけられなかった問題の解決策を見つけました。注意:私は 'overflow:auto;'をタブパネルに追加したくないことに気をつけてください。これは、私のためにタブパネルを使用すると破棄します。スクロールバーを作成する...そして、スクロールバーはタブパネルのスペースの底にさえありません。これが複雑な場合は、このようなものをレイアウトした場合はおそらく考えがあるでしょう。 さらに、私は固定サイズ。追記オン

:。!!(ブラウザ)ウィンドウがリストボックスに縮小されていない縮小 - それは問題ではない成長している何かがここまでだ

おかげ

+0

?私はhflex = "min"を削除しようとしましたが、私はあなたの問題をまだ知りませんでした。実行可能なケースを提供するためにzk fiddleを使用することもお勧めします。 – TonyQ

+0

こんにちはトニー、これをチェックする時間を割いてくれてありがとう!まず第一に、スクロールバーを表示させる方法をお勧めしますか?それは私が探している解決策だろう!リストボックスをスクロールさせる方法を示すために質問を編集します。 – georg

+0

私はフィドルを試してみました。本当に便利です。私はログインを作成できないので、私のサーバー上のプレーンな設定に比べて、スクロールバーをフィドルに表示させるためには、カラムの幅をかなり大きくしなければならないことが分かりました。 – georg

答えて

0

これはおそらく解決しますあなたの問題は、私はVBOX前にDIVを追加している、あなたは下のそれに気づくことができ

<tabpanel id="mtp" > <--------## your 2nd panel ### 
         <div style="overflow:auto;position:relative"> <--change### 
         <vbox id="modulesTabpanelVbox" spacing="2" width="99%"> 

         <listbox > 
          <listhead sizable="true"> 
           <listheader label="Name" 
            sort="auto(name)" sortDirection="descending" hflex="min"/> 
           <listheader label="Description Description Description Description Description Description" hflex="min" /> 
           <listheader label="Description Description Description Description Description" hflex="min" /> 
           <listheader label="Description" hflex="min"/> 
           <listheader label="Description" hflex="min"/> 
          </listhead> 
          <listitem > 
           <listcell label="n1" /> 
           <listcell label="d1" /> 
           <listcell label="d1" /> 
           <listcell label="d1" /> 
           <listcell label="d1" /> 
          </listitem> 
          <listitem > 
           <listcell label="n2" /> 
           <listcell label="d2" /> 
           <listcell label="d2" /> 
           <listcell label="d2" /> 
           <listcell label="d2" /> 
          </listitem> 
         </listbox> 
         <listbox > 
          <listhead sizable="true"> 
           <listheader label="Name" 
            sort="auto(name)" sortDirection="descending" hflex="min"/> 
           <listheader label="Description" hflex="min"/> 
           <listheader label="Description Description Description Description Description" hflex="min"/> 
           <listheader label="Description" hflex="min"/> 
           <listheader label="Description Description Description Description" hflex="min"/> 
          </listhead> 
          <listitem > 
           <listcell label="n1" /> 
           <listcell label="d1" /> 
           <listcell label="d1" /> 
           <listcell label="d1" /> 
           <listcell label="d1" /> 
          </listitem> 
          <listitem > 
           <listcell label="n2" /> 
           <listcell label="d2" /> 
           <listcell label="d2" /> 
           <listcell label="d2" /> 
           <listcell label="d2" /> 
          </listitem> 
         </listbox> 
         </vbox> 
         </div> <----- change 
        </tabpanel> 

について、あなたはスクロールバーが現れるべきかについてケースを与えることができる アマン

関連する問題