0

次のコードで単純なテキスト入力フィールドを使用するBootstrap Material design テーマを使用しようとしています。

<div class="form-control-wrapper">
    <input class="form-control empty" type="text"></input>
    <div class="floating-label">
        Title
    </div>
    <span class="material-input"></span>
</div>

次のようになります。

ここに画像の説明を入力

しかし、テキストを入力すると、テキストとラベルが混ざり合っています。

ここに画像の説明を入力

floating-label消えてはいけませんか？私は何を間違っていますか？

すべてのヒントは大歓迎です！

[編集2]

これらはすべて私のインポートです<head>：

<html ng-app="myApp">
<head>
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-2.1.4.js"></script>

    <!-- Bootstrap -->
    <link src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <!-- Bootstrap Material Design (https://github.com/FezVrasta/bootstrap-material-design) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/css/roboto.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/css/material-fullpalette.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/css/ripples.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/js/material.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/js/ripples.min.js"></script>

    <!-- Angular -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>

    <!-- My own scripts -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>

</head>
<body>

    <div ui-view></div>

</body>
</html>

main.htmlAngularを使用してロードしたもの：

<form novalidate>
    <div class="form-control-wrapper">
        <input class="form-control empty" type="text"></input>
        <div class="floating-label">
            Title
        </div>
        <span class="material-input"></span>
    </div>
</form>

[編集 3] 私にとっては、フィドルも機能しません。Chrome と Firefox の両方で試しました。どちらも最新です。見てみな：

ここに画像の説明を入力

何か案は？

4

3 に答える 3

1

入力に「空」のクラスをハードコーディングしないでください。代わりに、DOM を構築する material.js スクリプトを使用し、「空」の css クラスを処理する必要があります。

既に material.js をインポートしているので、問題ありません。必要な変更は次のとおりです。

  1. material.js で初期化します。

<script>
  $.material.init();
</script>

  1. DOM をクリーンアップします。フォームは次のようになります。 
    <form novalidate>
<input type="text" class="form-control floating-label" placeholder="your label"/>
</form>

これが役立つことを願っています。

于 2015-10-03T18:04:22.127 に答える