Theme Roller を適用したら、文字の見えない部分が出てきました。



  • 以前取得したサンプル「Onsen UIの主なコンポーネント」に、
    Theme Rollerを適用したところ、文字の見えない部分が出てきました。
    <ons-list-header>タグ内と、promptの入力部分でこの症状が出ています。
    テーマは背景が黒となるものです。
    index.html内は、次のよう様になっています。
    <link rel=“stylesheet” href=“css/style.css”>
    <link rel=“stylesheet” href=“components/loader.css”>
    <link rel=“stylesheet” href=“theme/onsen-css-components.css”>
    <link rel=“stylesheet” href=“theme/onsen-css-components.min.css”>
    たぶん文字の色が、バックグラウンドと同じ色になっているからだと思われますが、
    どこを修正いたらいいのか、さっぱりわからない状況です。
    まったく初歩的な質問で恐縮ですが、よろしくお願いします。


  • Onsen UI

    @kyuhou
    index.html内 は

    <link rel=“stylesheet” href=“theme/onsen-css-components.css”>
    <link rel=“stylesheet” href=“theme/onsen-css-components.min.css”>
    

    の代わりに

    <link rel=“stylesheet” href=“theme/onsenui.css”>
    <link rel=“stylesheet” href=“theme/onsen-css-components.css”>
    

    書いてください。 onsenui.cssは必要です。



  • @Fran-Diox said:

    <link rel=“stylesheet” href=“theme/onsenui.css”>

    コメントありがとうございます。

    [Download Theme]ボタンで、ダウンロードした時には、onsenui.cssが
    含まれていませんでした。ペアとなるこのファイルはどのようにしたら手に入りますか。
    よろしくお願いします。



  • @kyuhou
    とりあえず手元にあったonsenui.cssを使ったところ
    <ons-list-header>タグ内ではうまくいきましたが、
    ng-click=“prompt()”
    のpromptでの入力欄が、文字が見えない状況のままです。

    お手数ですがご指導をお願いします。


  • Onsen UI

    @kyuhou
    「promptでの入力欄」が何を指しているのかよく分かりません。
    prompt 関数やその周辺のコードを貼り付けていただけますでしょうか?


  • Onsen UI

    @kyuhou
    また、スクリーンショットがあると嬉しいです。



  • @asial-matagawa
    0_1484631133673_upload-b6723a75-d85d-439b-bbd1-1c93318599ad
    これで、スクリーンショットが遅れるようですね。

    index.htmlファイルに、次のコードがありました。

                $scope.prompt = function() {
                    ons.notification.prompt({
                        title: "年齢の入力",
                        message: "年齢を入力してください",
                        callback: function(age) {
                            ons.notification.alert({
                                title: "入力結果",
                                message: 'あなたは' + parseInt(age || 0) + '才ですね。'
                            });
                        }
                    });
                }

  • Onsen UI

    @kyuhou
    こちらでも今回の問題を再現できました。
    今回の問題は Onsen CSS Components のバグによるものと思われます。

    修正方法についてですが、
    ダウンロードした onsen-css-components.css
    .text-input--underbar { ~~~~ }
    .text-input--underbar::invalid { ~~~~ }
    に含まれる color: #fff;color: #1f1f21; に修正していただけると、
    ダイアログ内のテキスト入力欄の文字色のみを白から黒に修正することができます。

    よろしくお願いいたします。



  • @asial-matagawa said:

    .text-input–underbar::invalid { ~~~~ }

    バージョンが違うのか.text-input–underbar::invalid { ~~~~ }は、ありませんでしたが、うまくいきました。
    ただ、.text-input–underbar { ~~~~ }の中にcolor:が2つもあるのが気になりました。
    color: inherit;
    color: #fff;
    今後ともよろしくお願いいたします。


Log in to reply