如何解决如何减少 GridStack 网格元素的最小高度和重量?
我正在使用 GridStack.js 库,我必须使用它来实现键盘。问题是,如果我将屏幕宽度(在 Chrome DevTools 中)设置为小于 800-1000 像素,那么所有网格元素的宽度都会更改为 100%(尽管它们以前不是这样)。示例在这里 https://gridstackjs.com/#demo 所以我猜这个库中有某些最小高度元素。或者整个 .grid-stack 元素具有最小宽度,如果宽度小于最小宽度,则所有 .grid-stack-items 获得宽度:100%。所以问题是如何解决这个问题并设置我自己的最小高度。我可以使用此代码更改宽度:
.grid-stack>.grid-stack-item {
$gridstack-columns: 12; // here I can set columns number
min-width: (100% / $gridstack-columns);
@for $i from 1 through $gridstack-columns {
&[gs-w='#{$i}'] {
width: (100% / $gridstack-columns) * $i;
}
&[gs-x='#{$i}'] {
left: (100% / $gridstack-columns) * $i;
}
&[gs-min-w='#{$i}'] {
min-width: (100% / $gridstack-columns) * $i;
}
&[gs-max-w='#{$i}'] {
max-width: (100% / $gridstack-columns) * $i;
}
}
}
但即使我改变了列数并且我的元素在宽度上变小了,高度仍然和以前一样。
如果我的配置是这样的:
grid.load([{ "w": 1,"h": 1 }]);
...我有 12 列,那么这个元素是方形的。但是,如果我将列数更改为 24,则元素变为矩形(尽管配置中的宽度和高度相等)。我希望单元格的高度和宽度始终相等。
请提供一种更好的方法,如何设置 GridStack 元素的最小高度和宽度,以保持它们适应屏幕宽度。
解决方法
初始化时:
const grid = GridStack.init(options);
您需要将这些添加到选项中:
const options = {
cellHeight: 50,cellWidth: 50,disableOneColumnMode: true
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。