标签: materialize

好的，我已经实现了 Materialise。一切正常，我有一张卡。

像这样的基本卡： http: //materializecss.com/cards.html

如何更改卡片标题大小？

我尝试像这样添加我的课程：

             <div class="row">
                    <div class="col s12 m12">
                      <div class="card light-blue darken-3">
                        <div class="card-content white-text">
                          <center> <span class="card-title myClassHey">Prijava</span> </center>
                        </div>
                      </div>
                    </div>
                  </div>

然后在CSS中：

    .myClassHey{
    color:red;
    size: 55px;
}

颜色可以，但尺寸不行。我尝试制作一个 div id="myClassHey" 然后在 css 中调用 #myClassHey{ bla }; 但这也不起作用。

我只是想让卡片标题更大。

我已经使用“bower install Materialize”在我的 Ember 应用程序中安装了 Materialize 插件

我在我的哈佛商学院创建了一个表格--

> <div class="input-field col s12 m12 l8">
>               <i class="material-icons prefix">email</i>
>               {{input id="email" type="text" name="email" class="validate" value="overlap"}}
>               <label for="email">Email<i class="mandatoryIcon">*</i></label>
>             </div>

但在 ui 中，这个标签和值正在重叠。需要解决这个问题..怎么办？？？

我有角度项目。包括使用 cdn 实现 css 和 js。无法使用 index.html 中的脚本标记初始化 sidenav，因为导航栏是我的项目中的组件之一。那么，在角度项目（用于生产）中包含物化 css 的最佳方法是什么，以及如何初始化像 sidenav、Carousel 等物化组件。

  var elem = document.querySelector('.sidenav');
  var instance = M.Sidenav.init(elem, options);

上面的代码用于在使用 JavaScript 时初始化 sidenav。

我只是对如何在实现中水平居中对齐一列感到困惑！我尝试使用offset-m但它没有居中。

请帮忙！

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" type="text/css" rel="stylesheet">
<div class="row">
  <h3 class="center-align">Welcome</h3>
  <form class="col s12 center-align">
    <!--I want to horizontally align these input fields-->
    <div class="row">
      <div class="col s3">
        <input type="text" id="first_name" placeholder="First Name" name="first_name">
      </div>
    </div>
    <div class="row">
      <div class="col s3">
        <input type="text" id="last_name" name="last_name">
      </div>
    </div>
    <div class="row">
      <div class="col s3">
        <input type="email" id="email" name="email">
      </div>
    </div>
    <div class="row">
      <div class="col s3">
        <input type="password" id="password" name="password">
      </div>
    </div>
    <div class="row">
      <div class="col s3">
        <input type="submit" class="btn">
      </div>
    </div> …

我有模态，当我点击添加账单按钮时，它会弹出sweetalert2，下面提供的代码来自他们的文档，所以我认为代码没有问题，无论如何，我的问题是输入不能通过键入就像残疾人一样，这是materializecss方面的问题吗？

Ps我正在使用一个materializecss css框架，我还阅读了一篇文章，它在引导框架中与我有同样的问题。

https://github.com/sweetalert2/sweetalert2/issues/374

    $(".btnAddBills").click(function(event) {  
swal.mixin({
    input: 'text',
    confirmButtonText: 'Next →',
    showCancelButton: true,
    progressSteps: ['1', '2', '3']
}).queue([
{
    title: 'Question 1',
    text: 'Chaining swal2 modals is easy'
},
'Question 2',
'Question 3'
]).then((result) => {
    if (result.value) {
        swal({
            title: 'All done!',
            html:
            'Your answers: <pre><code>' +
            JSON.stringify(result.value) +
            '</code></pre>',
            confirmButtonText: 'Lovely!'
        })
    }
})

});

这个错误不仅出现在我的代码中，也出现在 Materialize 文档站点上，所以我将使用他们的代码作为示例：

<div class="input-field col s12">
<select>
  <option value="" disabled selected>Choose your option</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>
<label>Materialize Select</label>

这适用于鼠标事件。但是在我的安卓手机屏幕上，无法选择我想要的选项。我要么得到另一种选择，要么没有。该功能按照说明进行初始化，使用

$(document).ready(function(){
$('select').formSelect();

});

您可以在位于https://materializecss.com/select.html的 Materialize 文档中找到该示例并确认它不起作用。下拉列表中也会发生同样的情况，如https://materializecss.com/dropdown.html 所示。

我看到 materialize 呈现上面显示的 select 块，但是 materialize js 函数生成一个额外的 div，类“select-wrapper”包含一个 ul，然后作为实际的下拉列表。select 块本身似乎没有任何功能。是不是 ul 元素对鼠标事件不透明，但对触摸屏上的模拟鼠标事件不透明，这是否会导致问题？但是这个思路让我没有解决办法。

我也遵循了添加的建议<meta name="viewport" content="width=device-width">，但这无济于事。

我怎样才能让它发挥作用？任何帮助将不胜感激！

我是 Django 新手。

我有一个看起来像这样的模型：

模型.py

class Intervention(models.Model):
subject = models.CharField(max_length=200)
begin_date = models.DateField(default=datetime.datetime.today)
end_date = models.DateField(default=datetime.datetime.today)
description = models.TextField(blank=True)
speaker = models.ForeignKey(CustomUser, on_delete=models.CASCADE)
campus = models.ForeignKey(Campus, on_delete=models.CASCADE)

class Meta:
    verbose_name = 'Intervention'
    verbose_name_plural = 'Interventions'

def __str__(self):
    return self.subject

class Evaluation(models.Model):
interventions = models.ForeignKey(Intervention, on_delete=models.CASCADE)
student_id = models.CharField(max_length=20)
speaker_knowledge_mark = models.IntegerField(validators=[MaxValueValidator(20), MinValueValidator(0)])
speaker_teaching_mark = models.IntegerField(validators=[MaxValueValidator(20), MinValueValidator(0)])
speaker_answer_mark = models.IntegerField(validators=[MaxValueValidator(20), MinValueValidator(0)])
slide_content_mark = models.IntegerField(validators=[MaxValueValidator(20), MinValueValidator(0)])
slide_examples_mark = models.IntegerField(validators=[MaxValueValidator(20), MinValueValidator(0)])
comment = models.TextField(blank=True)

这个想法是，当学生在主页上进入网站时，他必须选择他学习的校园，然后他被重定向到一个页面，在该页面中他只能看到其校园的干预措施，然后当他选择干预措施时，他会得到它的详细信息：

主页屏幕

干预页面

干预详情页面

到目前为止一切正常。现在，在“干预详细信息页面”上，当用户单击“给予标记”时，他将被重定向到创建标记的页面（我使用基于 CreateView 类的），如下所示：

创建标记

现在我的问题是如何用学生想要评分的干预的 …

如何在不使用 JQuery 的materializecss v1.0.0 中为轮播创建自动滚动功能？

目前 Materialise 不支持自动滚动或自动播放功能。有调用 next 和 prev 的方法，所以必须有一种方法来设置自动滚动的轮播。

我试图在 DOM 加载后向元素添加事件侦听器，以便使用 Materialise CSS 的浮动操作按钮。

请参阅下面的代码，效果函数被触发，但handleContentLoaded函数没有被触发。该组件渲染时没有错误。

这里缺少什么？这是使用此效果的正确方法吗？

  const handleContentLoaded = () => {
    console.log("handleContentLoaded fired");
    var elems = document.querySelectorAll(".fixed-action-btn");
    var instances = M.FloatingActionButton.init(elems, {});
    console.log("instances", instances);
  };

  useEffect(() => {
    console.log("using effect");
    document.addEventListener("DOMContentLoaded", handleContentLoaded);
  }, []);

我一直在尝试在模式打开时填充模式元素,但我似乎无法做到这一点.我一直在搜索,我似乎找不到合适的答案.

莫代尔:

<div id="editModal" class="modal modal-fixed-footer">
    <div class="modal-content row">
        <div class="center-align">
            <h4>Update Task</h4>
            <p><b>NOTE:</b> You can only update Task Name and Task Type</p>
        </div>
        <form class="col s10 offset-s1" id="form" method="post">
            <div class="input-field col s10 offset-s1">
                <input id="edtTaskName" type="text" class="validate" required>
                <label for="edtTaskNamelbl">Task Name</label>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
    </div>
</div>

我尝试直接访问它:

$('#taskTable').on('click', '#editbtn', function() {
    $('#editModal').modal('open');
    $('#edtTaskName').text('asd');
    $("#edtTaskNamelbl").addClass('active');
});

我也尝试将它作为一个孩子访问模态本身:

$('#taskTable').on('click', '#editbtn', function() {
    $('#editModal').modal('open');
    $('#editModal').find("#edtTaskName").text('asd');
    $('#editModal').find("#edtTaskNamelbl").addClass('active');
});

这似乎都不起作用.感谢能帮助我的人.