金額入力制御後の不具合対応-1(Parllet の場合 jQueryバージョンアップでダイアログが隠れた) [公開アプリ]
※ 注意! このエントリは ブログラミング(ブログを書きながらプログラミング)です。筆者がポストした時には気づいていない誤り等が後から発覚する恐れがあります。(過去の事例:2014年 1/4 の誤りに 1/9 に気づいて訂正、等 ^^; )
※ 挿絵は 3/25 ~4/17 の挿絵を、画像が徐々に変わるアニメを作れるFotoMorph を使って繋げたものです(参考:フリーソフトFotoMorphで画像が徐々に変わるアニメーションを試した件)。GIFアニメ非対応ブラウザの方ごめんなさい!
sakashushu です。
Parllet(個人で作成・公開しているアルファ版のWeb家計簿) の金額入力制御の不具合対応シリーズ が始まってしまいます。
と言っても、前回 までの金額入力の制御で、Google Hosted Libraries から読み込むjQuery と jQuery UI のバージョンを上げたことで上手く動かなくなったことへの対応です。
スポンサードリンク
■ ざっくり環境
OS:Windows 7 Home Premium
Play Flamework:1.2.4
ブラウザ:IE 11.0
Github公開リポジトリ のCommitバージョン(スタート時点):こちら
■ 現状
jQuery UI dialog が最前面に表示されなくなっています。
4/14 に変更した Parllet/app/views/head.html 内の
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
の部分を
<script>google.load('jquery', '1')</script>
<script>google.load('jqueryui', '1')</script>
に戻してみると、
最前面に表示されます。
新しいバージョンの jQuery UI の方が、何らかの指定が必要ってことですかね?
いつものように体当たりでブログラミング(ブログを書きながらプログラミング)していきます。
■ 体当たり開始
「jquery ui dialog 最前面」で検索!
"moveToTop" dialog("moveToTop") ダイアログを最前面に移動します。 (中略)
zIndex Integer
1000 ダイアログの z-index を指定します。
via: Dialog - jQuery UI API 1.8.4 日本語リファレンス - StackTrace
「バージョン1.8.4 の情報だし、どうかな~」と思いながらも一応試したんですが、どちらも効果はありませんでした・・。
他にも検索ワードを変えたりしていろいろと試してみたんですが、効果のある方法が見つけられません。
仕方がないので自力で試そうと、F12開発者ツールでz-index を操作したところ、最前面に出てきました!
他に方法も見つかりそうに無いので、とにかく CSS で .ui-dialog に直接スタイル指定してみます。
Parllet/public/stylesheets/main.css 内に追記
.ui-dialog {
z-index: 9999;
}
リロードしてダイアログを開きなおし。
最前面に表示されました。
お作法的には宜しくないのかもしれませんが、今回はこれでいきます。
※ 正しい手法をご存知の方、ご教示いただけると助かります!
しかしこの時点ですでに次の不具合発見!
取扱日のとこ・・・、思いっきり null て表示されとります。
※ 最初に jQuery のバージョンを戻した時には null になっていないので、やはり jQueryバージョンを新しくしたことによる影響と思われます。
ということで、次回はこの対応を予定しておきます。
続きます!
いつも最後まで読んでいただいてありがとうございますm(_ _)m
何度も見に来ていただけることが、間違いなく私の原動力となっています(^_^)
またお越しくださいませませ!
コメント 0