标签: materialize
实现sideNav()和dropdown()不起作用
我几周前开始使用HTML,但我遇到了问题.我使用materialize框架创建我的网站,在使用初始化sideNav()或dropdown()时遇到了麻烦.有什么问题 ？我跟着http://materializecss.com/getting-started.html上的指南, 希望你能帮助我!(对不起,如果我的英语不完美,我是法国人)
推荐指数
解决办法
查看次数
实现Css:在卡片中选择
我想在卡片中使用select.
问题是当选择列表打开并且它应该在卡外溢出时,它不会.
溢出的部分被隐藏/阻止/消失.
我试过跟随并失败了:
- 溢出:可见
- 增加z指数
- 将位置更改为相对位置(这会动态增加卡片以适应选择 - 不希望的结果)
在一个侧面问题上,在卡片中使用选择(或其他输入)是不是一个合适的材料设计？
推荐指数
解决办法
查看次数
将HTML标记添加到materialize.css工具提示
有没有办法在物化中将HTML标记添加到工具提示？我试图在工具提示中安排一些数据作为定义列表.我试图将它直接添加到data-tooltip属性中,但它似乎无法识别标签.
推荐指数
解决办法
查看次数
如何在不同的设备上交换网格位置(materializecss)？
我正在使用MaterialiseCSS构建一个网站
我有两个盒子:A(col s12 m8 l8)B(col s12 m4 l4)
<div class="container">
<div class="row">
<!-- Box A -->
<div class="col s12 m8 l8">
<!-- details -->
</div>
<!-- Box B -->
<div class="col s12 m4 l4">
<!-- details -->
</div>
</div>
</div>
在桌面上,我喜欢它的方式,左边是方框A,右边是方框.然而,在移动设备上,而不是A在顶部,我希望B先成为A.我已经尝试过float: rightA但是它没有用.我怎样才能达到这个效果？
推荐指数
解决办法
查看次数
实现CSS Sidenav和内容
我正在Materialize CSS设计我的投资组合并现在遇到一些问题.我的网站现在寻找的截图是这样的:
如您所见,关于部分位于导航器下方,这是我的问题.我希望它向右移动,以便可以看到它.我现在的代码是:
<!DOCTYPE html>
<html>
<head>
<!--Import Font awesome Icon Font-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.css" media="screen,projection"/>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<header>
<ul id="staggered-list" class="side-nav fixed grey darken-4 blue-grey-text text-lighten-4 go">
<br />
<div style="text-align:center;" id="profilepic">
<img src="./images/robertsoriano.jpg" alt="" class="circle responsive-img" width="200"> <br />
Robert Soriano
</div>
<br /> <br />
<li><a class="grey-text text-lighten-2" href="#"><i class="fa fa-user fa-2x …推荐指数
解决办法
查看次数
DataTables - 如何使用自己的按钮进行导出？
我使用Materialize作为我的UI框架,我正在使用DataTables作为我的表.我有一个表,我需要导出到Excel,我可以使用DataTables按钮做得很好.但是,它们是默认的DataTables按钮,我想使用Materialise按钮.
所以问题是:如何使用我自己的按钮让他们执行DataTables内置按钮的功能(特别是导出到Excel)？
我已经尝试使用选项"className"到Materialize按钮类,但这不起作用.我想我可能要做一些JQuery功能.
感谢大家!
编辑:这是我的代码:
$(document).ready(function() {
var dataTable = $('#datatable').DataTable( {
language: {
search: "",
searchPlaceholder: "Search"
},
dom: 'Brftip',
buttons: [
'copy',
'csv',
'excel',
'pdf',
'print'
]
} );
推荐指数
解决办法
查看次数
具有固定头部和对齐列内容的MaterialiseCss表
我想要一个固定头的桌子,以便身体的其余部分可滚动.问题是我需要用materializeCss表来完成它.
我可以实现这一点,并且我已经这样做了,但是每个解决方案都会使具有不同字符的表列不对齐,请检查此图像:
这个有边框,所以你可以看到问题:
这是我正在使用的CSS并产生所述结果(scroll该类在表中):
.scroll {
border: 0;
border-collapse: collapse;
}
.scroll tr {
display: flex;
}
.scroll td {
flex: 1 auto;
}
.scroll thead tr:after {
overflow-y: scroll;
visibility: hidden;
height: 0;
}
.scroll thead th {
flex: 1 auto;
display: block;
}
.scroll tbody {
display: block;
overflow-y: auto;
height: calc(80vh - 100px);
}
我的问题:如何按列固定头部并实现内容对齐？
推荐指数
解决办法
查看次数
materialize css select无法正常工作
我想在materialize css中使用select字段.但它似乎不能正常 我的代码:
<div class="container">
<div class="row">
<div class="input-field s6">
<label >OS Version</label>
<select class="validate">
<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>
</div>
</div>
</div>
<!-- Scripts-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/materialize.js"></script>
<script src="js/init.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('select').material_select();
});
</script>
在此,它渲染一个选择字段,但标签仍然与选择字段重叠.如图所示:
来自http://materializecss.com/forms.html我已经检查了我在哪里:
<div class="select-wrapper">
<span class="caret">?</span>
<input class="select-dropdown" readonly="true" data-activates="select-options-6162e8f3-f286-fe44-8513-ab1ff6541fb1" value="Choose your option" type="text">
<ul style="width: 358px; position: absolute; top: 0px; left: 0px; opacity: 1; display: none;" id="select-options-6162e8f3-f286-fe44-8513-ab1ff6541fb1" class="dropdown-content …推荐指数
解决办法
查看次数
MaterializeCss模式错误openModal不是函数
我有所有要求Jquery,Materialize.js坐在我的Js文件上面然而我得到警告openModal不是一个函数..我检查模态名称是对的,我可以运行Materialize.toast所以我知道Materialise.js正在工作.使用按钮触发也不会调用模态.这是代码..
脚本:
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="/js/materialize.js"></script>
<script type="text/javascript" src="/js/video.js"></script>
<script src="/js/admin.js"></script>
触发:
<button data-target="modal1" class="btn modal-trigger">Modal</button>
莫代尔:
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
<a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
</div>
</div>
</div>
JS:
var modal = document.getElementById('modal1');
modal.openModal();
$('#modal1').leanModal();
$('#modal1').openModal();
推荐指数
解决办法
查看次数
实现图钉滚动跳跃
所以当在navbar元素上使用图钉功能时,我有一个奇怪的滚动问题.
向下滚动页面时,一旦图钉导航栏到达固定的顶部,页面上的内容会突然向上跳跃.
如果有人可以指出我做错了什么,我将非常感激.
我的图钉初始化:
$('#navbar').pushpin({
top: $('#wrapper').offset().top
});
一般HTML结构:
<div class="intro">
...
</div>
<div id="wrapper">
<nav id="navbar">
...
</nav>
<div class="content">
...
</div>
</div>
推荐指数
解决办法
查看次数
标签 统计
materialize ×10
css ×6
html ×5
jquery ×5
javascript ×3
css3 ×2
css-tables ×1
datatables ×1
excel ×1
grid-layout ×1
pushpin ×1
scroll ×1
select ×1
web ×1