我正在使用Materialize库,我正在尝试从开关组件中检索值,但on无论是打开还是关闭它都会返回.
有没有办法以编程方式确定它是打开还是关闭?
在使用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/
使用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)

我有一个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先生不合作.
有任何想法吗?
我正在物化框架中创建一个网站.导航栏中的徽标有问题.所以我的徽标非常大(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) 有没有办法将页脚保持在页面底部,即使没有很多内容?我跟着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) 使用以下任一版本在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
我如何解决这个问题让它看起来一致?
在最新的Chrome Update 73之后,Materialize CSS 0.100.2的日期选择器,时间选择器和下拉列表不再起作用,单击它时会闪烁,然后消失。
任何想法如何解决这个问题?
我正在使用materializecss.但我不能让图标工作它说的话,但没有显示图标?
我包括了materializecss和js但仍然没有工作......
有人知道怎么修这个东西吗?
我正在尝试使实体日期选择器可编辑.这是目标,用户可以直接在输入字段中写日期或使用小部件来选择日期.
我做了一些即将在这个jsfiddle上工作的东西.但是我正试图解决一个错误.当用户直接在输入中写入日期时,选择器也需要获取新值(因为我使用不同的格式来提交日期,并且有一个隐藏的输入字段要更新).要做到这一点,我试着这样做
picker.set('select', $(this.val());
Run Code Online (Sandbox Code Playgroud)
但是它会创建一个无限循环,因为实现中的方法set也会触发change输入上的事件.
编辑:哦,我刚刚发现在github上存在一个问题.你对解决方法有什么想法吗?
materialize ×10
css ×5
javascript ×4
html ×3
checkbox ×1
footer ×1
frontend ×1
html5 ×1
pickadate ×1