标签: materialize

如何从Materialize的开关获取值?

我正在使用Materialize库,我正在尝试从开关组件中检索值,但on无论是打开还是关闭它都会返回.

有没有办法以编程方式确定它是打开还是关闭?

javascript materialize

12
推荐指数
1
解决办法
2万
查看次数

复选框无法使用materializecss - HTML,CSS

在使用materializecss时,我似乎无法使用复选框,因为其他任何人都遇到了这个问题并设法修复它?

我正在使用的图书馆:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
Run Code Online (Sandbox Code Playgroud)

没有库的复选框 - https://jsfiddle.net/d2yk4sbv/2/

     <div><label> <input type=checkbox> label 1 </label></div>
Run Code Online (Sandbox Code Playgroud)

带库的复选框 - https://jsfiddle.net/d2yk4sbv/

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
            <div><label> <input type=checkbox> label 1 </label></div>
Run Code Online (Sandbox Code Playgroud)

复选框似乎没有库工作正常,但问题是,我的应用程序依赖于使用materializecss所以我不能不使用它:(

链接到materializecss网站 - http://materializecss.com/

html css checkbox materialize

12
推荐指数
3
解决办法
1万
查看次数

使用Materialise CSS在行之间进行间距

使用MaterialiseCSS,如何调整/删除行之间的垂直间距?

示例代码:

<div class="row">
  <div class="col s12" style="text-align: center;">
    foobar
  </div>
</div>
<div class="row">
  <div class="col s12" style="text-align: center;">
    12345
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

MaterialiseCSS不需要的空间

materialize

11
推荐指数
1
解决办法
3万
查看次数

实现CSS侧导航不起作用

我有一个Materialise运行的基本设置,一切似乎都很好,除了滑出侧导航.

这是我的代码.菜单:

<ul class="right hide-on-med-and-down">
    <li><a class="dropdown-button" data-constrainwidth="false" data-beloworigin="true" data-activates="about-drop" href="#!">About<i class="material-icons left">arrow_drop_down</i></a></li>
    <li><a class="modal-trigger" href="#signup">Signup</a></li>
    <li><a class="modal-trigger" href="#sign-in">Sign In</a></li>
</ul>

<ul id="slide-out" class="side-nav">
    <li><a href="#">About</a></li>
    <li><a href="#">Signup</a></li>
    <li><a href="#">Sign In</a></li>
</ul>

<a href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a>
Run Code Online (Sandbox Code Playgroud)

JS:

<script>
$(".dropdown-button").dropdown();
$(".button-collapse").sideNav();
$(document).ready(function(){
    $('.modal-trigger').leanModal();
});
</script>
Run Code Online (Sandbox Code Playgroud)

在缩小屏幕尺寸时,我会获得适当的汉堡包菜单,但是,单击汉堡包不会扩展菜单.URL使用哈希#进行更新,就是这样.我的JS输出中没有报告错误.

使用其他JS函数,下拉菜单工作,模态工作.难以为什么sideNav先生不合作.

有任何想法吗?

javascript materialize material-design

11
推荐指数
1
解决办法
2万
查看次数

物化框架:导航栏中的响应式徽标

我正在物化框架中创建一个网站.导航栏中的徽标有问题.所以我的徽标非常大(6202x3800像素),我没有任何其他版本.我想把这个标志放在导航栏中,但它总是超出框架nav-wrapper.我试图添加课程,responsive-img但它根本不起作用.

这是我的代码:

#allcontent {
  background-color: white;
  margin: 2%;
}
body {
  background: #d26335;
}
nav {
  color: black;
}
Run Code Online (Sandbox Code Playgroud)
<div class="row" id="allcontent">
  <div class="navbar-default" id="navbar">
    <nav class="white">
      <div class="nav-wrapper">
        <a href="index.html" class="brand-logo left"><img class="responsive-img" id="logo" src="<!-- my image -->"/></a>
        <ul id="nav-mobile" class="right hide-on-med-and-down">
          <li><a href="sass.html"><i class="material-icons">search</i></a>
          </li>
          <li>colors</li>
        </ul>
      </div>

    </nav>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

css materialize material-design

11
推荐指数
1
解决办法
3万
查看次数

物化页脚不会到页面底部

有没有办法将页脚保持在页面底部,即使没有很多内容?我跟着Materialise的页面上的说明和有我之间的所有HTML <header>,<main><footer>标签.我根本没有将任何自己的CSS应用到页脚.

任何帮助,将不胜感激.

在此输入图像描述

这是我的HTML:

<body>
  <header>
    <nav role="navigation">
      <div class="nav-wrapper container"><a id="logo-container" href="/" class="brand-logo">Some Title <i class="material-icons left hide-on-med-and-down">apps</i></a>
        <ul id="dropdown" class="dropdown-content">
          <li><a href="">Register</a></li>
          <li class="divider"></li>
          <li><a href="">Sign In</a></li>
        </ul>
        <ul class="right hide-on-med-and-down">
          <li id="timer-tab"><a href="">Tab 1</a></li>
          <li id="stats-tab"><a href="">Tab 2</a></li>
          <li id="graphs-tab"><a href="">Tab 3</a></li>
          <li><a href="" data-activates="dropdown" class="dropdown-button">Tab 4<i class="material-icons right">arrow_drop_down</i></a></li>
        </ul>
      </div>
    </nav>
  </header>

  <main>
    <div class="container">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et …
Run Code Online (Sandbox Code Playgroud)

html css footer materialize

11
推荐指数
3
解决办法
2万
查看次数

物化CSS Navbar搜索已损坏

使用以下任一版本在chrome 50+上打破导航栏搜索:

具体化0.97.6具体化0.97.5

使用的代码如文档中所述:

  <nav>
    <div class="nav-wrapper">
      <form>
        <div class="input-field">
          <input id="search" type="search" required>
          <label for="search"><i class="material-icons">search</i></label>
          <i class="material-icons">close</i>
        </div>
      </form>
    </div>
  </nav>
Run Code Online (Sandbox Code Playgroud)

此代码导致文档页面和我的网站上描述的视觉问题:

http://materializecss.com/navbar.html

破碎的搜索

在我的网站上破解搜索

我如何解决这个问题让它看起来一致?

css html5 frontend materialize material-design

11
推荐指数
2
解决办法
6536
查看次数

Chrome Update 73-实现CSS JS触发错误

在最新的Chrome Update 73之后,Materialize CSS 0.100.2的日期选择器,时间选择器和下拉列表不再起作用,单击它时会闪烁,然后消失。

任何想法如何解决这个问题?

html javascript css google-chrome materialize

11
推荐指数
1
解决办法
3615
查看次数

Materialisecss图标不起作用?

我正在使用materializecss.但我不能让图标工作它说的话,但没有显示图标?

我包括了materializecss和js但仍然没有工作......

有人知道怎么修这个东西吗?

materialize

10
推荐指数
2
解决办法
1万
查看次数

如何使实现日期选择器(实际上是pickadate)可编辑?

我正在尝试使实体日期选择器可编辑.这是目标,用户可以直接在输入字段中写日期或使用小部件来选择日期.

我做了一些即将在这个jsfiddle上工作的东西.但是我正试图解决一个错误.当用户直接在输入中写入日期时,选择器也需要获取新值(因为我使用不同的格式来提交日期,并且有一个隐藏的输入字段要更新).要做到这一点,我试着这样做

picker.set('select', $(this.val());
Run Code Online (Sandbox Code Playgroud)

但是它会创建一个无限循环,因为实现中的方法set也会触发change输入上的事件.

编辑:哦,我刚刚发现在github上存在一个问题.你对解决方法有什么想法吗?

javascript materialize pickadate

10
推荐指数
1
解决办法
3984
查看次数