我正在尝试创建一个网格,该网格必须具有自动调整大小的列(在某些限制范围内)并且其宽度绝不能超过父 div 的宽度。
我有 4 列:
col1 col2 col3 col4
------------------------------------------
| very long text | ... | ... | ... |
| ... | ... | ... | ... |
------------------------------------------
第一列中的值很长,所以我使用样式:white-space: nowrap; text-overflow: ellipsis;
文本保持在一行中。我希望 col2
为 105-170px,col3
为 40-190px,col4
为 75-150px。我喜欢让它尽可能小,以避免出现巨大的空白。
我知道可以通过设置 scrollable: true
来实现类似的功能,但我不需要滚动条,而且我真的不喜欢它毫无用处地放在那里。
最佳答案
在尝试了不同的选项并进行了数小时的搜索之后,我决定使用一个不太优雅的解决方案,但我已经实现了我所寻找的。如果有人遇到类似的问题,这就是我所做的:
- 当 DOM 加载时(
$(document).ready(...)
或$(...)
in jQuery),我调用代码删除权限.k-grid-header
的padding-right
并移除.k-grid-content
的overflow-y
.
我用过的代码:
// jQuery code
$(".k-grid-header").css("padding-right","0");
$(".k-grid-content").css("overflow-y","initial");
// JS (without jQuery) equivalent
var gridHeaders = document.querySelectorAll(".k-grid-header");
for (var i = 0, element; element = gridHeaders[i++];)
element.paddingRight = "0";
var gridContent = document.querySelectorAll(".k-grid-content");
for (var i = 0, element; element = gridContent [i++];)
element.overflowY = "initial";
关于css - Kendo UI 网格列自动调整大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18498797/