CSSとDOMにはまってきた

今日は、jQuery UIのダイアログの中に、niceformsというフォームを格好良くしてくれるライブラリを使って綺麗なフォームを表示させることにした。
http://www.emblematiq.com/projects/niceforms/
なかなか綺麗なフォームにしてくれる、が、ダイアログの中に表示させようとしたらかなりハマってしまった。
niceformsの中でプルダウンやラジオボタンの位置を決めるため中でちょこちょこやってるんだけど、ダイアログの中だとそれが邪魔してレイアウトが崩れてしまう。どうやら、element.offsetLeftとか、offsetTopとかその辺。

el.dummy.style.left = findPosX(el) + 'px';
el.dummy.style.top = findPosY(el) + 'px';

上のコードはselectタグの処理をしてる部分なんだけど、findPosY、findPosYメソッドが色々やってる部分。そしてこのあたりのコードをしたのようにしてみると大体見た目はよさそう。

el.dummy.style.top = el.offsetTop + 'px';
el.dummy.style.left = el.offsetLeft + 'px';

ラジオボタンのあたりも以下のようにすればよい。

//if(isIE == false) {el.dummy.style.left = findPosX(el) + 'px'; el.dummy.style.top = findPosY(el) + 'px';}

if(isIE == false) {el.dummy.offsetLeft = el.offsetLeft; el.offsetTop = el.offsetTop;}

お。なかなかよさそう、と思いきや。ダイアログ内のスクロールを動かしたらうにゃってレイアウトが崩れる。おしい。やっぱちゃんと勉強しないと前へ進まない気がしてきた・・・。