在 Angular 2 材质的 md-grid-list 中使用 md-cards

2023-12-25

我是 Angular 2 材料设计的新手。我想要实现的是使用 angular2 材质创建一个网格列表并将 md-cards 放入 md-grid-tile 中。虽然 md-card 有position:relative,但它们溢出了 md-grid-tile。单击此链接,卡片重叠并且溢出 md-grid-list 中的 md-grid-tile https://i.stack.imgur.com/k8SG5.jpg

以下是我使用过的代码:

<body>
    <md-toolbar layout="row"> <md-button class="menu">
    <md-icon md-svg-icon="menu"></md-icon> </md-button>
    <h3>Pipeline UI</h3>
    </md-toolbar>

    <md-grid-list cols="2" rowHeight="2:1" gutterSize="15px">
        <md-grid-tile layout-wrap *ngFor="let item of releaseType">
            <md-card flex layout-fill>
                <md-card-header>test1</md-card-header>
                <md-card-content>
            <stage [init]="item.submissions"></stage></md-card-content>
            </md-card>
        </md-grid-tile>
    </md-grid-list>
</body>

非常感谢任何解决此问题的帮助:)


据我了解,md-grid-tile在另一个名为的 dom 元素内创建figure它的 CSS 规则之一是align-items: center;。我用了:

md-grid-tile figure {
    align-items: flex-start!important;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 Angular 2 材质的 md-grid-list 中使用 md-cards 的相关文章

  • 清除 CSS 过渡

    我使用 CSS 框架 该框架在将鼠标移动到输入元素上时应用过渡 我有一堂课 我不想有这种转变 这可能吗 只需放置过渡 无 在CSS中并使其优先级高于其他 Example html div class a div div class a b
  • 如何用css3和html5制作不规则形状的div?

    我想知道是否有可能构建具有不规则形状的 div 类似于此 例如格陵兰岛 欧洲 非洲 我想使用 CSS3 和 HTML5 创建像这里这样的地图 以下是示例图像的链接 你所拥有的看起来像一个网格 你可以通过一个 div 上的许多渐变来获得它 也
  • contenteditable 在 safari 中不起作用,但在 chrome 中起作用

    我有一个奇怪的问题 这在 chrome 中按预期工作 但在 safari 中它只会发光 但不会对按键输入做出反应 这是触发文本版本的方法 var namebloc event currentTarget find column filena
  • 创建本身异步的自定义管道

    我创建了一个自定义管道 用于从 API 检索文本内容 如下所示 Pipe name apiText export class ApiTextPipe implements PipeTransform constructor private
  • 使图像宽度为父 div 的 100%,但不大于其自身宽度

    我试图让图像 动态放置 对尺寸没有限制 与其父 div 一样宽 但前提是该宽度不比 100 时其自身宽度宽 我已经尝试过这个 但没有成功 img width 100 height auto max width 100 其中许多图像比它们的父
  • 使用边距与填充? [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我最近开始自己在线学习周三开发 并且是这个领域的新手 所以对我的基本查询表示歉意 我知道边距和填充之间的区别 用逻辑术语 但不太确定 何时应该使
  • IE 中的文件上传按钮和奇怪的文本光标行为

    我构建了一个上传按钮 其格式类似于典型的 html 按钮 而不是浏览器标准文件上传表单 该方法是设置锚元素的样式并在顶部覆盖透明文件输入元素 这种方法在除 IE 之外的所有浏览器中都可以正常工作 在 IE 中 当用户单击上传按钮时 会出现一
  • 在 TypeScript / Angular 4+ 中将 Enum 键显示为字符串

    export enum Type TYPE 1 Apple TYPE 2 Orange TYPE 3 Banana 当我登录时Type TYPE 1 toString默认情况下会调用方法 console log Type TYPE 1 is
  • 如何将外部 div 的高度设置为始终等于特定内部 div 的高度?

    我有一个外部 div 其中包含三个内部 div 我希望最左边的内部 div 始终确定外部 div 的高度 如果其他内部 div 的内容 比最左边的 div 少 它们将有空白空间 如果他们有更多的内容 比最左边的div 他们将得到一个滚动条
  • 如何在 Bootstrap 4 轮播中堆叠多个图像

    我不知道如何使用 Bootstrap 4 以及如何在一张幻灯片中显示多个小图像 例如缩略图 而不是让图像填充轮播的宽度 我已经使用下面的代码尝试了一些操作 但仍然无法堆叠很多图像 div class container h2 class t
  • Angular 2 组件:子对子通信

    我的 Angular 2 应用程序中有三个组件 C0 C1 和 C2 第一个 C0 表示一个 html 模板 具有多个子组件 ui 元素 现在 如果有人点击C1 中的按钮 菜单 我怎样才能通知C2 日历 关于那件事 我尝试了一些例子组件通讯
  • 如何使用 Angular 5 在单击按钮时调用多个方法?

    我正在使用 Angular 5 并面临问题 我想提交 点击 事件并一一调用两个或多个方法 请给我想法或解决方案 以便我可以提交 点击 事件并调用两个或多个方法 such as html 文件
  • CSS 省略号与内联元素?

    我已经调整了 jQuery UI MultiSelect Widget 以便文本将显示所有选定的标签 但如果选择显示太多元素 则文本将被修剪和省略 我是这样做的 ui multiselect selected text display bl
  • Angular 反应式表单:使用单个 formControlName 同步多个输入

    我正在建造一个反应形式 https angular io guide reactive forms在 Angular 11 中 它分为多个 div 项目所有者希望在每个 div 中进行一些重复输入 以便用户可以编辑某个字段 A 的输入 并且
  • CSS - 设置 Div 的大小以填充剩余空间

    我是 CSS 新手 我正在尝试创建模板的准系统结构 我有一个用于页眉 主要内容和页脚的 div 我的页脚和页眉很好 但我需要主要内容 div 来 填充 页眉和页脚之间的剩余空间 我尝试将 padding bottom 属性设置为与页脚相同的
  • 在生产中使用 css / javascript 源映射对性能有何影响?

    生产环境中应该使用源映射吗 除了调试之外 它们还有什么好处吗 由于额外的服务器往返 它们是否会影响应用程序加载时间 浏览器是否足够智能来加载 map应用程序加载和渲染后的资产 如果浏览器找不到 map asset 404错误 会对性能产生影
  • CSS:响应式布局中的高度自动问题

    我在响应式布局中使用 jquery 延迟加载 并使用空白 gif 作为预览图像 为了使延迟加载工作 我必须通过属性设置图像的高度和宽度 预览图像未设置为正确的高度 因为 height auto 似乎是通过 src 而不是通过高度属性计算高度
  • 如何自定义 Angular Material 的 input/md-input-container 组件?

    正如标题所述 我如何自定义这些元素 他们似乎使用透明背景 这在大多数背景调色板上很难查看 在 angular material css 后添加一个空白 css 文件 并在该空白 css 文件中覆盖您要自定义的规则 对于您面临的问题 我在 c
  • 背景大小不起作用

    这是我的 CSS banner text BG background 00A7E1 url images sale tag png left center no repeat important background size 20px 2
  • 如何在rollup中使用css @import?

    我尝试创建一个简单的汇总应用程序的配置 但在 css 方面遇到了一些麻烦 这是我的 CSS 文件 import normalize css import typeface roboto html body root height 100 f

随机推荐

  • 我想知道为什么我的playerIMG无法在pygame中加载

    下面是我的代码 这是我的第一个 pygame 项目 任何帮助将不胜感激 我认为这与 def 玩家 玩家 玩家 pygame display update 代码块 尽管当我使用它时 有时它甚至不会显示我的背景对象 而只显示屏幕填充黑色 imp
  • CSS:Em 舍入误差

    最近 我重写了我正在制作的网站的 CSS 文件 并尝试使用 em 而不是 px 使大多数元素和字体的大小动态化 尺寸可以工作 有点 但至少有一个问题 当使用 em 单位作为盒子的边距 边距 0 25em 时 在 Firefox 中 我在顶部
  • 从 iPhone 模拟器获取图像

    我刚刚创建了一个图像并将其保存在 iPhone 模拟器手机库中 我想查看此图像 不是来自照片库 以从文档资源查看其属性 但我无法访问照片库的内容 Thanks Pankaj 对于 Xcode 6 模拟器图像文件现在位于 Library De
  • 是否可以从 Java 代码调用 Ant 或 NSIS 脚本?

    是否可以在运行时从 Java 代码以编程方式调用 Ant 或 NSIS 脚本 如果是这样 怎么办 You can从 Java 代码调用 ant 脚本 See 本文 http ant apache org manual running htm
  • 如何在调试字符串的函数中获取函数名称?

    我想在每次调用时输出函数名称 我可以轻松复制并粘贴函数名称 但是我想知道是否有快捷方式可以为我完成这项工作 目前我正在做 SlideInfoHeader lynxThreeFile readSlideInfoHeader QDataStre
  • 从用户电子邮件创建哈希/令牌以进行电子邮件验证

    任何人都可以帮我解答如何从用户输入 电子邮件地址 创建安全令牌 或哈希 的问题 我想制作一个用于注册的电子邮件验证系统 用户使用电子邮件地址和密码注册 我想创建一个唯一的 URL 并将其发送给用户 因此出现了问题 我将这些 安全地 存储在临
  • Android通知空指针异常

    我在活动中设置了通知 它按预期创建通知 当我返回主屏幕时 通知仍然在那里 很好 如果我单击通知 它会将我带回到创建它的活动 这太棒了 如果我单击按钮取消通知 则会收到 NullPointerException 这是电话 if notific
  • 简单的 DocumentDb 存储过程

    我正在尝试创建一个简单的 DocumentDb 存储过程以更好地理解其概念 在此示例中 我尝试返回所有 女性 用户 我是否需要关心返回单个匹配文档或多个文档 我的用户对象如下所示 id e85ee3d7 44a5 4250 a116 686
  • 如何仅在大括号之外搜索正则表达式

    我有这个正则表达式变量 var regexp new RegExp RegExp quote myExpression b g 它搜索后面有空格的表达式 RegExp quate 我从中得到如何在javascript中转义正则表达式 htt
  • 为什么使用 jQuery 返回 false 会停止传播,而使用 POJS 则不会?

    这是一个使用 POJS 的 jsfiddle 显示了return false 不会停止事件的传播 http jsfiddle net Ralt Lz2Pw http jsfiddle net Ralt Lz2Pw 这是另一个使用 jQuer
  • Rails PaperClip Attachments,知道是否有图像缩略图?

    我正在使用 Rails 3 回形针 并允许用户将附件上传到附件模型 如果文件是图像 应用程序会生成图像预览 如果文件不是 则仅上传文件 无图像预览 现在我想显示数据库中所有附件的列表 所以我使用attachment attachment l
  • ASP.NET MVC 中的 WebApi [FromUri] 等效项是什么?

    在 WebApi 中 我可以用以下方法装饰控制器操作上的参数 FromUri 如果愿意的话 将 URI 的组件 反序列化 到 POCO 模型中 又名模型绑定 尽管从 2 0 开始就使用 MVC 但我从未将它用于网站 我不知道为什么 在 AS
  • 如何根据 C# 和 .NET 中的周数获取月份

    我怎样才能得到month根据指定的周数 例如 如果获取周数2返回月份1 January 将周数乘以 7 例如 如果周数为 12 则将 12 乘以 7 这将表示已经过去的天数 四舍五入到最接近的周 将该数字除以 30 在示例中 我们计算得出的
  • 使用 mongoose 完成两个异步查询后进行回调

    使用猫鼬 我希望在两个不同的查询完成后进行回调 var team Team find name myteam var games Game find visitor myteam 那么假设我希望这些请求非阻塞并异步执行 如何在 Promis
  • 如何根据控制台输出中的文本使 GitLab 的 CI/CD 作业失败?

    我在用Lerna https github com lerna lerna管理多包存储库 在我的部署工作中 我使用 Lernapublish命令 对我来说 如果包中的代码发生更改 它应该始终向我们的 Artifactory 发布新版本 如果
  • Rails/ActiveRecord - 如何使其更简洁?

    在我看来 我有如下一行 看来我必须经常做这种事情 因为有些字段可以为空 有更好的方法来写这个吗 我可以在模型层处理它 但据我所知 这并不是真正的模型层功能 您可以使用delegate http api rubyonrails org cla
  • Android 的代码覆盖率 (calabash-android BDD)

    我正在使用测试我的 Android 应用程序葫芦安卓 https github com calabash calabash android它提供了它自己的 测试项目 以及一个重命名其包以反映测试下的应用程序的脚本 然后使用 Instrume
  • 您希望 Ruby 语言有哪些改进?

    您希望 Ruby 以及更广泛的 Ruby 社区 改进哪些方面 I read 某处 http blog hasmanythrough com 2008 6 20 recursive lambdaRuby 是 Smalltalk 和 LISP
  • 如何在不使用任何 html 标签的情况下向 html 文本添加换行符

    我想在网站上的个人资料文本中插入换行符 该网站只允许插入文本 因此我不能使用任何 html 标签 我想知道是否有任何方法可以像使用 ASCII 代码插入空格或制表符一样插入换行符 您可以设置white space to pre line 这
  • 在 Angular 2 材质的 md-grid-list 中使用 md-cards

    我是 Angular 2 材料设计的新手 我想要实现的是使用 angular2 材质创建一个网格列表并将 md cards 放入 md grid tile 中 虽然 md card 有position relative 但它们溢出了 md