fix: DynamicColumn子控件宽度覆盖为100%+修复间隙和覆盖问题
- _fix_children: MutationObserver监听子控件添加,强制width:100%+minWidth:0 - 解决子控件cwidth设置的固定像素宽度超出grid cell导致重叠 - align-items:start防止grid items垂直拉伸 - col_cgap默认值统一为1(原构造函数设0.5但set_column_width用0.1) - 移除console.log调试输出
This commit is contained in:
parent
0686a9ae86
commit
579d60b49b
@ -15,22 +15,34 @@ bricks.DynamicColumn = class extends bricks.Layout {
|
||||
opts.col_cwidth = 20;
|
||||
}
|
||||
}
|
||||
opts.col_cgap = opts.col_cgap || 0.5;
|
||||
opts.col_cgap = opts.col_cgap || 1;
|
||||
opts.mobile_cols = opts.mobile_cols|| 1;
|
||||
super(opts);
|
||||
this.set_style('display', 'grid');
|
||||
// this.set_column_width();
|
||||
this.set_style('align-items', 'start');
|
||||
this.bind('on_parent', this.set_column_width.bind(this));
|
||||
this.bind('resize', this.set_column_width.bind(this));
|
||||
if (this.cwidth){
|
||||
bricks.app.bind('charsize', this.set_column_width.bind(this));
|
||||
}
|
||||
// Watch for new children added and fix their width
|
||||
this._observer = new MutationObserver(this._fix_children.bind(this));
|
||||
this._observer.observe(this.dom_element, {childList: true, subtree: false});
|
||||
}
|
||||
_fix_children(){
|
||||
var children = this.dom_element.children;
|
||||
for (var i=0; i<children.length; i++){
|
||||
var el = children[i];
|
||||
el.style.width = '100%';
|
||||
el.style.minWidth = '0';
|
||||
el.style.boxSizing = 'border-box';
|
||||
}
|
||||
}
|
||||
set_column_width(){
|
||||
var cw;
|
||||
var cols;
|
||||
var gap;
|
||||
gap = bricks.app.charsize * (this.col_cgap || 0.1);
|
||||
gap = bricks.app.charsize * (this.col_cgap || 1);
|
||||
var width = bricks.app.screenWidth();
|
||||
var height = bricks.app.screenHeight();
|
||||
if (bricks.is_mobile() && width < height){
|
||||
@ -46,6 +58,8 @@ bricks.DynamicColumn = class extends bricks.Layout {
|
||||
}
|
||||
this.dom_element.style.gridTemplateColumns = "repeat(auto-fill, minmax(" + cw + "px, 1fr))";
|
||||
this.set_style('gap', gap + 'px');
|
||||
// Fix existing children widths
|
||||
this._fix_children();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user