标签: materialize
Materializecss div垂直居中
我正在使用materializecss,我希望我的DIV垂直居中,干净,也许是物质化的方式？
<div class="container">
<div class="row">
<div class="col s12 infobox center">
<div class="col s6">
<div class="card grey darken-3">
<div class="card-content white-text">
<span class="card-title">BOX 1</span>
<p>BOX 1</p>
</div>
</div>
</div>
<div class="col s6">
<div class="card grey darken-3">
<div class="card-content white-text">
<span class="card-title">BOX 2</span><br>
<p>BOX 2</p>
</div>
</div>
</div>
</div>
</div>
</div>这就是我要的: 
1
推荐指数
推荐指数
1
解决办法
解决办法
2万
查看次数
查看次数
Thymeleaf未选择禁用选项
我正在使用Materializecss选择表单http://materializecss.com/forms.html#select，它要求禁用第一个选项并选择正确的行为。Thymeleaf会忽略已禁用的选项，尽管它已被选中。而是选择第一个非禁用选项。
<div class="input-field col s6">
<select th:field="*{locale}" th:errorclass="invalid">
<option value="" selected="selected" disabled="disabled">Choose your option</option>
<option value="cs">Czech</option>
<option value="en">English</option>
</select>
<label>Locale</label>
</div>
系统会自动选择捷克语，但我想查看选择您的选项。
1
推荐指数
推荐指数
1
解决办法
解决办法
3921
查看次数
查看次数
无法在MaterialiseCSS中选择单选按钮
在Materialise中创建后,我无法选择单选按钮.
这是代码:
<div class="row">
<div class="input-field col s2">
<input name="gender" type="radio" id="male" value="Male" />
<label for="gender" style="font-size:12px;">Male</label>
</div>
<div class="input-field col s2">
<input name="gender" type="radio" id="female" value="Female"/>
<label for="gender" style="font-size:12px;">Female</label>
</div>
</div>
1
推荐指数
推荐指数
1
解决办法
解决办法
1405
查看次数
查看次数
填充文本后,在materializecss textareas上切换调整大小
说我有这个:
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s12">
<textarea id="textarea1" class="materialize-textarea"></textarea>
<label for="textarea1">Textarea</label>
</div>
</div>
</form>
</div>
并说我的代码的一部分我运行这个:
$('#textarea1').text(someverylongstring)
这个问题是我的textarea将保持"小",直到我点击它并向下箭头发现我添加到它的文本.当找到底部时,textarea会自动扩展到更大的文本区域以容纳内容.我的问题是,在将文本添加到textarea之后是否有办法强制切换元素的大小调整方面？
1
推荐指数
推荐指数
1
解决办法
解决办法
2301
查看次数
查看次数
如何使用ES6/Webpack导入Materialize.scss？
我有这个,但它失败了.
import React from 'react';
import '../../node_modules/materialize-css/sass/materialize.scss';
export default class App extends React.Component {
render() {
return (
<div class="card-panel teal lighten-2">
<h1> fad </h1>
</div>
)
}
}
Say的模块解析 failed \fonts\roboto\roboto-bold.woff2 unexpected character ' ' (1:4)
我的webpack.config.js
module.exports = {
devtool: 'inline-source-map',
entry: "./app/index.js",
output: {
path: __dirname + '/dist',
filename: "bundle.js"
},
devServer: {
contentBase: "./app",
inline: true,
port: 3333
},
module: {
loaders: [
{
test: /\.css$/,
loader: "style!css"
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/, …1
推荐指数
推荐指数
1
解决办法
解决办法
1415
查看次数
查看次数
我错过了一些小的东西:未捕获的ReferenceError:$未定义(匿名函数)
我正在尝试使用Materialise Framework,它似乎无法运行自动完成示例.这里缺少一些东西.
我在Materialize之前导入了jQuery,我甚至尝试在<head>中移动jQuery.如果你有建议.我知道它是愚蠢但我只是看不到它,它已经超过40分钟基本的东西.
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="row">
<div class="col s12">
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">textsms</i>
<input type="text" id="autocomplete-input" class="autocomplete">
<label for="autocomplete-input">Autocomplete</label>
<script>$('input.autocomplete').autocomplete({
data: {
"Apple": null,
"Microsoft": null,
"Google": 'http://placehold.it/250x250'
}
});
</script>
</div>
</div>
</div>
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" …1
推荐指数
推荐指数
1
解决办法
解决办法
718
查看次数
查看次数
物化自动完成不使用角度
当我从home.html自动完成功能中删除materialize.min.js时.是实现问题还是我做错了什么？
home.html的
<!DOCTYPE html>
<html ng-app="timeTracker">
<head>
<title>TimeTracker</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="materialize/css/materialize.min.css" media="screen,projection"/>
<link type="text/css" rel="stylesheet" href="stylesheets/style.css" />
<link href="/src/css/angular-datepicker.css" rel="stylesheet" type="text/css" />
</head>
<body ng-controller="containerCtrl" >
<div class="container" id="mainContainer">
<div ng-view></div>
</div><!--- container -->
<footer>
<br />
</footer>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="materialize/js/materialize.min.js"></script>
<script type="text/javascript" src="/angular.js"></script>
<script type="text/javascript" src="/angular-resource.js"></script>
<script type="text/javascript" src="/angular-route.js"></script>
<script type="text/javascript" src="javascripts/home.js"></script>
</body>
</html>
这是taskView.html. …
1
推荐指数
推荐指数
1
解决办法
解决办法
1187
查看次数
查看次数
md-menu的md-overlay-container在Angular 2 Material中未对齐
我正在使用Angular 2材料创建一个应用程序,并且我正在尝试在md-sidenav-layout部分添加一个材质菜单.但是,菜单的触发器显示在页面的不同部分.
app.component.ts-我的主要组件是bootstrapped
@Component({
selector: 'app-root',
template: `
<navbar></navbar>
<sidenav #tests></sidenav>
`
})
sidenav.component.ts- sidenav组件.我指的是https://github.com/angular/material2/blob/master/src/lib/menu/README.md 来创建菜单.
@Component({
selector: 'sidenav',
template: `
<md-sidenav-layout>
<md-sidenav #start [opened]="sidenavStatus()" (close)="reset()">
<md-card>
<p class="profile-name">Username</p>
</md-card>
<md-list class="sidenav-list">
<md-list-item> Add Steps </md-list-item>
<md-list-item> Add Sections </md-list-item>
<md-list-item> Add Fields </md-list-item>
</md-list>
<br>
</md-sidenav>
//the actual content in the page
<md-menu #menu="mdMenu">
<button md-menu-item> Refresh </button>
<button md-menu-item> Settings </button>
<button md-menu-item> Help </button>
<button md-menu-item disabled> Sign Out </button>
</md-menu>
<md-card class="step-card">
<md-card-title>Card with …1
推荐指数
推荐指数
1
解决办法
解决办法
1127
查看次数
查看次数
具有自定义数据的Materializecss自动完成芯片
我正在使用具有自动完成选项的materializecss芯片，并使用ajax设置自动完成数据。该文档显示使用以下语法设置基本标签：
$('.chips-autocomplete').chips({
autocompleteOptions: {
data: {
'Apple': null,
'Microsoft': null,
'Google': null
},
limit: Infinity,
minLength: 1
}
});
但是，当我实际上要使用这些标签时，除了标签的名称（例如ID）之外，我还需要一些其他数据，以便我可以PATCH对该id字段进行请求。我目前无法实现这一目标。
如果我这样做：
autocompleteOptions: {
data: {
'golang': {
tag: 'golang',
id: 1
},
'docker': {
tag: 'docker',
id: 2
},
'kubernetes': {
tag: 'kubernetes',
id: 3
}
},
minLength: 2
},
我的自动填充字段显示不正确：
同样，onChipAdd回调函数不会接收具有完整数据的芯片，而只会显示如下：
{
tag: 'golang'
}
是否有可能在实现过程中实现这一目标？
1
推荐指数
推荐指数
1
解决办法
解决办法
493
查看次数
查看次数
如何在Angular 7中使用JavaScript代码？
我试图在移动屏幕上使用MaterializeCSS的时候制作一个可折叠的导航栏，并且需要在其中使用JavaScript代码。我应该在哪里编写此JavaScript代码？
这是我要使用的代码：
**$(document).ready(function(){
$('.sidenav').sidenav();
});**
1
推荐指数
推荐指数
1
解决办法
解决办法
1万
查看次数
查看次数
标签 统计
materialize ×10
jquery ×5
javascript ×3
angular ×2
css ×2
html ×2
angular7 ×1
angularjs ×1
autocomplete ×1
ecmascript-6 ×1
html5 ×1
thymeleaf ×1
webpack ×1