问题标签 [material-design-lite]

我有一个显示大量数据的大表。

在 Destop 上看起来还不错，但在移动设备上它只是截取数据，我无法访问桌面上的内容，如下所示：

桌面版表格

移动版表格

有什么方法可以在移动设备上访问表格吗？还是仅将数据保留在几行上的唯一方法？并将不同卡片上的列分开？

（是的，我知道这不是卡的最佳用途，我仍在尝试使用 mdl）。

十分感谢。

我想在 Android Webview 上显示使用 MDL 构建的站点，但是一旦我启用 Javascript，webview 就会显示一个空白页面。即使使用 getmdl.io 模板示例也会发生这种情况。

我有一个包含许多列的简单表，我希望在调整浏览器窗口大小时自动缩小列。与table-responsiveBootstrap 一起工作，但我正在为 Angular Material 寻找类似的东西。我试图避免有 2 个表定义，并且真的不想自己在 CSS 中这样做。Angular Material中是否有为此的标准方法？

注意，我在这里使用了 Material Design Lite 表格，因为 Angular Material 今天没有表格。同样的问题，包括使用 flex 和 grids。

我猜新的 Material 世界不喜欢表格，所以最好的选择是将布局更改为不使用表格。

最近，我一直在将Material Design Lite集成到我的 React Web 应用程序中。在大多数情况下，一切都很好，但目前我在 React 的事件处理方面遇到了一些问题，这似乎与某些 MDL 组件不兼容。

特别是，我有一个带有onClick处理程序的 DOM 元素，它工作得非常好，直到添加了 MDL 工具提示，这导致onClick不再触发。我已经尝试了几乎所有可能的变体（将工具提示放在 DOM 中的其他位置，将onClick处理程序附加到一个容器 div，该容器 div 具有作为子项的工具提示等），但我似乎无法让它工作。

这是一个演示该问题的 JSBin（我还包含了一个示例，该示例使用 jQuery 在组件安装后将点击处理程序绑定到元素，这实际上确实有效）：

http://jsbin.com/sewimi/3/edit?js,输出

我有一些关于为什么这不起作用的理论，但我对 React 或 MDL 的了解都不够，无法验证其中的任何一个。

我相信这与 React 处理事件的方式有关，并且由于某种原因，MDL 似乎与它发生冲突。从文档中：

React 实际上并没有将事件处理程序附加到节点本身。当 React 启动时，它开始使用单个事件侦听器在顶层侦听所有事件。安装或卸载组件时，只需从内部映射中添加或删除事件处理程序。当一个事件发生时，React 知道如何使用这个映射来调度它。当映射中没有事件处理程序时，React 的事件处理程序是简单的无操作

这使得看起来 MDL 可能会弄乱 React 的内部事件映射，这导致我对元素的单击变成了无操作。但同样，这只是一个完整的猜测。

有人对此有任何想法吗？我宁愿不必componentDidMount为每个使用 MDL 工具提示的组件手动绑定事件侦听器（就像我在我提供的示例 JSBin 中所做的那样），但这就是我现在要使用的解决方案。

另外，由于我不确定这是否是特定于 MDL 的错误，所以我选择在这里而不是在他们的问题页面上发布这个问题。如果有人认为我也应该在那里发布它，请告诉我，我可以做到。

谢谢！

我在我们的材料精简版页面之一中使用不确定加载。问题是它没有将整个长度应用于它。

我正在使用带有“mdl-grid”类的div，在里面我正在使用另一个带有“mdl-cell mdl-cell--12-col”类的div。在这个内部 div 中，我实际上使用的是进度条 div。

我正在使用以下 HTML 代码：

其输出类似于： using-12Col-div

如您所见，它并没有占用 div 的整个长度，即 100% 所以，我尝试使用两个 6 列网格并尝试将进度条组件添加到类似的组件中，

但它仍然采用相同的宽度。

可以在此处找到相同的代码笔。

任何有关使用无级进度条获取分配给它的整个长度的帮助，将不胜感激。

我一直在玩 ReactJs，我需要调用componentHandler.upgradeDom()每个componentDidMount()处理程序。

有没有办法不必调用upgradeDom全局定义componentHandler而是使用 webpack 将 material design lite 作为模块导入？

创建 MDL 表时，其中一个选项是应用“mdl-data-table--selectable”类。当 MDL 呈现表格时，会在指定列的左侧插入一个额外的列，其中包含允许您选择特定行以进行操作的复选框。对于我的应用程序，当有人选中或取消选中某个框时，我需要能够处理一些 JavaScript。到目前为止，我一直无法做到这一点。

问题是您没有直接指定复选框控件，它们是在 MDL 升级整个表格时插入的。对于其他 MDL 组件，例如按钮，我可以在按钮本身上放置一个 onclick 事件，因为我使用 HTML 按钮标记指定它。

尝试将 onclick 放在为呈现复选框而创建的各种容器对象和跨度上未成功。我附加的事件似乎没有触发。我最接近的是将事件附加到 TR，然后遍历复选框以评估它们的状态。

这是 MDL 为单个复选框单元格生成的标记：

我没有指定这些标记，因此我不能简单地将 onclick 属性添加到标签。

如果有我可以挂钩的事件链？我想按照编码员的意图去做。

它运行良好：

但是，它现在不起作用：

两个代码块的区别只是mdl-layout--fixed-header类。要使用固定标题，插入类mdl-layout--fixed-header停止工作抽屉。这种用法有问题吗？

你知道为什么刷新页面后第一个按钮动画不起作用吗？单击第一个按钮后，我们只能看到按钮阴影，但动画不起作用。提前谢谢你。

我正在使用材料设计精简版作为表格。我面临的问题是，当在复选框上设置了所需的验证时，它似乎会在呈现错误消息后立即隐藏它。

请注意，实际验证按预期工作，只是没有显示错误消息。

这是一个有这个问题的codepen - http://codepen.io/anon/pen/LVqPzm

这是使用的 HTML：

任何有关如何获得正确显示复选框所需的验证消息的帮助将不胜感激

请注意，此问题特定于 Chrome