标签: materialize
视差图像不会填充宽度 - 实现
我有这个问题,图片保持在左边,我已经在我的js初始化它,我尝试改变图片的大小,使用不同的浏览器,它有相同的结果.有人可以帮我解决这个问题吗？
HTML
<nav class="#607d8b blue-grey">
<div class="nav-wrapper container">
<!-- <a href="#!" class="brand-logo">Interaq</a>-->
<ul class="left hide-on-med-and-down">
<li><a href="#">HOME</a></li>
<li><a href="#">GAMELIST</a></li>
<li><a href="#">REVIEWS</a></li>
<li><a href="#">NEWS</a></li>
<!-- Dropdown Trigger -->
<!-- <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>-->
</ul>
<!--Search bar-->
<form class="right hide-on-med-and-down">
<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>
<div class="parallax-container">
<div class="parallax"><img src="<?php echo base_url();?>materialize/img/banner1.jpg"></div>
</div>
结果
推荐指数
解决办法
查看次数
如何在使用实体化时动态更新工具提示
我在我的应用程序脚本加载项中使用materializecss,当我尝试动态添加工具提示时,提示不会使用新标签更新.我已经尝试了几种变化,甚至双重检查了尖端是否正在被改变.问题是它似乎没有重新初始化更新的文本.
这是一个jfiddle:https://jsfiddle.net/edlisten/grafo4su/1/
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<script>
$(function() {
$('.tooltipped').tooltip({delay: 50,tooltip:"new",position:"bottom"});
});
</script>
</head>
<body>
<div class="container">
<a class="btn tooltipped">Hover me!</a>
</div>
</body>
</html>
推荐指数
解决办法
查看次数
覆盖Materialise CSS属性
我已经包含了第一个 Materialise的CSS,然后我已经链接了我的css文件.
其中我有一个设置background-color属性的示例类red,但不会覆盖默认颜色(由materialize-css设置).
这是一个例子:https: //jsfiddle.net/79ss2eyr/1/
我不想在materialize的源文件中更改任何内容,而是想添加其他类并设置其他颜色.
以下是检查员的说法:
我应该怎么做以及为什么我的css属性不会覆盖实体化,因为它是在框架之后链接的？
推荐指数
解决办法
查看次数
具体化css中的整页列
首先是当前代码的错误截图
这是与之相关的代码
<nav class="blue darken-3">
<div class="nav-wrapper">
<a href="#!" class="brand-logo center">Chatter</a>
<ul class="right hide-on-med-and-down">
<li><a nohref><i class="material-icons">search</i></a></li>
<li><a nohref><i class="material-icons">view_module</i></a></li>
<li><a nohref><i class="material-icons">refresh</i></a></li>
<li><a nohref><i class="material-icons">more_vert</i></a></li>
</ul>
</div>
</nav>
<div class="row">
<div class="col s3 red">1</div>
<div class="col s9 indigo" style="height:100%">4</div>
</div>
首先我没有看到为什么4略低于1的原因.当我在行顶部添加10 px的边距时,这个bug就解决了,但问题是红色菜单栏应该是彩色的,因此我不会那之间有任何空白区域.
第二个问题,我不知道怎么做正确的方法是我想要蓝色和红色覆盖浏览器窗口的整个高度.无论如何在实现中如何做同样的事情,或者如果没有,请帮助我如何做到这一点.
推荐指数
解决办法
查看次数
Materialize - 具有巨大内容的可折叠不会滚动到选项卡的顶部
我使用由实现框架提供的可折叠组件.我得到一个错误,不知道如何解决它或找到一个解决方法.如果一个选项卡的内容太大,当我打开选项卡时,它不会滚动到选项卡本身的顶部(它会转到中间).
你可以在这里试试:https://jsfiddle.net/r8314ouq/.打开第一个选项卡,然后打开第三个选项卡,您将看到它不会滚动到选项卡的开始.
我知道了
但我想看看
这非常烦人,因为用户必须滚动才能看到所有内容.
我按照文档创建了我的可折叠:
<ul class="collapsible" data-collapsible="accordion">
<li>
<div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">place</i>Second</div>
<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
</li>
</ul>
我试图捕捉事件并滚动到但它没有用.有任何想法吗？
推荐指数
解决办法
查看次数
通过单击Materialisecss/Material Design中的图标可扩展搜索栏
使用Materializecss处理布局,在我的标题/导航中,我需要显示一个搜索图标,单击该图标时会展开搜索栏.
理想情况下,我希望它只是接管整个标题/ topnav,但任何扩展/到搜索栏的东西都很好.
除了提及基本代码之外,文档(http://materializecss.com/navbar.html)没有详细说明搜索栏:
<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>
怎么办呢？在Materialisecss/Material Design中我是否有一种标准方法可以做到这一点我不知道？
非常感谢
推荐指数
解决办法
查看次数
推荐指数
解决办法
查看次数
如何验证Materialisecss单选按钮？
我试图实现验证以在单选按钮上显示错误消息,但我无法成功.
我正在使用Materializecss框架.
验证/显示错误消息适用于文本框元素而不是单选按钮.
码:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
<form>
<div class="row">
<div class="input-field col s6">
<input class="validate" type="radio" name="mode" value="M" id="m" required="required" data-error="Error msg here">
<label for="m">M</label>
</div>
<div class="input-field col s6">
<input class="validate" type="radio" name="mode" value="F" id="f" required="required" data-error="Error msg here">
<label for="f">F</label>
</div>
<div class="col s12" style="margin-top:20px">
<button type="submit" class="waves-effect waves-green btn">
Submit
</button>
</div>
</div>
</form>为什么不显示错误消息.任何帮助,将不胜感激.谢谢.
推荐指数
解决办法
查看次数
Angular 2 - 点击更改图标
我在angular2应用程序中有一个实现可折叠列表.我想要做的是,当有人点击它时,更改列表项的图标.到目前为止,我将一个click事件附加到列表中.当我将其打印到控制台时,我看到了元素参考.所以我能够查看子节点并找到附加了活动类的li元素.我的想法是,一旦找到活动元素,我就可以将子节点的图标更改为新图标.这样我就不会改变所有的图标.但是,当我尝试将图标设置为新图标时,我明白了TypeError: 0 is read-only.有没有人知道如何通过角度2做到这一点？
Plunker
https://plnkr.co/edit/jQWf7uIRZIwr4fhyFT03?p=preview
名单
<ul class="collapsible" data-collapsible="accordion">
<li>
<div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">place</i>Second</div>
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
</li>
</ul>
期望的行为:基本上我正在尝试使用materlize可折叠列表制作下拉树.因此,您单击某个项目,将其图标从加号更改为减号,以模拟您正在扩展和收缩该项目.
推荐指数
解决办法
查看次数
z-index在材料侧面导航上无法正常工作
我有一个项目，其中我同时使用angular-material的和materialize-css的侧面导航。Angular Material的侧面导航在左侧面板中始终处于打开状态。对于materialize-css的side-nav，有一个按钮可以在左侧打开它。
对于角材料，计算属性为
z-index:2;
position:absolute
对于materialize-css，计算属性为
z-index:999;
position:fixed
我读过
z-index仅适用于定位的元素（position：absolute，position：relative或position：fixed）。
因此，两个侧导航都设置了position属性。但是，角材料的side-nav优先于并且显示在materialize-css side-nav之上。我不知道这怎么可能，其背后的原因是什么？
如果我设置z-index:1角度材质，则它位于materialize-css后面，但是将z-indexmaterialize-css 更改为999999999不起作用。
更新
每个堆叠上下文都有一个HTML元素作为其根元素。当在元素上形成新的堆叠上下文时，该堆叠上下文会将其所有子元素限制在堆叠顺序中的特定位置。这意味着，如果元素位于堆叠顺序底部的堆叠上下文中，则无法使它出现在堆叠顺序较高的不同堆叠上下文中的另一个元素的前面，即使使用Z指数十亿！
实际上z-index不适用于materialize-css的sidenav。由于sidenav本身添加了一个元素z-index:997
<div class="sidenav-overlay" style="display: block; opacity: 1;"></div>
和CSS
.sidenav-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
opacity: 0;
height: 120vh;
background-color: rgba(0, 0, 0, 0.5);
z-index: 997;
display: none;
}
因此屏幕上会出现一个叠加层。即使z-index为999，我也无法对side-nav执行任何操作。所以问题出在sidenav的z索引上。
我无法发布整个代码，因为单独的sidenav可以工作，但这是dom层次结构
body
> app-root (Angular Componet)
> mat-sidenav-container (Angular Material)
> …推荐指数
解决办法
查看次数