次期Visual Studioのホワイトペーパー(日本語)が公開されてます
Visual Studio vNext: アプリケーション ライフサイクル管理
http://www.microsoft.com/japan/msdn/vstudio/using/paper/default.aspx
気になった点:StoryBoard Assistant
画面ショットをキャプチャして、簡易アニメーションを作成
というのがどこまで使えるかな?
2011年7月29日金曜日
2011年7月21日木曜日
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 のアコーディオン処理など)がある場合、それより先行させる必要有り。
・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(){デフォルトで設定されるスタイルは、absoluteのposition以外は完全に無視する。これが対応方法・・・である。
$(".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");
}) }
登録:
投稿 (Atom)