ASP.NET positionが指定されたdiv内だとComboboxが正常に表示されない

AjaxComponentToolKitのComboboxは様々なバグがある。とりあえず、現時点で確認しているのは下記点。

・position:absolute/relativeが指定されたdiv内で使用すると、コンボボックスのリストの位置がずれる。これは、コンボボックスのリストの表示位置が画面左上からの絶対位置(absolute)で指定してされるためであり、このため親divでposition指定してしまうとうまくテキストボックスの下につかなくなる。

・display:noneで表示を隠している箇所にあるコンボボックスは、ボタンが消えリストも表示されなくなる。これは、display:noneが指定された箇所についてはオブジェクトの長さ(offsetWidth)が0になってしまうため・・・と思われる。

このトラップを回避するには、コンボボックスのスタイルの挙動をこちらでいじってやる必要がある。CSSとJavaScript、両方で対応する。
・CSSでの対応
・コンボボックスを使用するエリアには、以下スタイルを適用
.combo-area{
              position:static !important;
    }
    position absoluteがきくように、親要素のpositionをstaticで初期化する。!importantは、要素のstyleで直接指定されたものより優先される。

・JavaScriptでの対応(JQuery使用)
ComboboxのCssClassにcomboを設定した上で、下記スクリプトをonloadで走らせる。要素をdisplay:noneにするような処理(例：JQuery ui のアコーディオン処理など)がある場合、それより先行させる必要有り。

function adjustCombobox(){
$(".combo .ajax__combobox_itemlist").each(function(){

//コンボボックスの高さ指定(リスト要素×20pxで指定)
var liCount = $(this).find("li").length;
var h = 20 * liCount;
$(this).css("height", h + "px !important");

//コンボボックスの幅指定(テキストボックスの幅とあわせる)
var textId = $(this).attr("id").replace("OptionList","TextBox");
var boxWidth = $("#"+textId).width();
var boxHeight = $("#"+textId).height();
$(this).css("width", boxWidth + "px !important");

//ボタンのサイズ指定(テキストボックスの高さ+6にする(そのままだと小さい))
var btnId = $(this).attr("id").replace("OptionList","Button"); $("#"+btnId).css("width",( boxHeight + 6 )+ "px !important");
$("#"+btnId).css("height",( boxHeight + 6 ) + "px !important");
}) }

デフォルトで設定されるスタイルは、absoluteのposition以外は完全に無視する。これが対応方法・・・である。