标签: materialize

Materialize框架带有奇怪的布局(至少对我而言).我在列之间找不到任何余量.这是我的代码:

<div class="container">
<div class="row">
  <div class="col s4">
      kerlos      
  </div>
  <div class="col s4">
      kerlos      
  </div>
  <div class="col s4">
      kerlos     
  </div>
</div> 
</div>

这就是浏览器的外观.

列之间没有边距!

我想让Submit按钮的长度与它上面的输入字段相同.

<div class="row">
     <div class="input-field col s12">
        <input id="speciality" type="text" class="validate">
            <label for="speciality">Speciality</label>
     </div>
</div>
<div class="row">
    <button class="btn waves-effect waves-light" type="submit" name="action">Search
        <i class="material-icons right">search</i>
    </button>
</div>

我想在没有jQuery的情况下使用materializecss.例如,我想在不使用jQuery的情况下执行以下操作:

$('.chips-initial').material_chip({
    data: [{
      tag: 'Apple',
    }, {
      tag: 'Microsoft',
    }, {
      tag: 'Google',
    }],
  });

谢谢

我正在尝试创建一个表单,以便用户可以保存setting具有默认teams(多个)和他们professions(单个)的表单.我可以使用simple_form以下代码行完成此操作,但我尝试使用自动完成功能,因为下拉列表与我的设计不兼容.

• <%= f.association :profession %>
• <%= f.association :team, input_html: { multiple: true } %>

我正在将一个集合中的JSON加载到data-autocomplete-source我的一个属性中inputs,jquery然后稍微循环一下这些属性,然后初始化实现.autocomplete,我还需要.chips为许多关联做这个.

UI元素正在按照我的意愿工作,但我无法弄清楚如何保存新记录.我有两个问题:

1. Unpermitted parameters: :team_name, :profession_name- 我一直在努力调整本教程并相信Step 11会在模型中有效地转换它,但显然不理解某些东西......
2. "setting"=>{"team_name"=>"", "profession_name"=>"Consultant Doctor"}- 尝试保存记录时未识别team_name值(即chips).我有一些讨厌的jQuery转移了对id从div所生成的input,我希望会工作...

我还检查过很多关于Stack Overflow的问题(其中一些似乎与这个问题类似,通常使用jqueryui),但无法弄清楚如何调整答案.

如何在实体化chip和autocomplete输入中使用模型中的名称并将它们的关联保存id到记录中？

任何帮助或指导将不胜感激.

setting.rb

class Setting < ApplicationRecord

  has_and_belongs_to_many :team, optional: true

  belongs_to :user
  belongs_to …

我在我的模板中有这个代码:

<div class="input-field col s6">
    <select v-on:change="selectChaned" v-model="item.size">
        <option value="" disabled selected>Choose your option</option>
        <option v-on:click="optionClicked" v-for="size in case_sizes" v-bind:value="{{ size }}">{{ size }}</option>
    </select> 
    <label for="size">Size</label>
</div>

根据Materialisecss文档,我调用$('select').material_select();将默认选择字段转换为可爱的东西.什么也不会-它取代<select>,并<option>用标记<ul>和<li>.因此,我无法在ViewModel js文件中访问item.size的值.我甚至试图听一下选项字段的点击并调用optionClicked方法(这应该只是提醒一条消息),试图收听selectChaned.没有.

如何在ViewModel中获取选项值？

ps仅供参考:我只对选择字段有疑问.输入字段例如工作正常:

<input placeholder="" name="name" type="text" class="validate" v-model="item.name">

在ViewModel中,我可以访问 item.name

我有一个选择框,其中的选项和选择通过Knockout.js处理.我想使用Materialise CSS来设置它的样式.

这对于初始显示选择框是正常的,并且当选项被添加到Knockout.js'选项'observableArray时,使用'optionsAfterRender'绑定到(重新)初始化后添加每个选项(浪费,但有效) .

删除选项时,Knockout.js不提供类似'optionsAfterRender'的任何内容,因此没有明显的方法可以触发Materialize CSS魔法的重新初始化.

问题:您可以看到任何非疯狂的选项吗？

码:

<select data-bind="

      options: options,
      optionsText: function(item) { return optionsText[item] },
      value: displayedValue,

      optionsAfterRender: function (option, item) {
         setTimeout(function() {
            $(option.parentElement).material_select();
         }, 0);
      }
     ">
</select>

('setTimeout'是必要的,否则不会选择所选的选项.)

我正在使用Materialize来设置我的一些网页样式.我注意到Roboto字体在Firefox(v43.0.3)中无法正确呈现,但在Chrome中看起来很好.两个浏览器都从我的服务器下载woff2字体文件,这个问题似乎表明应该是现代浏览器的最佳选择.

Chrome渲染:

Firefox渲染:

(我意识到这些低分辨率的屏幕提示不是最好的再现,在实际的浏览器中差异更明显.)

在Firefox控制台中,我收到一串类似于以下内容的错误消息:

downloadable font: GSUB: too large substitute: 65535 (font-family: "Roboto" style:normal weight:normal stretch:normal src index:1)

downloadable font: Layout: Failed to parse lookup subtable 0 (font-family: "Roboto" style:normal weight:normal stretch:normal src index:1)

downloadable font: Layout: Failed to parse lookup subtable 0 (font-family: "Roboto" style:normal weight:normal stretch:normal src index:1)

没有来自Chrome的投诉.

由于我对字体渲染的复杂性一点都不熟悉,所以我希望那个在该领域有一定知识的人可能会根据Firefox的错误消息知道问题是什么.

对不起,如果问题很简单,但我是使用materializeCss的新手

因为我可以增加模态materializecss的高度和宽度??

我正在使用materializecss,所以我已经有了材料设计图标.如何background-image在CSS代码中使用它们作为值(实际上是SASS)？

materialize选项卡的默认颜色为粉红色.也是活动标签的下划线.我想自定义并添加一些样式.我怎么做？