问题标签 [material-design-lite]

我有一个使用 JSF 2.0、Primefaces 5.2 制作的应用程序，使用 MDL：Google 的 Material Design Lite ( MDL )。当我将 p:editor 放在我的 jsf 页面上时，它不起作用：编辑器上的每个元素都被禁用。当我检查元素时，我可以看到每个 div 都被禁用。

此外，当我第一次打开页面时，编辑器不起作用，但是当我按 F12（查看 javascript 控制台）并关闭该选项卡（控制台）时，编辑器开始工作。

谁能帮我？

我在抽屉里有一组链接。就像这里的导航示例：

http://www.getmdl.io/components/index.html#layout-section/layout

唯一的区别是我的链接不会导致页面刷新（它是一个使用主干构建的单页应用程序）。点击链接后如何关闭抽屉？

我现在正在调试一个非常奇怪的错误。

我正在尝试 Material Design Lite：http ://www.getmdl.io/components/index.html#layout-section

但是，每当我从他们的官方 CodePen ( http://codepen.io/anon/pen/WvaKjK ) 复制/粘贴“固定标题”示例时，它在我的浏览器中看起来会有所不同：

这是使用的整个 HTML：

如果您比较两个标题，您会看到左上角的图标没有到位。那么问题就出现了为什么。

因为我在我的机器上使用相同的代码，这使得图标看起来不合适，但是每当我通过 fe cmd+U 从浏览器复制/粘贴代码到 jsfiddle 或 codepen 时，我都会正确放置图标。

看这里：

http://codepen.io/anon/pen/LVgBzZ

这不是浏览器问题，因为同样的问题也出现在 Firefox、Chrome、Chrome Canary 和 Android Chrome 中。我在这里上传了相同的HTML，显示错误：

http://temp.leavingblue.com/5.html

我在 Windows（wamp）和 linux 虚拟机（宅基地）上的本地机器上运行代码。

TL;博士：

相同的 HTML 在官方 getmdl.io 站点、codepen、jsfiddle 中看起来不错，但是当我在自己的 HTML 文件上重新创建它时看起来很奇怪。

如何重现错误

去

1. http://temp.leavingblue.com/5.html ,
2. Cmd + U
3. 将所有内容复制/粘贴到 Codepen.io
4. 看差异

任何人都可以重现错误吗？还有人解释这种行为吗？

我正面临关于mdl-textfield的行为的问题

在下面的 plnkr 上，按照以下步骤操作：

1. 点击“工作组”
2. 单击一项上的“复制”
3. 看看最后出现的新文本字段与 ngModel 关联（angular.copy）但是文本字段的行为很奇怪，即使有一个值，标签也不会浮动，但是如果您单击文本字段，它会按预期浮动. 如果您修改该字段，则行为仍然存在，但如果您在没有任何修改的情况下退出它，则标签会返回覆盖。

http://plnkr.co/edit/MUI2iBslIH9jd4fgEQPL?p=preview

ngView内容

角模块

希望它足够清楚。我试图将其发布在 Material Design lite 的 github 上，认为这是一个错误，但我在这里被踢了...谢谢

我正在尝试将我使用Material Design Lite创建的一些Polymer组件集成在一起。但是，它们只是不渲染任何东西，就好像材料设计无法与 Polymer 组件一起使用。

这些是我创建 HTML+Material Design 侧边菜单的步骤：

Plain Material Design Lite 侧边菜单：

现在，作为测试，我创建了一个带有一些标记的nav-menu.html Polymer 元素：

然后，它包含在菜单之前并呈现正常：

HTML：

渲染代码：

现在，我将nav-menu.html组件更改为包含完整菜单：

并将其包含在主页中：

这是呈现的 HTML 代码（在 chrome 开发人员工具检查中看到）：

显然没关系，但是，页面没有显示任何内容，它只是空白。

更新：问题似乎是显示菜单的媒体查询样式不适用于新元素：

由于聚合物元素嵌套在<nav-menu>标签中，因此不应用 CSS 样式。有什么建议么？

我想在我的网页中间放置一个 svg 图片：

图像应部分水平显示 - 例如，最初应显示图像的 1/3，用户应该能够水平滚动它（查看剩余的 2/3 部分）。我应该如何做到这一点？（它也应该在移动浏览器中工作）。

以防万一这很重要 - 我使用Material Design Lite作为框架。

更新。应该可以用鼠标/点击滚动它，并且应该隐藏滚动条。请参阅 jsfiddle.net/and7ey/pLf5namm/embedded/result/ 上的演示。

我对材料设计精简版中的标签有疑问。这是 mdl 中选项卡的示例用法。

对于内容简单的标签看起来很简单，但是如果我有很多标签，每个标签都包含复杂的内容。如何使选项卡像简单的 ActionLinks 一样工作，并具有波纹动画和is-active类等所有特权。我的解决方案是将链接放入这样的选项卡中。

但链接不起作用，我收到此错误：

未捕获的类型错误：无法读取 null 的属性“classList”

显然，我做错了什么，或者将标签用于非设计用途。

*免责声明：这个问题不是关于在角度应用程序中使用材料设计，而是在表单中使用材料设计精简版。所以，请不要回答我宁愿使用 angular material、materialize、lumx、material bootstrap 或 daemonite ......我知道，它们存在。*

使用 Angular，一个典型的名称表单字段是：

使用 Material Design Lite，它会是这样的：

问题：如何将角度验证功能与 ngMessage（用于多个错误消息）结合使用 Material Design Lite？

这是一个非常简单的问题，但我在这里或任何其他地方都没有找到任何答案。我正在开发一个新项目，我将从一开始就使用 Google Material Design Lite。

我想知道使用 MDL 是否会导致不再需要 normalize.css。

那么，问题来了：Google Material Design Lite 样式表是否涵盖了 normalize.css 的内容？

我一直在我的网站中使用 Material-Design-Lite，并且我还使用 JQuery 来显示一个滚动到顶部的按钮。但他们没有一起工作。安装 Material-Design-Lite 后，该按钮在单击时不会执行任何操作。

有没有其他方法可以解决它？我试过不使用 JQyery，但也没有用。我正在尝试使用它的网站在这里。