jQuery UIのDialogの中にあるものをはみ出して表示させたい
jQuery UIとjqTransformを使ってるときに、jqTransformのセレクトボックスってHTMLのselectタグを使うのではなく、divとul,liタグを使ってきれいなスタイルを適用するようになっている。しかし、jQuery UIのダイアログ(Dialog)のスタイルはoverflow: hiddenで設定されている。コレがあると、ダイアログをはみ出したものは表示されなくなってしまう。(ま、普通はこっちのほうが好都合だから、特に気にならないんだけど)こんなふうに。
都道府県のセレクトボックスがダイアログをはみ出している部分で切れてしまっている。overflow: hiddenのあるおかげ。
そして、なぜかこのスタイルはJavaScriptの中(ui.dialog.js)で設定するようになっている。
uiDialog = (this.uiDialog = $('<div/>')) .appendTo(document.body) .hide() .addClass(uiDialogClasses + options.dialogClass) .css({ position: 'absolute', overflow: 'hidden', // この部分(ui.dialog.js 53行目) zIndex: options.zIndex })
こいつを直接変更すると他のダイアログに影響するので、ダイアログをオープンするときに設定するようにする。
var help = $('<div>' + 'ダイアログの中身のHTML' + '</div>'); help.dialog({ title: 'ダイアログ', open: function() { $(this.parentNode).attr('id', 'id_dialog'); $('#id_contact_dialog').css('overflow','visible'); } });
あと、ここでIDを設定しているのは以下のCSSクラスを適用するため。
/* Dialog ----------------------------------*/ #id_dialog.ui-dialog .ui-dialog-content { border: 0; padding: .5em 1em; background: none; overflow: visible; zoom: 1; }
もともと、ui.dialog.cssの部分で「overflow: auto」となっていた部分を「overflow: visible;」に置き換えるために設定している。「overflow: auto」があると、ダイアログからはみ出すものがあった場合、ダイアログにスクロールが自動で付いてしまう(なんとしてでももダイアログの外に出さないようになっている)。今回はスクロールも出さずにそのままはみ出してもらいたいのでこれを上書きしておく。
と、これでうまくいくかと思ったんだけどなぜかうまくいかない。色々試した結果(いや、ここままでもだいぶ色々試しながらやったんだけど更に)、「overflow:visible」をスクリプトで設定するタイミングに問題があるらしく、以下のように設定するタイミングをずらしてみると見事成功。
var help = $('<div>' + 'ダイアログの中身のHTML' + '</div>'); help.dialog({ title: 'ダイアログ', open: function() { $(this.parentNode).attr('id', 'id_dialog'); var delay = function() { $('#id_contact_dialog').css('overflow','visible'); } // 300ミリ秒待ってからスタイルを適用 setTimeout(delay, 300); } });