2015年04月02日
川俣晶の縁側ソフトウェア技術雑記 total 4299 count

ASP.MVC NETのプロジェクトにjQueryMobileを追加するとボタンが押せない問題

Written By: 川俣 晶連絡先

「凄い日数が掛かったがようやく原因が分かった」

「どんな問題?」

「ASP.MVC NETのプロジェクトをVisual Studi 2013で作成してjQueryMobileを追加する。すると、ボタンが押せなくなるが押せる場合もある」

「ボタンが押せないってどういうことだよ」

「実はゼロから自分でHTMLを書いたら押せた。そこで、コードを比較しながら特定した」

「問題はなんだい?」

「ASP.MVC NETのプロジェクトを作成すると自動的にSite.cssというCSSファイルが作成される」

「たかが、CSSファイルがボタンを妨害するなんてあり得るの?」

「その疑問はもっともだ。自分のそう思った。しかし、可能だったのだ」

「メカニズムを説明してくれ」

「問題はSite.cssの以下の部分にあった」

/* Set width on the form input elements since they're 100% wide by default */

input,

select,

textarea {

    max-width: 280px;

}

「これがなんだ?」

「これは、ボタンの押せる部分を左から280ピクセルに制限する機能を発揮していた。ボタンは横長に出てくるから、ウィンドウの幅一杯に出てくる。その場所の全てが押せるように画面上では思える。だが、本当に押せる場所は一部に過ぎなかったのだ」

「対策はなんだい?」

「この設定をコメントアウトするかざっくり削除する。それでオッケーだった」