非表示の要素にテーブルを構築すると、カラムがリサイズできなくなる
Yahoo! UI Library - Datatableを使ったテーブルで、同じように初期化しているのにカラムのリサイズができるものとできないものがあるという不具合に遭遇。FireFox3で確認。IE7では再現しません。
原因
非表示のエレメントにテーブルを作成→後から表示、とするとリサイズできなくなるようです。
- カラムのリサイズができないのは、サイズ変更で使用するハンドルの高さが0になっているため。
- →FireBugでハンドルの高さを設定するとちゃんと変更できるようになる。
- で、このハンドルの高さが、テーブル作成時にヘッダの高さを参照して設定されている。テーブルの構築先要素が非表示だと、ヘッダの高さが0→ハンドルの高さも0になってしまう。
問題を再現するサンプルも作ってみました。
→非表示の要素にテーブルを構築すると、カラムがリサイズできなくなるサンプル
表示されている普通の要素に作成した場合はカラムがリサイズできますが、非表示の要素に作成→表示した場合はリサイズできません。
対策
初期化のタイミングを変更。後からハンドルの高さを強引に更新とかでもいけそうだけど。