[英]Google MDL Waterfall header not shrinking on scroll and scroll bar on right of body
DataThe following shows the header and main body of a Google MDL Page. 数据下面显示了Google MDL页面的标题和主体。 I'm trying to use a waterfall header - where the header shrinks as you scroll.
我正在尝试使用瀑布式标题-在滚动时标题会缩小。
With the page below what I am getting is that the header does not scroll and I get a scroll bar on the right of the body. 在页面下方,我得到的是标题没有滚动,并且在主体右侧显示了滚动条。
So how would I set this up so the Waterfall header shrinks? 那么我将如何设置它以使Waterfall标头缩小? Browser is IE10)
浏览器是IE10)
<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 Management
</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>
</header>
<main class="mdl-layout__content">
<div class="mdl-grid search-result-width page-content" id="contentGrid">
<!--Dummy-->
<div class="mdl-card mdl-shadow--2dp card-width">
<div>
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">
Name
</h2>
<div class="mdl-layout-spacer"></div>
<i class="material-icons">person</i>
</div>
<div class="mdl-card__supporting-text">
<p>
An Address </p>
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" href="patientDocumentList.html?Id=08029aa4800b0ff6">DETAILS</a>
</div>
</div>
</div>
</div>
</main>
在您的<header class="mdl-layout__header mdl-layout__header--waterfall">
您错过了mdl-layout__header--waterfall
因为您已经编写了mdl-layout--waterfall
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.