css - ExtJS 6.5.3 设置网格行高度以适应屏幕上的所有行
问题描述
后来我使用 Sencha ExtJS 4.2 和 CSS 参数“x-grid-table”在屏幕上显示所有网格行,而无需任何滚动组件。示例(小提琴):https ://fiddle.sencha.com/#view/editor&fiddle/2hld
.custom-grid .x-grid-table {
height: 100%;
width: 100%;
padding:0;
margin:0;
}
更新到 Sencha ExtJS 6.5.3 后,我发现 CSS“x-grid-table”不可用,因为现在每个网格行都是不同的表。示例不完全工作:https ://fiddle.sencha.com/#view/editor&fiddle/2hl8
我试着用
.custom-grid .x-grid-row {
height: 90px !important;
}
它正在工作,但在这种情况下,我将行高设置为常数。但目标是在任何屏幕分辨率上查看完整的网格。
我该如何解决这个问题?
谢谢你!
解决方案
我想我用这个 CSS 实现了你想要的,我没有做广泛的测试来看看是否会阻止任何网格功能:(为了更好地测试它,在你的小提琴中,在网格上放置一个固定的高度):
.custom-grid .minor {
background: green;
}
.custom-grid .adult {
background: yellow;
}
.custom-grid .x-grid-cell-inner {
text-align: center !important;
}
.custom-grid .x-grid-cell {
vertical-align : middle !important;
}
.custom-grid .x-grid-item > tbody {
height:100% !important;
display: inline-table;
}
.custom-grid .x-grid-item {
width:100% !important;
display:block !important;
flex:1;
-moz-box-flex: 1;
-webkit-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
}
.custom-grid .x-grid-item-container{
height:100%;
display: -moz-box;
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-flex;
display: flex;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
推荐阅读
- python - 如何加载 keras 模型以转换为 tf lite?官方API返回错误
- ios - 在 Swift 中,我该如何做 'if let' 而不是这个?
- amazon-web-services - AWS Beanstalk 上的 jHipster 注册表
- assembly - AArch64 程序集中未采用无条件分支
- java - Subscene Javafx 中的鼠标偏移
- javascript - 使用 Laravel Livewire 传递隐藏的表单输入
- postgresql - 在 PostgreSQL 中创建触发器时出现语法错误
- python - discord.py 中的 member.kick 函数不起作用
- c++ - 迁移到新的 GCC/Red Hat 版本时 sigvec 的问题
- android - 我想用 GalleryFragment 中的后退图标替换汉堡包图标