MDL 文本框 - 标签不浮动

Question

给定以下页面

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Document Properties</title>
    <link rel="stylesheet" href="https//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en" />
    <link rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.light_blue-light_green.min.css" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />


    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js" type="text/javascript"></script>

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style type="text/css">
        .page-content {
            padding: 20px;
        }

        .search-result-width {
            max-width: 900px;
        }

        .card-width {
            margin-bottom: 20px;
            min-width: 100%;
        }

        #contentGrid
        {
            padding:50px;
        }
    </style>
</head>

<body style="font-family:Roboto; font-size:16px; background:#fafafa;">
    <div class="mdl-layout mdl-js-layout">
        <header class="mdl-layout__header mdl-layout--waterfall">
            <div class="mdl-layout__header-row">
                <div class="mdl-layout__title">
                    Document Properties
                </div>
                <div class="mdl-layout-spacer"></div>
                <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
                  mdl-textfield--floating-label mdl-textfield--align-right" id="searchBox">
                    <label class="mdl-button mdl-js-button mdl-button--icon" for="srchText">
                        <i class="material-icons">search</i>
                    </label>
                    <div class="mdl-textfield__expandable-holder">
                        <input class="mdl-textfield__input" type="text" name="sample" id="srchText" />
                    </div>
                </div>
            </div>
            <div class="mdl-layout__header-row">
            </div>
            <div id="progress" class="mdl-progress mdl-js-progress mdl-progress__indeterminate" style="width:100%; opacity:0;"></div>
        </header>
        <main class="mdl-layout__content">
            <div class="mdl-grid" id="contentGrid">
                <form action="">
                    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                        <input class="mdl-textfield__input" type="text" id="txtScanDate" />
                        <label class="mdl-textfield__label" for="txtScanDate">Search again?</label>
                    </div>
                </form>
            </div>
        </main>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            var id = getParameterByName('Id');
            var jqxhr = $.getJSON("GetPatientDocument.ashx?DocumentId=" + id, function () {

            }).done(function (data) {
                var i = 0;
            }).fail(function (jqXHR, textStatus, errorThrown) {
                alert('There has been a problem retrieving document properties - ' + textStatus + ' ' + errorThrown);
            }).always(function () {

            });
        })

        function getParameterByName(name, url) {
            if (!url) url = window.location.href;
            name = name.replace(/[\[\]]/g, "\$&");
            var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
                results = regex.exec(url);
            if (!results) return null;
            if (!results[2]) return '';
            return decodeURIComponent(results[2].replace(/\+/g, " "));
        }
    </script>
</body>
</html>

表单中的 txtScanDate 字段 - 标签在您输入时应该浮动 - 但是当嵌入此页面时它根本不会浮动。即使我从浮动页面正在工作的页面粘贴代码，它实际上仍然没有浮动。

我在 firefox 和 IE10 中都试过了，所以不是浏览器问题。我也试过将它带到 contentGrid 之外，删除 contentGrid 上的填充，但仍然没有浮动标签 - 任何人都有任何想法。

Answer 1

另一个荷马辛普森时刻:(

我缺少对 MDL 脚本的引用

<script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>

它应该插入到 <body> 标签底部的脚本之前和现有脚本标签之前。

只给出答案，让正在摸索的人记得先看看

MDL 文本框 - 标签不浮动

MDL Textbox - label does not float

html

css

material-design-lite