标签: materialize

我正在使用带有Roboto 2.0字体的Materialise CSS.字体在Chrome 43和Firefox 37中看起来很糟糕.令人惊讶的是它看起来非常好(完全结果):

其他字体(如Lato和Open Sans)以及我的工作计算机也是如此(相同的视频卡和操作系统,如果有关系).我的设置是否有问题(Windows 7 x64 + NVIDIA GTX 780 1920x1080显示屏)？

如何将登录框水平和垂直居中？

这是我的结构:

<div class="container">
<div class="row">
<div class="col s12 m6">
    <div class="card">
        <div class="card-content">
            <span class="card-title black-text">Sign In</span>
            <form>
                <div class="row">
                    <div class="input-field col s12">
                        <input placeholder="Placeholder" id="firstname" type="text" class="validate">
                        <label for="firstname" class="active">First Name</label>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12">
                        <input placeholder="Placeholder" id="lastname" type="text" class="validate">
                        <label for="lastname" class="active">Last Name</label>
                    </div>
                </div>
            </form>
        </div>
        <div class="card-action">
            <input type="submit" class="btn" value="Sign In">
        </div>
    </div>
</div>

我尝试使用valign-wrapper和valign类,但它不起作用.

我正在编写一个使用Webpack的客户端应用程序,我无法弄清楚如何要求materialize-css包.我正在使用Henrik Joreteg的hjs-webpack包,并且通过在sass文件(例如@import 'yeticss')中导入包含了nic包,但这不适用于实现.import 'materialize-css'像任何其他包一样直接在代码中(例如在JS文件中)也不起作用.

我正在使用Materialize.css框架,我注意到文本input字段的颜色是绿色,因此是label.

有没有办法将颜色改变为不同的颜色？

<input type="text" id="username" />
<label for="username">Username</label>

最近,我开始研究一个包含一些带有某些字段的表的项目,我想通过图标一侧的MaterialiseCSS添加一些Material Design Icons.看看图像,你可能会得到它

:

我尝试了一切,垂直对齐,内联(-block),flex,以及我在堆栈溢出中找到的所有内容.所以不,这不是重复,我真的需要帮助.谢谢.

我正在使用Materialise css,我想在中小屏幕中将导航栏变为sidenav.我就像在文档中那样做了.问题是,当我单击菜单按钮时,sidenav会打开,但它就像下面的图像

我无法点击sidenav中的链接,因为sidenav-overlay覆盖了所有页面甚至sidenav本身.当我尝试点击链接时它正在关闭.有什么建议怎么解决？

HTML:

<div class="navbar-fixed">
    <nav class="">
        <div class="nav-wrapper red lighten-1">
            <div class="container-fluid">
                <a href="#!" class="brand-logo">
                    <img src="img/logo.png">
                </a>
                <a href="#" data-activates="mobile-sidenav" class="button-collapse"><i class="material-icons">menu</i></a>
                <ul class="right hide-on-med-and-down">
                    <li><a href="#">How It Works?</a></li>
                    <li><a href="#">Technology</a></li>
                    <li><a href="#">Pricing</a></li>
                    <li><a href="#">More</a></li>
                    <li><button class="waves-effect waves-light btn deep-orange">Request Demo</button></li>
                </ul>
                <ul class="side-nav" id="mobile-sidenav">
                    <li><a href="#">How It Works?</a></li>
                    <li><a href="#">Technology</a></li>
                    <li><a href="#">Pricing</a></li>
                    <li><a href="#">More</a></li>
                    <li><button class="waves-effect waves-light btn deep-orange">Request Demo</button></li>
                </ul>
            </div>
        </div>
    </nav>
</div>

我意识到导航栏固定有z-index997(sidenav-overlay也是997),我认为这可能会导致问题.然而,侧导航有固定的定位和z-index999.即使它有固定位置,它是否依赖于它的父母？

编辑:我可以通过更改leftsidenav-overlay 的属性来解决它,但我不想手动设置它.我正在寻找另一种解决方案.

通常,使用Materialize,文本输入框的标签会显示在输入框内,直到用户输入选择框并在其中输入文本.但是,当通过javascript填充框的值时,标签不会移开.它保留在框中并与输入的文本重叠.有没有办法用javascript触发标签转换,所以这不会发生？

我正在寻找MaterialiseCss的自动完成表单,这个插件是什么？我试着使用select2但是css看起来不太好

我为物化模态写了一个简单的代码.
HTML代码:

<a class="waves-effect waves-light btn view" data-target="modal1">View Scores</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
  <div class="modal-content">
    <h4>Modal Header</h4>
    <p>A bunch of text</p>
  </div>
  <div class="modal-footer">
    <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
  </div>
</div>  

JS代码:

$(document).ready(function() {
  // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
  /*$('.view').click(function (){
    $('#modal1').modal('open'); 
    alert('edskjcxnm');
  });*/
  /*$('.view').leanModal();*/
  $('#modal1').modal('open');
});  

JSFiddle链接:https://jsfiddle.net/7f6hmgcf/
为什么不工作？

我似乎无法在Materialise网站上找到关于元素定位的任何文档.任何人都可以帮我中心这个按钮吗？提前致谢.

<div id="div">

    <a class="waves-effect waves-light btn-large blue"><i class="material-icons right">cloud</i>Enter</a>

</div>

#div {
  width: 100%;
  height: 100vh;
}