ZK 的 Listbox 或 Grid 在 IE 及 Firefox 中若無資料時沒有橫向 Scrollbar

ZK 的 Listbox(或 Grid) 當欄位總寬大於 Listbox 寬度，且無資料時，在 IE 及 Firefox 中不會產生橫向 Scrollbar，在 Chrome 中則會有，這裡就要來說明如何讓 IE 及 Firefox 也能產生 Scrollbar

下面是我測試的環境：
ZK 3.6.1
Firefox 3.0.6
IE 6.0.29

以 Listbox 為例，下面的 Code 在 IE 及 Firefox 運行時無法有 Scrollbar
<?page title="Test Listbox" contentType="text/html;charset=UTF-8"?> <zk> <window border="none" width="100%" height="100%"> <borderlayout width="100%" height="100%"> <north height="20%"> 一些查詢條件 </north> <center flex="true"> <listbox fixedLayout="true"> <listhead> <listheader label="Col 1" width="300px"/> <listheader label="Col 2" width="300px"/> <listheader label="Col 3" width="300px"/> <listheader label="Col 4" width="300px"/> <listheader label="Col 5" width="300px"/> <listheader label="Col 6" width="300px"/> </listhead> </listbox> </center> </borderlayout> </window> </zk>

此時我們只要加一下樣式即可
<?page title="Test Listbox" contentType="text/html;charset=UTF-8"?> <zk> <style> div.z-listbox div.z-listbox-body table{ height:1px; } </style> <window border="none" width="100%" height="100%"> <borderlayout width="100%" height="100%"> <north height="20%"> 一些查詢條件 </north> <center flex="true"> <listbox fixedLayout="true"> <listhead> <listheader label="Col 1" width="300px"/> <listheader label="Col 2" width="300px"/> <listheader label="Col 3" width="300px"/> <listheader label="Col 4" width="300px"/> <listheader label="Col 5" width="300px"/> <listheader label="Col 6" width="300px"/> </listhead> </listbox> </center> </borderlayout> </window> </zk>

若是整個 Webap 都要用同樣的設定，那就應該用 css 檔會比較好，只要在 WEB-INF/zk.xml 中加上下面語法
<desktop-config> <theme-uri>/css/style-*-*.css</theme-uri> </desktop-config>
theme-uri 標籤內即是 css 檔的路徑，這裡也可以使用 * 來自動換成對應的瀏覽器代號及語系(詳見 Dev Guide)

若是 Grid ，則要使用下面的樣式
<style> div.z-grid div.z-grid-body table{ height:1px; } </style>

會無法出現 Scrollbar 的原因，是 IE 及 Firefox 在內容是不可見時就不產生 Scrollbar，所以我們就設法讓它稍微可見來避開這個問題
--gs--
{ZK}{ZKOSS}

沒找到你要的東西嗎？歡迎留下你的問題！若是我知道的，我會盡力的回答。