标签: materialize

我在填充输入内容时遇到问题。这就是我在不添加任何内容的情况下查看输入的方式：

当我尝试添加一个时，我想placeholder在内容和内容value中添加一个填充：

input{
    padding-left: 10px;
}

这发生了：

就像你看到的：

1. 在textarea具有宽度的100％，但添加填充到输入使他们得到了最大宽度。
2. 当我在同一行有两个输入时，它们会相互重叠。

我尝试width用百分比来改变每个输入的 ，以获得看起来不错的东西，但是当屏幕的大小改变并变得响应时，它成为一个问题。

所以，我尝试了另一种解决方案；为此，我更改了填充和调整大小：

::-webkit-input-placeholder { 
    padding-left: 10px;
}

:-moz-placeholder { /* Firefox 18- */
    color: grey; 
    padding-left: 10px;
}

::-moz-placeholder {  /* Firefox 19+ */
    padding-left: 10px; 
}

:-ms-input-placeholder {
    padding-left: 10px; 
}

但现在，我有另一个问题，它解决了我的问题，因为，这添加了一个填充，但只添加placeholder到内容中value。

我该如何解决我的问题？任何的想法？

我不明白为什么字符数显示为“1/101/10”。

代码笔：http ://codepen.io/anon/pen/avdbLG

看来“/101/”是最大限制（10）和当前计数（1）的组合。当您在该字段中键入时，“/101/”会随着键入的字符数量而增加。

HTML：

<div class="row">
  <form class="col s12">
    <div class="row">
      <div class="input-field col s6">
        <input id="input_text" type="text" length="10">
        <label for="input_text">Input text</label>
      </div>
    </div>
    <div class="row">
      <div class="input-field col s12">
        <textarea id="textarea1" class="materialize-textarea" length="120"></textarea>
        <label for="textarea1">Textarea</label>
      </div>
    </div>
  </form>
</div>

JS：

$(document).ready(function() {
  $('input#input_text, textarea#textarea1').characterCounter();
});

是否可以在物化中进行嵌套下拉？第二次下拉应该在右侧

<a class='dropdown-button btn' href='#' data-activates='dropdown1' data-beloworigin="true">Drop Me!</a>
<ul id='dropdown1' class='dropdown-content'>
    <li><a class='dropdown-button d' href='#' data-activates='dropdown2' data-hover="hover" data-alignment="right">Drop Me!</a></li>
    <li><a href="#!">two</a></li>
    <li><a href="#!">three</a></li>
</ul>
<ul id='dropdown2' class='dropdown-content'>
    <li><a href="#!">second one</a></li>
    <li><a href="#!">second two</a></li>
    <li><a href="#!">second three</a></li>
</ul>

https://jsfiddle.net/m0sdcn6e/

像这样的嵌套不起作用.有任何想法吗？

谢谢Albert M.

我有一个 Materialize Multiple Select 元素。但我似乎找不到检索所选值的方法。有人知道如何检索选定的值吗？

这是您选择它时的外观：

这是关闭它时的外观：

但问题是如何在关闭时检索选择器内的值。

编辑：我正在使用 Materialize CSS ( http://materializecss.com )

我在我的网站上使用 Materializecss，我想在用户按下大动作按钮时在较小的动作按钮上显示工具提示。Materializecss 默认仅在悬停时显示工具提示。

有没有办法改变这种情况？

谢谢

<li> <!-- Small button -->
    <a class="btn-floating green tooltipped" data-position="left" data-delay="50" data-tooltip="Add friends">
        <i class="material-icons">add</i>
    </a>
</li>

即使我给了其中一个选项卡 a classof ，活动选项卡在 Modal 中也不显示下划线active。但是，一旦我单击其中一个选项卡，它就会开始工作。问题是什么？

这是一个JSFiddle。

这是我给元素class命名的地方：

...
<a class="active" href="#test1">Test 1</a>
...

任何帮助，将不胜感激。

每个人！我正在尝试使用 Materialize CSS 和 jQuery 验证插件 ( https://jqueryvalidation.org/ )创建我的注册表单。

只是想知道如何将我为插件中的每个验证规则设置的自定义错误消息放入 input 元素的 data-error 属性中？

根据 Materialize CSS 的文档 ( http://materializecss.com/forms.html )，我们可以通过向输入字段标签添加 data-error 属性来添加自定义验证错误消息。但是对于任何被破坏的验证规则，这只会​​显示一条消息。

我想为用户违反的特定验证规则显示适当的错误消息。

这是我的表格：

<form id="reg-form">
<div class="row">
    <div class="input-field col s6">
        <input id="firstname" name="fname" type="text"/>
        <label for="firstname">First Name</label>
    </div>
    <div class="input-field col s6">
        <input id="lastname" name="lname" type="text">
        <label for="lastname">Last Name</label>
    </div>
</div>
<div class="row">
    <div class="input-field col s12">
        <input id="email" name="email" type="email" required/>
        <label for="email">Email</label>
    </div>
</div>
<div class="row">
    <div class="input-field col s12">
        <input id="password" name="pass" type="password" required/> …

我最近将我的项目从 Meteor 迁移到 Webpack，并且在尝试使用 Materialize.css 构建我的 UI 时遇到错误。自定义实现函数（例如$(...).tooltip）会导致在控制台中抛出 Uncaught TypeError。这不允许我在我的应用程序中使用 Materialize。

在 webpack 应用程序中尝试使用 Materialize 时，还有其他人遇到过这些类型的错误吗？任何有关如何解决这些问题的方向将不胜感激。谢谢！

我用来在目录根目录下的 index.js 中加载 Materialize 模块及其依赖项的代码如下。

索引.js：

import 'materialize-loader';
import 'materialize-css/dist/css/materialize.css';
window.jQuery = require('jquery');
window.$ = require('jquery');
import 'materialize-css/dist/js/materialize.js';
import 'materialize-css/js/init.js';

我最近开始使用 materializecss 制作网站。一切都很顺利，除了我无法让折叠件正常工作。它们出现在我的网站上，但根本无法点击。我已经导入了所有的 css 和 js 文件，但这似乎没有帮助。

<html>
    <head>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <body>
        <ul class="collapsible">
            <li>
            <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
            <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
            </li>
            <li>
            <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
            <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
            </li>
            <li>
            <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
            <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
            </li>
        </ul>


    <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
</html>

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

我得到了所有的样式表和脚本，我需要做什么？

我在使用 MaterializeCSS Timepicker 组件时遇到了问题。

似乎无法设置在组件中实际显示的初始值。我能得到的唯一行为是当我打开模态时选择时间，一旦我单击“确定”，它实际上会在组件中显示该时间。

这是我加载页面时组件的样子：

这就是我打开时间选择器时的样子，只需单击“确定”：

有没有办法让这个组件显示这个初始值而不必单击“确定”？

注意：设置 time 属性在视觉上没有任何作用，在初始化期间也没有 defaultTime 选项。