标签: materialize

我有一张 Materialise 卡，右上角有一个下拉菜单。但是，当单击下拉按钮时，菜单显示但菜单内容不会超出卡片的边界：

<ul id='myDropdown-menu' class='dropdown-content'>
  <li><a href="#">Option 1</a></li>
  <li><a href="#">Option 2</a></li>
</ul>

<div class="card white">
  <div class="card-content grey-text text-darken-4">
    <span class="card-title grey-text text-darken-4">Card Title</span>
      <a id="myDropdown" class='btn-floating waves-effect waves-light transparent right' href='#' data-activates='myDropdown-menu'><i class="material-icons blue-grey-text text-darken-4">more_vert</i></a>
  </div>
</div>

如何让下拉菜单超出卡片的边界？

http://jsfiddle.net/6sjLbrht/

我正在启动一个需要支持从右到左 (RTL) 语言的项目，内容将通过 JSon 加载。我想使用 MaterializeCss 作为我的 CSS 框架和 ASP.NET MVC 5。

想知道是否可以切换到 RTL？有人可以指导我实现此功能吗？

我正在尝试向表单添加复选框,供用户选择他们想要的工作室,但我无法显示复选框.我正在使用Materialise Css gem和rails.

我的表格是下一个:

<div class="row">
  <% workshops = Workshop.all.order("date") %>
  <% workshops.each do |workshop| %>
    <div class=" col m4 s6">
      <%= f.label "#{workshop.name} \n\r #{workshop.date}", for:"workshop_id", id:"workshop_id" %>
      <%= f.check_box :workshop_id, id:"workshop_id" %>
    </div>
  <% end %>  
  <div class="actions col m6 s12">
    <br>
    <br>
    <br>
    <%= f.submit "Save", class:"btn green"%> 
  </div>
</div>

我曾尝试使用和不使用ID和用于输入和标签中的属性,但似乎没有任何工作.我错过了什么吗？

编辑1

从Materialise css显示的css如下:

[type="checkbox"]:not(:checked), [type="checkbox"]:checked {
    position: absolute;
    left: -9999px;
    visibility: hidden;
}

我刚刚将Materialise集成到我的Rails项目中gem 'materialize-sass'.出于某种原因,选择输入显示两个插入符号而不是1.

select输入的代码基本上是他们网站上示例的一个分支.

<div class="input-field">
    <select name="tutor_profile[dob_month]" id="tutor_profile_dob_month">
        <option value="" disabled selected>Choose your month</option>
        <option value="1">January</option>
        <option value="2">February</option>
        <option value="3">March</option>
        <option value="4">April</option>
        <option value="5">May</option>
        <option value="6">June</option>
        <option value="7">July</option>
        <option value="8">August</option>
        <option value="9">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
    </select>
    <label>Birthday</label>
</div>

我试过调整开发人员控制台中的选择按钮的CSS样式,但没有成功.选择输入中的任何元素都没有其他样式.

我正在使用的其他CSS框架是bootstrap,bootstrap-tagsinput,twitter-typeahead和jquery-ui.我想知道是否有人有类似的经历.

我正在研究角度2.我使用了materialize-css,它适用于类但问题来了materialize toast.我使用gulpfile.js配置了materialize我需要在gulpfile中添加任何其他js文件吗？

<a class="btn" (click)="Materialize.toast('I am a toast', 4000)">Toast!</a>

使用此控制台显示错误
Materialize is not defined

我问这个问题是因为我遇到了这个问题，并且发现关于此事的信息很少（不简洁），这里是：

有一个html表单，如何使用materializecss正确设置提交按钮？

如果您尝试传统方式，那就是：

<form>
    <div class="file-field input-field">
        ...
        <input type ="submit" class ="btn waves-effect waves-light" value = "Submit"/>
    </div>
</form>

这是你会得到的：

如您所见，可点击部分只是按钮的中间部分，其余部分不会触发表单提交。

我正在寻找的是提供替代方案的答案（没有 javascript，只有 html）。我会发布我自己的答案，并希望有有趣的替代方案。

我有以下代码：

    <ul id="slide-out" class="side-nav">
        <li><a class="subheader">Scalls Seleccionados</a></li>
        <li><a class="btn waves-effect waves-light cyan"><i class="material-icons">inbox</i>Scall 1</a></li>
        <li><a class="btn waves-effect waves-light cyan"><i class="material-icons">inbox</i>Scall 2</a></li>
        <li><a class="btn waves-effect waves-light cyan"><i class="material-icons">inbox</i>Scall 3</a></li>
        <li><div class="divider"></div></li>
    </ul>
    <a data-activates="slide-out" class="button-collapse btn-floating btn-large cyan" style="top: 10px; left: 10px;">
        <i class="material-icons">menu</i>
    </a>

当我在 Materializecss 中显示 sidenav 时，您知道如何禁用/删除叠加层吗？

我花了很多时间试图删除它。

是否有任何方法或任何插件使用Materialisecss框架制作步进器并遵循Material Design准则？

我正在使用Materialise.css作为当前项目,我在其中有一些输入表单的下拉列表.

下拉选项可以关闭:

• 点击外面 .dropdown-content
• 点击里面 .dropdown-content
• 点击 .dropdown-button

我需要的是在点击它内部时不要关闭,因为我需要能够填写输入表格和其他动作.

这是一个简单的例子

我试图让 sidenav 为 Materializecss 框架工作。

MATERIALIZECSS http://next.materializecss.com/getting-started.html

SIDENAV 演示http://next.materializecss.com/sidenav.html

我的 CODEPEN https://codepen.io/gregoryksanders/pen/RxoyqB

<head>
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.2/css/materialize.min.css">

    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/
</head>
<body>
    <ul id="slide-out" class="sidenav">
        <li><a href="#!"><i class="material-icons">cloud</i>First Link With Icon</a></li>
        <li><a href="#!">Second Link</a></li>
        <li><div class="divider"></div></li>
        <li><a class="subheader">Subheader</a></li>
        <li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
    </ul>
    <a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.2/js/materialize.min.js"></script> …