Mat-Table中的Mat-Card在溢出时不会占据全宽:x
Mat-Table中的Mat-Card在溢出时不会占据全宽是因为Mat-Card默认具有固定的宽度。Mat-Card是Angular Material库中的一个组件，用于创建卡片式的UI元素。它通常用于展示一些相关的信息或内容。
当Mat-Card中的内容溢出时，它不会自动扩展到占据全宽。这是因为Mat-Card的设计初衷是为了提供一个固定宽度的卡片容器，以保持整体布局的一致性和美观性。
如果希望Mat-Card在溢出时占据全宽，可以通过自定义CSS样式来实现。可以为Mat-Card添加一个自定义的CSS类，并设置其宽度为100%。例如：
.full-width-card {
width: 100%;
}然后，在Mat-Card的HTML模板中，将该CSS类应用于Mat-Card元素：
<mat-card class="full-width-card">
<!-- 卡片内容 -->
</mat-card>这样，Mat-Card就会在溢出时占据全宽了。
关于Mat-Table和Mat-Card的更多信息，以及它们在实际应用中的使用场景和优势，您可以参考腾讯云的Angular Material文档和相关示例：
相关·内容
我在mat-table中插入了一张mat-card，并将宽度设置为100%。但是，当我使用overflow: x从左到右滚动时，并不是整个包装器都填满了垫卡。你知道我需要在CSS中优化什么吗？
我的代码：
// HTML
<div class="app-table-wrapper">
<table mat-table [dataSource]="dataSource" id="app-table">...</table>
<mat-card class="change-width
浏览 20提问于2020-05-25得票数 2
我正在使用flex layout在桌面视图上设置材料卡片内联，在电话视图上设置垂直卡片。
<div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center center" class="containercards">
<div fxFlex fxFlex.xs="100">
<mat-card class="container">
<mat-card
浏览 1提问于2018-03-28得票数 0
我有以下html内容。
<div><input type="checkbox"><strong></strong><p></p></div>
如何将这些元素与p元素放在同一行，而不使用换行？
我试过这个：
input
{
float: left;
margin: 0;
padding: 0;
}
strong
{
float: left;
margin: 0;
padding: 0;
}
p
{
margin: 0;
padding:
浏览 0提问于2013-02-08得票数 0
回答已采纳
5回答
有没有可能在没有mat-table或任何其他插件的情况下，将浮动的水平滚动条添加到角为7的JQuery中？
我有一个mat-table，它显示6列，但也可以按下按钮动态添加100+列。
但后来布局中断了。
HTML-部分：
<button (click)="showLess()" mat-stroked-button class="show-button">Show Less</button>
<button (click)="showMore()" mat-stroked-button class="sho
浏览 1提问于2019-03-25得票数 11
我有以下CSS：
.turbineContainer{
width: 50%;
flex-wrap: wrap;
display: flex;
}
.turbineIcons{
background-color:white;
margin: 1em;
height: 50px;
width: 100px;
}
.container {
浏览 10提问于2020-08-07得票数 1
回答已采纳
我正试着把一张图片放在mat-card里面，这样它就会占据整个卡片的高度-
<mat-card class="mat-elevation-z4">
<img src="/assets/images/the-godfather.jpg" width="300">
</mat-card>
我去掉了卡片的填充物-
mat-card {
width: 600px;
border-radius: 0;
padding: 0;
}
但在渲染图像时，图像下方总是有一些空间，如下所示-
浏览 0提问于2020-06-12得票数 0
我有一台带prototypeCell的tableView。
我添加了一些约束，以使tableView占据整个视图：
我已经在我的原型单元底部添加了一个“灰色区域”，它占据了100%的宽度。
然而，当我运行应用程序时，第一个tableCell上方有一个很大的区域，灰色区域没有100%的宽度：
我做错了什么？约束问题？
浏览 1提问于2015-09-07得票数 1
1回答
在角5中，我熟悉应用于*ngFor的过滤器，使用自定义管道，如下所示：
<mat-slide-toggle [(ngModel)]="hide_completed">Hide completed?</mat-slide-toggle>
<mat-card *ngFor='let task of tasks | callback:hideCompleted:hide_completed'>
...
</mat-card>
在回调是我的通用管道的地方，hideCompleted是在我的组件中声明的函数，hide_co
浏览 1提问于2018-04-10得票数 4
react-native -v: 0.61.5
为什么文本内容会占据所有的父元素空间？
这是我的演示。iOS设备不同于网络上的设备。
这是iOS截图。
这是网页截图。
这是我的设计。
请帮帮我！
浏览 28提问于2021-05-12得票数 1
有没有什么小工具(在另一个问题中提到了SizedBox.expand)或配置可以让数据表/页面数据表占据它的父卡的全部宽度？
浏览 30提问于2019-09-10得票数 0
2回答
我试图使下面的图像适合整个div，这意味着背景图像应该占据整个空间，而我不应该看到绿色。不幸的是，我找不到一个办法。
#imagecontainer {
background: url("http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg") no-repeat;
border: 1px solid;
background-size: cover;
}
<link href="https
浏览 1提问于2017-05-09得票数 2
1回答
我有一个定位的小部件，我需要使它完全宽度的父容器 窗口小部件树如下所示 Expanded
Stack
SomeOtherWidgets
Positioned(
left: 0,
bottom: 0,
height: 11,
child: Container(
// box decoration for this container
)
) 所以我需要的是一个放在Stack底部的小部件，它位于Stack中其他所有东西的顶部，它占据了扩展的祖先的宽度 这个是可能的吗？谢谢
浏览 11提问于2021-02-06得票数 0
回答已采纳
我正在尝试从togglebutton实现灵活的行为，我的togglebutton在一个高度为60px，宽度无限的容器中，如何才能让togglebutton占据所有可用的空间？ 遗憾的是，我不能使用MediaQuery，因为使用它会以某种方式破坏我的下拉功能，还有其他方法吗？ 下面是切换按钮的代码： Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(10),
浏览 15提问于2020-04-29得票数 3
回答已采纳
右侧的灰色块(https://jsfiddle.net/var6u4g7/)没有占据整个内容的宽度。它使用的是righttext的大小，如果你在righttext元素中添加更多的单词，你会看到灰色的方框恰好占据了这个宽度。我不想分配一个固定的宽度，因为我不知道它里面会有多少，所以我希望它和它的内容一样宽。 如果您删除第一个元素上的display: flex，则宽度可以正常工作，但其他元素会断开。(如果去掉灰色的框，您就会明白我为什么需要display: flex了。灰色框只会偶尔出现，当它不存在时，该行中的所有内容都应该垂直居中对齐。有没有办法做到这一点呢？ .container {
浏览 24提问于2019-05-31得票数 0
1回答
我有以下布局：
<body>
<nav class="navbar navbar-inverse">
...
</nav>
<div class="jumbotron">
...
</div>
<div class="container">
<div class="row">
<div class="col-xs-12">...</div&
浏览 4提问于2017-09-25得票数 0
2回答
下面是模板数据文件：
我正在尝试使表格的10列中的8列只占用它们所需的最小宽度，基于文本，考虑到填充和列标题。
在示例图像中，我希望除了第4列和第9列之外的所有列都占据最小宽度。从技术上讲，有9个列标题，最后一个列的列跨度是2。最后一个标题是一个span3。我希望百分比列占据所需的最小宽度，让进度条或通过/查看/失败按钮占据其余部分。
第4列被设置为用省略号替换溢出文本。
示例图像：
浏览 0提问于2014-11-18得票数 54
回答已采纳
我有一个正方形的图像，我想填充尽可能多的用户浏览器，而不溢出。问题是，在某些设备上，宽度大于高度，反之亦然。因此，如果我将宽度设置为100%，那么在某些设备上，这将导致高度溢出。那么，如果宽度小于高度，高度小于宽度，我如何设置图像加载为正方形并为100%宽度？谢谢
浏览 0提问于2015-10-10得票数 0
1回答
我正在努力寻找一种方法来调整产品块的宽度。网站的页面是密码(密码是‘dachshund-crane-s64k.squarespace.com/nouvelle-page’)。变量的宽度和添加到购物车按钮是自动设置的，但我希望整个东西占据100%的空间，这样块就等于左边的照片了。Here is a screenshot of the space。提前感谢您的帮助。
浏览 35提问于2021-04-16得票数 0
回答已采纳
两个问题：
1)为什么div中的列不会填满页面(占据空白)，而不是溢出到下一列？(运行代码段时单击查看整页。)
2)如何提高列的响应性？(即，当我更改屏幕尺寸时，让列放大和缩小，而不是将每一列都向左收缩或向右拉伸)。
#container {
/*min-height: 100vh;*/
/*min-width: 100vw;*/
grid-gap: 10px;
}
.columns {
-moz-column-count: 5;
-moz-column-gap: 1em;
-moz-column-width: 40%;
-webkit-column-coun
浏览 0提问于2018-09-17得票数 1
我正在试着找一部适合安卓网站上列出的每一个类别的手机：。
原因是我想在每个类别中至少订购一个设备来测试布局。我知道我可以在模拟器上很容易地做到这一点。然而，我的公司也想使用物理设备，而且我们有这样做的预算:)我很难将不同的手机归入不同的类别。是否有已经存在的这样的列表？
我开始尝试根据gmsareana.com上列出的像素和dpi手动计算dp。我发现一些手机似乎甚至不属于列出的类别:例如，在计算dp后，LG轴()的值如下: 438dp x 263dp。这不符合小屏幕尺寸标准(小:尺寸与低密度QVGA屏幕相似的屏幕。小屏幕的最小布局尺寸约为320x426dp单位。例如QVGA低密度和VGA高密度
浏览 2提问于2012-01-20得票数 2
回答已采纳
2回答
我试着在我的项目中，在桌子上实现垫子排序。启动我的项目后，我看到“排序”图标，可以点击它，但在我的结果中没有排序，总是相同的视图。
组件-文件：
@Component({
selector: 'app-test-component',
templateUrl: './testComponent.component.html',
styleUrls: ['./testComponent.component.css'],
providers: [TestService],
})
export class TestComponent
浏览 1提问于2018-06-04得票数 6
回答已采纳
我使用Ant设计折叠，当文本溢出时，我想用省略号表示折叠标题 我以前是这样的，但是它不起作用，有人能帮我一下吗？ .ant-collapse-header{
width:50px
text-overflow: ellipsis;
} 谢谢,
浏览 52提问于2021-07-20得票数 1
回答已采纳
我正在用有角度的材料做一个仪表盘。在该仪表板上，我希望为每台服务器显示一张卡片(到目前为止还好)，并在该卡片中显示一个表，其中包含该特定服务器上的客户。那就是我被困住的地方。
当使用下面的代码时，我得到以下错误(针对每个表)：
ERROR Error: Could not find column with id "name".
我的相关代码：
<mat-card class="card" *ngFor="let listItem of serverList; let i = index">
<mat-card-header&
浏览 0提问于2018-04-20得票数 3
如何检查给定的字符串是否包含一个或多个日语字符(由kana和/或kanji组成)？
我在这里看到了一个类似的问题：，我用这个解决方案想出了这个问题：
var containsJapanese = string.match(/[\u3400-\u9FBF]/);
然而，这提供了许多假阳性。
我对它进行了测试，让脚本遍历整个网页的内容--比如Facebook、Stack溢出等等--并标记应该包含日语文本的div。在这种情况下，大量的div最终会被错误地标记。我还在包含日语文本的页面上测试了它，最终日文div和许多错误标记的div一起得到了正确的标记。
浏览 5提问于2013-02-22得票数 31
回答已采纳
3回答
现在我有了一个span，它的溢出隐藏在超文本标记语言和CSS中--我将它用于这个网站上的推特帖子：
HTML和内联CSS
<span style='width:686px; height:50%; display:block; white-space: nowrap; padding-top:14px; padding-left:10px; overflow:hidden;'></span>
现在我需要以某种方式检测到div确实溢出了，然后当它溢出时，允许使用jQuery或类似的东西滚动文本。
你知道怎么做这两件事吗？
浏览 3提问于2012-01-25得票数 0
回答已采纳
我已经搜索了几天，关于如何使用Wordpress添加一个视频，它将占据整个页面的宽度。我可以添加视频，但它总是以其默认大小显示。我想要的是像这样的东西。
任何帮助都将不胜感激。
谢谢。
浏览 5提问于2014-05-04得票数 0
我有一个简单的模板，其中包括一个组合框，一个按钮和一个表。我想要做的是，如果combobox值没有被选中，按钮是不可点击的，并且在被选中后，这个按钮将调用一个服务方法，获得雇主的详细信息，并且在这之后表格变得可见。(在选中combobox value并点击按钮之前，表格是不可见的。)我的代码是： <mat-card-content fxLayout="row wrap" fxLayoutAlign="left" fxLayoutGap="30px">
<mat-form-field fxFlex=
浏览 11提问于2019-01-28得票数 1
回答已采纳
3回答
如何实现类似的块结构，如本页所示：
基本上我需要一个区块(如图像)在左边，所有其他区块占据所有右侧和下方的100%宽度。如果右侧的块通过左侧的图像块，则它将位于其下方，并占据页面宽度的100%
浏览 1提问于2011-06-07得票数 0
我在Visual Composer 4.6.2中使用了X-Theme，并试图创建一个与屏幕全宽的分隔层，就像这个模型(内容之间的蓝色条)：
然而，VC允许我做的就是和它的容器一样宽。我以前在其他的预制主题中使用过这个，但是我不知道怎么做。我尝试使用revslider和常规的img，但都不起作用。有什么想法吗？
浏览 7提问于2016-01-27得票数 1
我想验证用户的输入是否在全宽度(Katakana & Hirakana & alpha)字符中？
我见过Laravel验证医生，但无法验证我的情况。
有人能给我举个例子吗？(输入=>验证)
全宽度只有仿冒：
‘=>1’=>无效，‘ぁァ1あア1’=>无效，‘あア1’=>有效，
半宽度的仿制品：
“=>1”有效，“ぁァ1あア1”=>无效，“あア1”=>无效，
浏览 0提问于2019-06-07得票数 0
15回答
zurb基础可以有完整的行宽吗？
、、、、
我正在使用foundation 3构建一个响应式网站，但我想让页脚和导航背景宽度占据整个宽度？我将我的行命名为
class="row navigation"
class="row footer"
我试着寻找如何解决这个问题，但我别无选择。我假设这只是foundation.css文件中的一个小修复，但由于我是新手，目前它有点太强大了。
非常感谢您的指点。
浏览 5提问于2012-08-01得票数 33
1回答
Mat-图像宽度填充
、、、
我正在使用角度材料制作卡片，但由于某些原因，我无法让图像填满图像中显示的空间，红色区域是我希望图像占据空间的地方。 ? Html： <mat-card (click)="optionPicked()">
<img mat-card-image [src]="backgroundImage">
<mat-card-subtitle>
<b>{{SubtitleHer
浏览 25提问于2020-11-02得票数 1
1回答
我有一个角度的页面，有3个组件，我试图得到填充整个水平空间。目前，父版本的flexbox div并没有扩展到完整的长度，即使我有宽度: 100%在它上面。我可以使用像素值来改变宽度，但是当页面被加载时，我不知道视图会有多宽。我已经尝试设置边缘和填充为0，确保儿童柔印宽度加起来100%，等等.
相关html：
<div fxLayout="row" fxLayoutGap="15px" id="bottomContainer">
<div fxFlex="1 0 40%"><mat-card
浏览 2提问于2020-06-03得票数 0
回答已采纳
2回答
我正在使用下面的页眉设计，它应该100%水平地占据页面的顶部，但在一些浏览器的右侧它不会覆盖它。
我该如何解决这个问题呢？
HTML：
<header id="loop">
<img src="/images/logo.png" height="50px" />
</header>
CSS：
background-color: #990000;
height: 85px;
margin-left: -8px;
margin-top: -8px;
position: relative;
widt
浏览 0提问于2012-11-29得票数 0
回答已采纳
我正在使用Wrap小部件来解决溢出问题： Wrap(
children: [
Text(subtitle, style: TextStyle(color: Color(COLOR_PRIMARY),fontSize: 12.5)),
Image(
image: AssetImage(
drinkNameToImage[widget.post.cocktail] as String),
width: 20,
height: 20,
)
浏览 9提问于2021-11-02得票数 1
回答已采纳
1回答
将滑块宽度从px更改为%
、、、
我用css，javascript和html构建了一个滑块。我有一些javascript，它可以控制包含滑块的div的宽度和高度，以及滑动速度。但是，我想使滑块的宽度达到屏幕的100%，无论屏幕大小如何。它目前是以像素为单位定义的，但每当我将它定义为%时，它就会消失。有什么想法或建议吗？
以下是代码
<script type="text/javascript">
$(function() {
$('#one').ContentSlider({
width:1600,
浏览 2提问于2013-06-26得票数 0
1回答
我使用固定宽度的select元素。但是，当我将option元素嵌套在select中时，它有相当长的文本，那么，当选择此option时，它不能获得完整的背景宽度(我希望背景为100%)，并且文本也被隐藏。 下面是隐藏最后一个选项的示例。 .x {
width: 200px;
overflow-x: auto;
} <select class="x" size="4">
<option class="y" selected>xyz</option>
<option class="
浏览 15提问于2021-01-27得票数 0
1回答
我有一个mat-grid-tile (父)，它包含一个组件app-window (子)，它在根处包含一个mat-card。
app-window按需要填充mat-grid-tile，并且是垂直和水平对齐的.现在，我希望app-window的mat-card也这样做，这样我就可以有一个等距mat-card的网格。
如何使包含在mat-card中的app-window填充整个app-window？我尝试过一些想法，但都没有成功；下面是更多的细节。
组件HTML：
<mat-grid-list cols="3" rowHeight="4:3">
&l
浏览 6提问于2017-12-22得票数 14
1回答
我不知道为什么，但是当我将<img>的CSS设置为display: inline时，它工作得很好。
但后来我写了display: block;，它在整个屏幕上拉伸了元素周围的链接。
浏览 4提问于2012-12-23得票数 0
2回答
我正在尝试让这张地图在Bootstrap4列中显示完整的高度。
我尝试将h-100添加到包含行，但最终在地图底部出现滚动条，页面底部大约10%的部分丢失。
布局的相关代码为：
<div class="row h-100">
<div id="leftPanel" class="col-sm-2">
<table id="tasklist" class="table table-sm">
<thead>
浏览 1提问于2019-11-29得票数 0
5回答
我想知道怎么可能在一个div中有多个跨度，最后一个跨度漂浮在右下角，并占据"row“中的所有剩余宽度。
这里有一个难题：问题是，fullWidth跨度并不总是在底部。您可以调整浏览器窗口的大小以查看fullWidth跨度的移动。
它应该是这样的：
这是它看起来不应该是这样的：
HTML：
<div class="container">
<span class="item">sdfdsfsdf</span>
<span class="item">sdfsdf
浏览 4提问于2013-06-21得票数 0
或者这两个字符在Shift_JIS中根本不存在？ Shift_JIS字符编码方案中的前128个字符与ASCII码匹配，但有两个例外: 0x5C是Yen符号(¥)而不是反斜杠，0x7E是上划线(‾)而不是波浪号。 虽然有很多关于¥和‾如何接管\和~的明确信息，但我还没有找到任何明确的声明，说明\和~是否根本不存在于Shift_JIS中，或者是否有替代的(可能是多字节的)编码来处理这两个被替换的ASCII码字符。 当我尝试使用node-iconv对\或~进行编码时，它抛出了一个错误。 iconv-lite将¥和\编码为0x5C，将‾和~编码为0x7E。解码时，iconv-lite当前(不幸的是)
浏览 61提问于2019-06-30得票数 5
回答已采纳
1回答
我刚刚在移动设备上查看了我的网站，它看起来很棒。然而，当保持在纵向模式时，图像只占页面的一半。它也缩小了我的标志，这也是一个问题。
图像显示在一个滑块中，我在HTML & CSS上创建了这个滑块。
我还在使用引导程序4，但是在将引导程序添加到代码中之前，我也遇到了这个问题。
请看下面的x2图片，它目前是如何在移动和x1的图像，我希望它也在肖像。
我试过：
在CSS中将宽度/高度设置为100%
添加viewport元标记以停止移动设备上的缩放
用@media标记更改我的滚动体的高度(这样不会影响桌面查看)
请参阅下面的当前HTML和CSS。
HTML
<h
浏览 3提问于2020-06-18得票数 1
尝试创建一个简单的突破游戏，我已经写了所有的代码，除了我不明白为什么球是在屏幕边界的一边而不是在球拍(玩家)上。
class Ball
{
int Width => texture.Width;
int Height => texture.Height;
public Rectangle BoundingBox =>
new Rectangle((int)position.X, (int)position.Y, Width, Height);
Texture2D texture;
Vector2 position
浏览 2提问于2018-01-26得票数 0
回答已采纳
当你分享Facebook相册中的一张照片时，它会在时间线(大约567px宽)中显示为“全宽”布局，并配上下面的说明。
我还注意到，来自pinterest的共享图片以一种下面带有图片和说明的格式显示。
但是当我使用提要对话框的“图片”属性或者包含og:image标签的页面共享来自其他地方的照片时，它总是以缩略图(116x116)|文本布局显示。
来自pinterest的图片被发布为动作，因此这可能是一条线索。
浏览 1提问于2013-06-08得票数 0
回答已采纳
2回答
我使用Bootstrap 4来定制wordpress主题。我已经阅读了这篇短文，其中解释了如何在悬停时创建动画下划线。在桌面上一切正常，但在移动设备上，下划线将在菜单元素下占据100%的宽度。是可以修复的吗？
下面是我使用的css代码：
.top{
position: relative;
color: black;
}
.top:hover{
color: rgb(28,67,63);
}
.top:hover:after{
width: 100%;
}
.top:after{
content: '';
position: absolute;
bot
浏览 1提问于2019-10-01得票数 1
1回答
我正在尝试创建一个Slick示例，但它不起作用。
这是我的代码：
<head>
<title>Slick Playground</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="slick-master/slick/slick.css">
<link rel="stylesheet" type="text/cs
浏览 8提问于2017-03-01得票数 0
我试图在一个div上叠加一些文本，在另一个div上叠加两个左右对齐的图像。我过去使用过flexboxes，所以我很困惑为什么它不起作用，但我注意到一旦我从样式中删除了position:absolute，两个图像就像我想要的那样工作(副作用是不再将两个div重叠在彼此上)。如果我以像素为单位设置宽度，它就能正常工作，但因为我是跨屏幕大小设计的，所以如果可能的话，我想避免这样做。 我看到了this的问题，说position:absolute不应该与flex not冲突，所以我不确定为什么会遇到这个问题。 Here是一个codepen，正如您所看到的，当您移除绝对位置时，猫图像将移动到最右侧，但当
浏览 7提问于2021-09-20得票数 0
回答已采纳
1回答
我注意到，似乎并不能完成用中文字符记录的事情。
考虑一下：
# -*- coding: utf-8 -*-
from __future__ import print_function
tests={'German': [u'Straße',u'auslösen',u'zerstören'],
'French': [u'français',u'américaine',u'épais'],
'Chinese': [u&#
浏览 1提问于2013-06-22得票数 0
回答已采纳
2回答
我目前有一个UISearchBar (连接到UISearchDisplayController上)，但我缩小了搜索栏的宽度，这样当搜索栏未被选中时，我可以在其右侧显示一个自定义按钮。该按钮用于访问其他视图。
但是，当我选择搜索栏，然后按下cancel (甚至执行搜索)并返回到正常视图时，搜索栏将随我的自定义按钮一起显示，搜索栏会显示动画，并占用该按钮的所有空间，但不显示。基本上，搜索栏占据了整个屏幕的宽度，而我只想让它占据屏幕的一部分。
有没有办法防止搜索栏动画到整个屏幕的宽度？
我是这样定义搜索栏的CGRect的：
self = [[UISearchBar alloc] initWithFr
浏览 0提问于2010-06-09得票数 6
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
