Pull request #3142: KERNEL-13158 feature: 增加动态px支持的功能

Merge in VISUAL/fineui from ~GUY/fineui:master to master * commit '5e8a652ad951e6eac18365d19e3405202a002c0a': update bugfix feature：优化布局 feature: 增加动态px
2 years ago · fe29a9ab88
80 changed files with 395 additions and 520 deletions
--- a/src/base/collection/collection.js
+++ b/src/base/collection/collection.js
@ -187,20 +187,11 @@ BI.CollectionView = BI.inherit(BI.Widget, {
                var index = this.renderedKeys[datum.index] && this.renderedKeys[datum.index][1];
                var child;
                if (index >= 0) {
-                    // if (datum.width !== this.renderedCells[index]._width) {
-                    //     this.renderedCells[index]._width = datum.width;
                    this.renderedCells[index].el.setWidth(datum.width);
-                    // }
-                    // if (datum.height !== this.renderedCells[index]._height) {
-                    //     this.renderedCells[index]._height = datum.height;
                    this.renderedCells[index].el.setHeight(datum.height);
-                    // }
-                    // if (this.renderedCells[index]._left !== datum.x) {
-                    this.renderedCells[index].el.element.css("left", datum.x / BI.pixRatio + BI.pixUnit);
-                    // }
-                    // if (this.renderedCells[index]._top !== datum.y) {
-                    this.renderedCells[index].el.element.css("top", datum.y / BI.pixRatio + BI.pixUnit);
-                    // }
+                    // 这里只使用px
+                    this.renderedCells[index].el.element.css("left", datum.x + "px");
+                    this.renderedCells[index].el.element.css("top", datum.y + "px");
                    renderedCells.push(child = this.renderedCells[index]);
                } else {
                    var item = o.itemFormatter(o.items[datum.index], datum.index);
@ -215,8 +206,8 @@ BI.CollectionView = BI.inherit(BI.Widget, {
                    }));
                    renderedCells.push({
                        el: child,
-                        left: datum.x,
-                        top: datum.y,
+                        left: datum.x + "px",
+                        top: datum.y + "px",
                        _left: datum.x,
                        _top: datum.y,
                        // _width: datum.width,
--- a/src/base/grid/grid.js
+++ b/src/base/grid/grid.js
@ -185,20 +185,11 @@ BI.GridView = BI.inherit(BI.Widget, {
                        var index = this.renderedKeys[key] && this.renderedKeys[key][2];
                        var child;
                        if (index >= 0) {
-                            // if (columnDatum.size !== this.renderedCells[index]._width) {
-                            // this.renderedCells[index]._width = columnDatum.size;
                            this.renderedCells[index].el.setWidth(columnDatum.size);
-                            // }
-                            // if (rowDatum.size !== this.renderedCells[index]._height) {
-                            // this.renderedCells[index]._height = rowDatum.size;
                            this.renderedCells[index].el.setHeight(rowDatum.size);
-                            // }
-                            // if (this.renderedCells[index]._left !== columnDatum.offset + horizontalOffsetAdjustment) {
-                            this.renderedCells[index].el.element.css("left", (columnDatum.offset + horizontalOffsetAdjustment) / BI.pixRatio + BI.pixUnit);
-                            // }
-                            // if (this.renderedCells[index]._top !== rowDatum.offset + verticalOffsetAdjustment) {
-                            this.renderedCells[index].el.element.css("top", (rowDatum.offset + verticalOffsetAdjustment) / BI.pixRatio + BI.pixUnit);
-                            // }
+                            // 这里只使用px
+                            this.renderedCells[index].el.element.css("left", columnDatum.offset + horizontalOffsetAdjustment + "px");
+                            this.renderedCells[index].el.element.css("top", rowDatum.offset + verticalOffsetAdjustment + "px");
                            child = this.renderedCells[index].el;
                            renderedCells.push(this.renderedCells[index]);
                        } else {
@ -216,8 +207,8 @@ BI.GridView = BI.inherit(BI.Widget, {
                            }), this);
                            renderedCells.push({
                                el: child,
-                                left: columnDatum.offset + horizontalOffsetAdjustment,
-                                top: rowDatum.offset + verticalOffsetAdjustment,
+                                left: columnDatum.offset + horizontalOffsetAdjustment + "px",
+                                top: rowDatum.offset + verticalOffsetAdjustment + "px",
                                _left: columnDatum.offset + horizontalOffsetAdjustment,
                                _top: rowDatum.offset + verticalOffsetAdjustment,
                                // _width: columnDatum.size,
--- a/src/base/layer/layer.popup.js
+++ b/src/base/layer/layer.popup.js
@ -60,8 +60,8 @@ BI.PopupView = BI.inherit(BI.Widget, {
        }
        this.element.css({
            "z-index": BI.zIndex_popup,
-            "min-width": BI.isNumeric(o.minWidth) ? (o.minWidth / BI.pixRatio + BI.pixUnit) : o.minWidth,
-            "max-width": BI.isNumeric(o.maxWidth) ? (o.maxWidth / BI.pixRatio + BI.pixUnit) : o.maxWidth,
+            "min-width": BI.isNumeric(o.minWidth) ? (BI.pixFormat(o.minWidth)) : o.minWidth,
+            "max-width": BI.isNumeric(o.maxWidth) ? (BI.pixFormat(o.maxWidth)) : o.maxWidth,
        }).bind({ click: fn });

        this.element.bind("mousewheel", fn);
@ -135,11 +135,11 @@ BI.PopupView = BI.inherit(BI.Widget, {
        var o = this.options;
        this.button_group = BI.createWidget(o.el, { type: "bi.button_group", value: o.value });
        this.button_group.element.css({
-            "min-height": BI.isNumeric(o.minHeight) ? (o.minHeight / BI.pixRatio + BI.pixUnit) : o.minHeight,
-            "padding-top": o.innerVgap / BI.pixRatio + BI.pixUnit,
-            "padding-bottom": o.innerVgap / BI.pixRatio + BI.pixUnit,
-            "padding-left": o.innerHgap / BI.pixRatio + BI.pixUnit,
-            "padding-right": o.innerHgap / BI.pixRatio + BI.pixUnit,
+            "min-height": BI.isNumeric(o.minHeight) ? (BI.pixFormat(o.minHeight)) : o.minHeight,
+            "padding-top": BI.pixFormat(o.innerVgap),
+            "padding-bottom": BI.pixFormat(o.innerVgap),
+            "padding-left": BI.pixFormat(o.innerHgap),
+            "padding-right": BI.pixFormat(o.innerHgap),
        });

        return this.button_group;
@ -411,7 +411,7 @@ BI.PopupView = BI.inherit(BI.Widget, {
            toolHeight = ((this.tool && this.tool.attr("height")) || 24) * ((this.tool && this.tool.isVisible()) ? 1 : 0);
        var resetHeight = h - tbHeight - tabHeight - toolHeight - 2 * this.options.innerVgap;
        this.view.resetHeight ? this.view.resetHeight(resetHeight) :
-            this.view.element.css({ "max-height": resetHeight / BI.pixRatio + BI.pixUnit });
+            this.view.element.css({ "max-height": BI.pixFormat(resetHeight) });
    },

    setValue: function (selectedValues) {
--- a/src/base/list/virtualgrouplist.js
+++ b/src/base/list/virtualgrouplist.js
@ -117,7 +117,7 @@ BI.VirtualGroupList = BI.inherit(BI.Widget, {
        var end = this.tree.leastUpperBound(minContentHeightTo);
        var items = [];
        var topHeight = this.tree.sumTo(Math.max(-1, start - 1));
-        this.topBlank.setHeight(topHeight);
+        this.topBlank.setHeight(topHeight + "px");
        if (this._isAutoHeight()) {
            for (var i = (start < 0 ? 0 : start); i <= end && i <= this.renderedIndex; i++) {
                var index = i * o.blockSize;
@ -125,7 +125,7 @@ BI.VirtualGroupList = BI.inherit(BI.Widget, {
                    items.push(o.items[j]);
                }
            }
-            this.bottomBlank.setHeight(this.tree.sumTo(this.renderedIndex) - this.tree.sumTo(Math.min(end, this.renderedIndex)));
+            this.bottomBlank.setHeight(this.tree.sumTo(this.renderedIndex) - this.tree.sumTo(Math.min(end, this.renderedIndex)) + "px");
            this.container.populate(items.map(function (item, i) {
                return o.itemFormatter(item, (start < 0 ? 0 : start) * o.blockSize + i);
            }));
--- a/src/base/list/virtuallist.js
+++ b/src/base/list/virtuallist.js
@ -146,8 +146,8 @@ BI.VirtualList = BI.inherit(BI.Widget, {
        }
        this.container.element.prepend(firstFragment);
        this.container.element.append(lastFragment);
-        this.topBlank.setHeight(this.tree.sumTo(Math.max(-1, start - 1)));
-        this.bottomBlank.setHeight(this.tree.sumTo(this.renderedIndex) - this.tree.sumTo(Math.min(end, this.renderedIndex)));
+        this.topBlank.setHeight(this.tree.sumTo(Math.max(-1, start - 1)) + "px");
+        this.bottomBlank.setHeight(this.tree.sumTo(this.renderedIndex) - this.tree.sumTo(Math.min(end, this.renderedIndex)) + "px");
        BI.each(needMount, function (i, child) {
            child && child._mount();
        });
--- a/src/base/single/1.text.js
+++ b/src/base/single/1.text.js
@ -26,32 +26,32 @@
            var self = this, o = this.options;
            if (o.hgap + o.lgap > 0) {
                this.element.css({
-                    "padding-left": (o.hgap + o.lgap) / BI.pixRatio + BI.pixUnit,
+                    "padding-left": BI.pixFormat(o.hgap + o.lgap),
                });
            }
            if (o.hgap + o.rgap > 0) {
                this.element.css({
-                    "padding-right": (o.hgap + o.rgap) / BI.pixRatio + BI.pixUnit,
+                    "padding-right": BI.pixFormat(o.hgap + o.rgap),
                });
            }
            if (o.vgap + o.tgap > 0) {
                this.element.css({
-                    "padding-top": (o.vgap + o.tgap) / BI.pixRatio + BI.pixUnit,
+                    "padding-top": BI.pixFormat(o.vgap + o.tgap),
                });
            }
            if (o.vgap + o.bgap > 0) {
                this.element.css({
-                    "padding-bottom": (o.vgap + o.bgap) / BI.pixRatio + BI.pixUnit,
+                    "padding-bottom": BI.pixFormat(o.vgap + o.bgap),
                });
            }
            if (BI.isWidthOrHeight(o.height)) {
-                this.element.css({ lineHeight: BI.isNumber(o.height) ? (o.height / BI.pixRatio + BI.pixUnit) : o.height });
+                this.element.css({ lineHeight: BI.isNumber(o.height) ? BI.pixFormat(o.height) : o.height });
            }
            if (BI.isWidthOrHeight(o.lineHeight)) {
-                this.element.css({ lineHeight: BI.isNumber(o.lineHeight) ? (o.lineHeight / BI.pixRatio + BI.pixUnit) : o.lineHeight });
+                this.element.css({ lineHeight: BI.isNumber(o.lineHeight) ? BI.pixFormat(o.lineHeight) : o.lineHeight });
            }
            if (BI.isWidthOrHeight(o.maxWidth)) {
-                this.element.css({ maxWidth: BI.isNumber(o.maxWidth) ? (o.maxWidth / BI.pixRatio + BI.pixUnit) : o.maxWidth });
+                this.element.css({ maxWidth: BI.isNumber(o.maxWidth) ? BI.pixFormat(o.maxWidth) : o.maxWidth });
            }
            this.element.css({
                textAlign: o.textAlign,
--- a/src/base/single/button/buttons/button.icon.js
+++ b/src/base/single/button/buttons/button.icon.js
@ -31,7 +31,7 @@ BI.IconButton = BI.inherit(BI.BasicButton, {
            height: o.iconHeight,
        });
        if (BI.isNumber(o.height) && o.height > 0 && BI.isNull(o.iconWidth) && BI.isNull(o.iconHeight)) {
-            this.element.css("lineHeight", o.height / BI.pixRatio + BI.pixUnit);
+            this.element.css("lineHeight", BI.pixFormat(o.height));
            BI.createWidget({
                type: "bi.default",
                element: this,
--- a/src/base/single/button/buttons/button.js
+++ b/src/base/single/button/buttons/button.js
@ -73,12 +73,14 @@

            // 由于button默认情况下有个边框，所以要主动算行高
            var lineHeight, textHeight = o.textHeight;
+            var hasBorder = false
            if (BI.isNumber(o.height)) {
                if (!isVertical(o.iconPosition)) {
                    if (o.clear || o.block || o.light) {
                        lineHeight = o.height;
                    } else {
-                        lineHeight = o.height - 2;
+                        hasBorder = true;
+                        lineHeight = o.height;
                    }
                } else {
                    lineHeight = textHeight;
@ -98,8 +100,8 @@
                    type: "bi.icon_label",
                    cls: o.loading ? loadingCls : (o.iconCls || o.icon),
                    width: this._const.iconWidth,
-                    height: lineHeight,
-                    lineHeight: lineHeight,
+                    height: BI.pixFormat(lineHeight, hasBorder ? 2 : 0),
+                    lineHeight: BI.pixFormat(lineHeight, hasBorder ? 2 : 0),
                    // 不设置，自定义按钮无法居中
                    iconWidth: o.iconWidth,
                    iconHeight: o.iconHeight,
@ -120,8 +122,8 @@
                whiteSpace: o.whiteSpace,
                textAlign: o.textAlign,
                textWidth: textWidth,
-                textHeight: textHeight,
-                height: lineHeight,
+                textHeight: BI.pixFormat(textHeight, hasBorder ? 2 : 0),
+                height: BI.pixFormat(lineHeight, hasBorder ? 2 : 0),
                value: o.value,
                title: null,
            });
@ -163,7 +165,7 @@
            });

            if (o.minWidth > 0) {
-                this.element.css({ "min-width": o.minWidth / BI.pixRatio + BI.pixUnit });
+                this.element.css({ "min-width": BI.pixFormat(o.minWidth) });
            }
        },

--- a/src/base/single/html/html.js
+++ b/src/base/single/html/html.js
@ -25,33 +25,36 @@ BI.Html = BI.inherit(BI.Single, {
        var self = this, o = this.options;
        if (o.hgap + o.lgap > 0) {
            this.element.css({
-                "padding-left": (o.hgap + o.lgap) / BI.pixRatio + BI.pixUnit,
+                "padding-left": BI.pixFormat(o.hgap + o.lgap),
            });
        }
        if (o.hgap + o.rgap > 0) {
            this.element.css({
-                "padding-right": (o.hgap + o.rgap) / BI.pixRatio + BI.pixUnit,
+                "padding-right": BI.pixFormat(o.hgap + o.rgap),
            });
        }
        if (o.vgap + o.tgap > 0) {
            this.element.css({
-                "padding-top": (o.vgap + o.tgap) / BI.pixRatio + BI.pixUnit,
+                "padding-top": BI.pixFormat(o.vgap + o.tgap),
            });
        }
        if (o.vgap + o.bgap > 0) {
            this.element.css({
-                "padding-bottom": (o.vgap + o.bgap) / BI.pixRatio + BI.pixUnit,
+                "padding-bottom": BI.pixFormat(o.vgap + o.bgap),
            });
        }
        if (BI.isNumber(o.height)) {
-            this.element.css({ lineHeight: o.height / BI.pixRatio + BI.pixUnit });
+            this.element.css({ lineHeight: BI.pixFormat(o.height) });
        }
        if (BI.isNumber(o.lineHeight)) {
-            this.element.css({ lineHeight: o.lineHeight / BI.pixRatio + BI.pixUnit });
+            this.element.css({ lineHeight: BI.pixFormat(o.lineHeight) });
        }
        if (BI.isWidthOrHeight(o.maxWidth)) {
            this.element.css({ maxWidth: o.maxWidth });
        }
+        if (BI.isNumber(o.maxWidth)) {
+            this.element.css({ maxWidth: BI.pixFormat(o.maxWidth) })
+        }
        this.element.css({
            textAlign: o.textAlign,
            whiteSpace: o.whiteSpace,
--- a/src/base/single/label/abstract.label.js
+++ b/src/base/single/label/abstract.label.js
@ -109,7 +109,7 @@
                }
                if (BI.isNumber(o.height) && o.height > 0) { // 1.4
                    this.element.css({
-                        "line-height": o.height / BI.pixRatio + BI.pixUnit,
+                        "line-height": BI.pixFormat(o.height),
                    });
                    json.textAlign = o.textAlign;
                    delete json.maxWidth;
@ -183,7 +183,7 @@
            }
            if (BI.isNumber(o.height) && o.height > 0) { // 1.8
                this.element.css({
-                    "line-height": o.height / BI.pixRatio + BI.pixUnit,
+                    "line-height": BI.pixFormat(o.height),
                });
                json.textAlign = o.textAlign;
                delete json.maxWidth;
@ -263,7 +263,7 @@
                if (BI.isNumber(o.height) && o.height > 0) { // 2.3
                    if (o.whiteSpace !== "normal") {
                        this.element.css({
-                            "line-height": (o.height - (o.vgap * 2)) / BI.pixRatio + BI.pixUnit,
+                            "line-height": BI.pixFormat(o.height - (o.vgap * 2)),
                        });
                    }
                    delete json.maxWidth;
@ -325,7 +325,7 @@
            if (BI.isNumber(o.height) && o.height > 0) {
                if (o.whiteSpace !== "normal") {
                    this.element.css({
-                        "line-height": (o.height - (o.vgap * 2)) / BI.pixRatio + BI.pixUnit,
+                        "line-height": BI.pixFormat(o.height - (o.vgap * 2)),
                    });
                }
                delete json.maxWidth;
--- a/src/base/single/label/icon.label.js
+++ b/src/base/single/label/icon.label.js
@ -29,7 +29,7 @@ BI.IconLabel = BI.inherit(BI.Single, {
            height: o.iconHeight,
        });
        if (BI.isNumber(o.height) && o.height > 0 && BI.isNull(o.iconWidth) && BI.isNull(o.iconHeight)) {
-            this.element.css("lineHeight", (o.lineHeight || o.height) / BI.pixRatio + BI.pixUnit);
+            this.element.css("lineHeight", BI.pixFormat(o.lineHeight || o.height));
            BI.createWidget({
                type: "bi.default",
                element: this,
--- a/src/base/single/tip/tip.toast.js
+++ b/src/base/single/tip/tip.toast.js
@ -30,8 +30,9 @@ BI.Toast = BI.inherit(BI.Tip, {
    render: function () {
        var self = this, o = this.options, c = this._const;
        this.element.css({
-            minWidth: (o.closable ? c.closableMinWidth : c.minWidth) / BI.pixRatio + BI.pixUnit,
-            maxWidth: (o.closable ? c.closableMaxWidth : c.maxWidth) / BI.pixRatio + BI.pixUnit,
+            // 这里直接使用px即可
+            minWidth: BI.pixFormat(o.closable ? c.closableMinWidth : c.minWidth),
+            maxWidth: BI.pixFormat(o.closable ? c.closableMaxWidth : c.maxWidth),
        });
        this.element.addClass("toast-" + o.level);
        function fn(e) {
--- a/src/base/single/tip/tip.tooltip.js
+++ b/src/base/single/tip/tip.tooltip.js
@ -73,7 +73,7 @@ BI.Tooltip = BI.inherit(BI.Tip, {
    },

    setWidth: function (width) {
-        this.element.width(width - 2 * this._const.hgap);
+        this.element.width(BI.pixFormat(width - 2 * this._const.hgap));
    },

    setText: function (text) {
--- a/src/case/colorchooser/colorchooser.js
+++ b/src/case/colorchooser/colorchooser.js
@ -36,8 +36,8 @@ BI.ColorChooser = BI.inherit(BI.Widget, {
                    self.trigger = _ref;
                },
                value: o.value,
-                width: o.el.type ? o.width : o.width - 2,
-                height: o.el.type ? o.height : o.height - 2
+                width: o.el.type ? o.width : BI.pixFormat(o.width, 2),
+                height: o.el.type ? o.height : BI.pixFormat(o.height, 2)
            }, o.el),
            popup: () => ({
                el: BI.extend({
--- a/src/case/combo/icontextvaluecombo/combo.icontextvalue.js
+++ b/src/case/combo/icontextvaluecombo/combo.icontextvalue.js
@ -15,8 +15,6 @@ BI.IconTextValueCombo = BI.inherit(BI.Widget, {

    _init: function () {
        var self = this, o = this.options;
-        BI.isNumeric(o.width) && (o.width -= 2);
-        BI.isNumeric(o.height) && (o.height -= 2);
        o.value = BI.isFunction(o.value) ? this.__watch(o.value, function (context, newValue) {
            self.setValue(newValue);
        }) : o.value;
@ -28,7 +26,7 @@ BI.IconTextValueCombo = BI.inherit(BI.Widget, {
            type: "bi.select_icon_text_trigger",
            cls: "icon-text-value-trigger",
            items: o.items,
-            height: o.height,
+            height: BI.pixFormat(o.height, 2),
            text: o.text,
            iconCls: o.iconCls,
            value: o.value,
@ -56,6 +54,8 @@ BI.IconTextValueCombo = BI.inherit(BI.Widget, {
        });
        this.textIconCombo = BI.createWidget({
            type: "bi.combo",
+            height: BI.pixFormat(o.height, 2),
+            width: BI.pixFormat(o.width, 2),
            element: this,
            container: o.container,
            direction: o.direction,
--- a/src/case/combo/searchtextvaluecombo/combo.searchtextvalue.js
+++ b/src/case/combo/searchtextvaluecombo/combo.searchtextvalue.js
@ -23,16 +23,13 @@ BI.SearchTextValueCombo = BI.inherit(BI.Widget, {
            self.populate(newValue);
        }) : o.items;

-        var height = BI.isNumeric(o.height) ? (o.height - (o.simple ? 1 : 2)) : o.height;
-        var width = BI.isNumeric(o.width) ? (o.width - 2) : o.width;
-
        return {
            type: "bi.combo",
            cls: (o.simple ? "bi-border-bottom" : "bi-border bi-border-radius") + " bi-focus-shadow",
            container: o.container,
            adjustLength: 2,
-            height: height,
-            width: width,
+            height: BI.pixFormat(o.height, o.simple ? 1 : 2),
+            width: BI.pixFormat(o.width, 2),
            ref: function () {
                self.combo = this;
            },
@ -44,7 +41,7 @@ BI.SearchTextValueCombo = BI.inherit(BI.Widget, {
                    self.trigger = this;
                },
                items: o.items,
-                height: height,
+                height: BI.pixFormat(o.height, o.simple ? 1 : 2),
                text: o.text,
                defaultText: o.defaultText,
                value: o.value,
--- a/src/case/combo/textvaluecheckcombo/combo.textvaluecheck.js
+++ b/src/case/combo/textvaluecheckcombo/combo.textvaluecheck.js
@ -16,8 +16,6 @@ BI.TextValueCheckCombo = BI.inherit(BI.Widget, {

    _init: function () {
        var self = this, o = this.options;
-        BI.isNumeric(o.width) && (o.width -= 2);
-        BI.isNumeric(o.height) && (o.height -= 2);
        o.value = BI.isFunction(o.value) ? this.__watch(o.value, function (context, newValue) {
            self.setValue(newValue);
        }) : o.value;
@ -29,7 +27,7 @@ BI.TextValueCheckCombo = BI.inherit(BI.Widget, {
            type: "bi.select_text_trigger",
            cls: "text-value-trigger",
            items: o.items,
-            height: o.height,
+            height: BI.pixFormat(o.height, 2),
            text: o.text,
            value: o.value
        });
@ -52,6 +50,8 @@ BI.TextValueCheckCombo = BI.inherit(BI.Widget, {
            container: o.container,
            direction: o.direction,
            element: this,
+            width: BI.pixFormat(o.width, 2),
+            height: BI.pixFormat(o.height, 2),
            adjustLength: 2,
            el: this.trigger,
            popup: {
--- a/src/case/combo/textvaluecombo/combo.textvalue.js
+++ b/src/case/combo/textvaluecombo/combo.textvalue.js
@ -22,8 +22,6 @@ BI.TextValueCombo = BI.inherit(BI.Widget, {

    _init: function () {
        var self = this, o = this.options;
-        BI.isNumeric(o.width) && (o.width -= (o.simple ? 0 : 2));
-        BI.isNumeric(o.height) && (o.height -= (o.simple ? 1 : 2));
        o.value = BI.isFunction(o.value) ? this.__watch(o.value, function (context, newValue) {
            self.setValue(newValue);
        }) : o.value;
@ -57,7 +55,7 @@ BI.TextValueCombo = BI.inherit(BI.Widget, {
            ref: ref => this.trigger = ref,
            cls: "text-value-trigger",
            items: o.items,
-            height: o.height,
+            height: BI.pixFormat(o.height, o.simple ? 1 : 2),
            text: o.text,
            value: o.value,
            title,
@ -118,6 +116,8 @@ BI.TextValueCombo = BI.inherit(BI.Widget, {

        return {
            type: "bi.combo",
+            height: BI.pixFormat(o.height, 2),
+            width: BI.pixFormat(o.width, 2),
            ref: ref => this.combo = ref,
            container: o.container,
            direction: o.direction,
--- a/src/case/layer/panel.js
+++ b/src/case/layer/panel.js
@ -59,7 +59,7 @@ BI.Panel = BI.inherit(BI.Widget, {
            el: {
                type: "bi.left_right_vertical_adapt",
                cls: "panel-title bi-header-background bi-border-bottom",
-                height: o.titleHeight - 1,
+                height: BI.pixFormat(o.titleHeight, 1),
                items: {
                    left: [this.text],
                    right: [this.button_group]
@ -67,7 +67,7 @@ BI.Panel = BI.inherit(BI.Widget, {
                lhgap: 10,
                rhgap: 10
            },
-            height: o.titleHeight - 1
+            height: BI.pixFormat(o.titleHeight, 1)
        };
    },

--- a/src/case/linearsegment/button.linear.segment.js
+++ b/src/case/linearsegment/button.linear.segment.js
@ -15,7 +15,7 @@ BI.LinearSegmentButton = BI.inherit(BI.BasicButton, {
            type: "bi.label",
            text: o.text,
            height: o.height,
-            textHeight: o.height - 2,
+            textHeight: BI.pixFormat(o.height, 2),
            value: o.value,
            hgap: o.hgap,
            ref: function () {
--- a/src/case/list/list.select.js
+++ b/src/case/list/list.select.js
@ -192,7 +192,7 @@ BI.SelectList = BI.inherit(BI.Widget, {
    resetHeight: function (h) {
        var toolHeight = ( this.toolbar.element.outerHeight() || 25) * ( this.toolbar.isVisible() ? 1 : 0);
        this.list.resetHeight ? this.list.resetHeight(h - toolHeight) :
-            this.list.element.css({"max-height": (h - toolHeight) / BI.pixRatio + BI.pixUnit});
+            this.list.element.css({"max-height": BI.pixFormat(h - toolHeight)});
    },

    setNotSelectedValue: function () {
--- a/src/case/segment/button.segment.js
+++ b/src/case/segment/button.segment.js
@ -20,9 +20,6 @@ BI.SegmentButton = BI.inherit(BI.BasicButton, {
    _init: function () {
        BI.SegmentButton.superclass._init.apply(this, arguments);
        var opts = this.options, self = this;
-        // if (BI.isNumber(opts.height) && BI.isNull(opts.lineHeight)) {
-        //    this.element.css({lineHeight : (opts.height - 2) + 'px'});
-        // }
        this.text = BI.createWidget({
            type: "bi.label",
            element: this,
--- a/src/case/segment/segment.js
+++ b/src/case/segment/segment.js
@ -22,7 +22,7 @@ BI.Segment = BI.inherit(BI.Widget, {
            value: o.value,
            items: BI.createItems(o.items, {
                type: "bi.segment_button",
-                height: o.height - 2,
+                height: BI.pixFormat(o.height, 2),
                whiteSpace: o.whiteSpace
            }),
            layout: [
--- a/src/case/tree/treeexpander/tree.expander.popup.js
+++ b/src/case/tree/treeexpander/tree.expander.popup.js
@ -25,8 +25,8 @@
            });

            if (o.showLine) {
-                this.popupView.element.css("margin-left", -offset * (o.layer + 1) / BI.pixRatio + BI.pixUnit);
-                this.element.css("margin-left", offset * (o.layer + 1) / BI.pixRatio + BI.pixUnit);
+                this.popupView.element.css("margin-left", BI.pixFormat(-offset * (o.layer + 1)));
+                this.element.css("margin-left", BI.pixFormat(offset * (o.layer + 1)));
            }

            return {
--- a/src/case/trigger/trigger.editor.js
+++ b/src/case/trigger/trigger.editor.js
@ -20,12 +20,11 @@ BI.EditorTrigger = BI.inherit(BI.Trigger, {
    },

    _init: function () {
-        this.options.height -= 2;
        BI.EditorTrigger.superclass._init.apply(this, arguments);
        var self = this, o = this.options, c = this._const;
        this.editor = BI.createWidget({
            type: "bi.sign_editor",
-            height: o.height,
+            height: BI.pixFormat(o.height, 2),
            value: o.value,
            validationChecker: o.validationChecker,
            quitChecker: o.quitChecker,
@ -58,6 +57,7 @@ BI.EditorTrigger = BI.inherit(BI.Trigger, {
        BI.createWidget({
            element: this,
            type: "bi.horizontal_fill",
+            height: BI.pixFormat(o.height, 2),
            items: [
                {
                    el: this.editor,
@ -65,9 +65,9 @@ BI.EditorTrigger = BI.inherit(BI.Trigger, {
                }, {
                    el: {
                        type: "bi.trigger_icon_button",
-                        width: o.triggerWidth || o.height
+                        width: o.triggerWidth || BI.pixFormat(o.height, 2)
                    },
-                    width: o.triggerWidth || o.height
+                    width: o.triggerWidth || BI.pixFormat(o.height, 2)
                }
            ]
        });
--- a/src/case/trigger/trigger.text.select.small.js
+++ b/src/case/trigger/trigger.text.select.small.js
@ -14,14 +14,13 @@ BI.SmallSelectTextTrigger = BI.inherit(BI.Trigger, {
    },

    _init: function () {
-        this.options.height -= 2;
        BI.SmallSelectTextTrigger.superclass._init.apply(this, arguments);
        var self = this, o = this.options;
        var obj = this._digest(o.value, o.items);
        this.trigger = BI.createWidget({
            type: "bi.small_text_trigger",
            element: this,
-            height: o.height,
+            height: BI.pixFormat(o.height, 2),
            text: obj.text,
            cls: obj.cls,
            textHgap: o.textHgap,
--- a/src/core/4.widget.js
+++ b/src/core/4.widget.js
@ -116,8 +116,6 @@

        _init: function () {
            BI.Widget.superclass._init.apply(this, arguments);
-            this._initElementWidth();
-            this._initElementHeight();
            this._initVisual();
            this._initState();
            this._initRender();
@ -203,6 +201,8 @@

        _initCurrent: function () {
            var self = this, o = this.options;
+            this._initElementWidth();
+            this._initElementHeight();
            if (o._baseCls || o.baseCls || o.extraCls) {
                this.element.addClass((o._baseCls || "") + " " + (o.baseCls || "") + " " + (o.extraCls || ""));
            }
@ -289,14 +289,14 @@
        _initElementWidth: function () {
            var o = this.options;
            if (BI.isWidthOrHeight(o.width)) {
-                this.element.css("width", BI.isNumber(o.width) ? o.width / BI.pixRatio + BI.pixUnit : o.width);
+                this.element.css("width", BI.isNumber(o.width) ? BI.pixFormat(o.width) : o.width);
            }
        },

        _initElementHeight: function () {
            var o = this.options;
            if (BI.isWidthOrHeight(o.height)) {
-                this.element.css("height", BI.isNumber(o.height) ? o.height / BI.pixRatio + BI.pixUnit : o.height);
+                this.element.css("height", BI.isNumber(o.height) ? BI.pixFormat(o.height) : o.height);
            }
        },

@ -903,14 +903,24 @@

    BI.useContext = function (inject) {
        if (BI.Model.target) {
-            var p = BI.Model.target;
+            var vm = BI.Model.target;
            if (inject) {
-                while (p) {
-                    if (p.$$context && inject in p.$$context) {
-                        return p;
+                if (vm.$$computed && inject in vm.$$computed) {
+                    return vm;
+                }
+                if (vm.$$state && inject in vm.$$state) {
+                    return vm;
+                }
+                if (vm.$$model && inject in vm.$$model) {
+                    return vm;
+                }
+                while (vm) {
+                    if (vm.$$context && inject in vm.$$context) {
+                        return vm;
                    }
-                    p = p._parent;
+                    vm = vm._parent;
                }
+                return null;
            }
        }
        return BI.Model.target;
--- a/src/core/constant/var.js
+++ b/src/core/constant/var.js
@ -15,6 +15,19 @@ BI._.extend(BI, {
    emptyStr: "",
    pixUnit: "px",
    pixRatio: 1,
+    pixFormat: function (pix, border) {
+        if (!BI.isNumber(pix)) {
+            return pix;
+        }
+        if (BI.pixUnit === "px" && BI.pixRatio === 1) {
+            return (pix - (border || 0)) / BI.pixRatio + BI.pixUnit;
+        }
+        var length = pix / BI.pixRatio + BI.pixUnit;
+        if (border > 0) {
+            return `calc(${length} - ${border + "px"})`;
+        }
+        return length;
+    },
    emptyFn: function () {
    },
    empty: null,
--- a/src/core/controller/controller.popover.js
+++ b/src/core/controller/controller.popover.js
@ -59,8 +59,9 @@ BI.PopoverController = BI.inherit(BI.Controller, {
                top = 0;
            }
            popover.element.css({
-                left: left / BI.pixRatio + BI.pixUnit,
-                top: top / BI.pixRatio + BI.pixUnit
+                // 这里直接用px就可以
+                left: left + "px",
+                top: top + "px"
            });
        }
        return this;
--- a/src/core/controller/controller.tooltips.js
+++ b/src/core/controller/controller.tooltips.js
@ -71,8 +71,9 @@ BI.TooltipsController = BI.inherit(BI.Controller, {
            !opt.belowMouse && (y = Math.max(y, top));
        }
        tooltip.element.css({
-            left: x < 0 ? 0 : x / BI.pixRatio + BI.pixUnit,
-            top: y < 0 ? 0 : y / BI.pixRatio + BI.pixUnit
+            // 这里直接用px就可以
+            left: x < 0 ? 0 : x + "px",
+            top: y < 0 ? 0 : y + "px"
        });
        tooltip.element.hover(function () {
            self.remove(name);
--- a/src/core/wrapper/layout.js
+++ b/src/core/wrapper/layout.js
@ -42,16 +42,16 @@ BI.Layout = BI.inherit(BI.Widget, {

    _init4Margin: function () {
        if (this.options.top) {
-            this.element.css("top", BI.isNumber(this.options.top) ? this.options.top / BI.pixRatio + BI.pixUnit : this.options.top);
+            this.element.css("top", BI.isNumber(this.options.top) ? BI.pixFormat(this.options.top) : this.options.top);
        }
        if (this.options.left) {
-            this.element.css("left", BI.isNumber(this.options.left) ? this.options.left / BI.pixRatio + BI.pixUnit : this.options.left);
+            this.element.css("left", BI.isNumber(this.options.left) ? BI.pixFormat(this.options.left) : this.options.left);
        }
        if (this.options.bottom) {
-            this.element.css("bottom", BI.isNumber(this.options.bottom) ? this.options.bottom / BI.pixRatio + BI.pixUnit : this.options.bottom);
+            this.element.css("bottom", BI.isNumber(this.options.bottom) ? BI.pixFormat(this.options.bottom) : this.options.bottom);
        }
        if (this.options.right) {
-            this.element.css("right", BI.isNumber(this.options.right) ? this.options.right / BI.pixRatio + BI.pixUnit : this.options.right);
+            this.element.css("right", BI.isNumber(this.options.right) ? BI.pixFormat(this.options.right) : this.options.right);
        }
    },

@ -289,7 +289,7 @@ BI.Layout = BI.inherit(BI.Widget, {
    },

    _optimiseGap: function (gap) {
-        return (gap > 0 && gap < 1) ? (gap * 100).toFixed(1) + "%" : gap / BI.pixRatio + BI.pixUnit;
+        return (gap > 0 && gap < 1) ? (gap * 100).toFixed(1) + "%" : BI.pixFormat(gap);
    },

    _optimiseItemLgap: function (item) {
--- a/src/core/wrapper/layout/layout.flow.js
+++ b/src/core/wrapper/layout/layout.flow.js
@ -137,16 +137,16 @@ BI.FloatRightLayout = BI.inherit(BI.Layout, {
        var w = BI.FloatRightLayout.superclass._addElement.apply(this, arguments);
        w.element.css({position: "relative", float: "right"});
        if (BI.isNotNull(item.left)) {
-            w.element.css({left: BI.isNumber(item.left) ? item.left / BI.pixRatio + BI.pixUnit : item.left});
+            w.element.css({left: BI.isNumber(item.left) ? BI.pixFormat(item.left) : item.left});
        }
        if (BI.isNotNull(item.right)) {
-            w.element.css({right: BI.isNumber(item.right) ? item.right / BI.pixRatio + BI.pixUnit : item.right});
+            w.element.css({right: BI.isNumber(item.right) ? BI.pixFormat(item.right) : item.right});
        }
        if (BI.isNotNull(item.top)) {
-            w.element.css({top: BI.isNumber(item.top) ? item.top / BI.pixRatio + BI.pixUnit : item.top});
+            w.element.css({top: BI.isNumber(item.top) ? BI.pixFormat(item.top) : item.top});
        }
        if (BI.isNotNull(item.bottom)) {
-            w.element.css({bottom: BI.isNumber(item.bottom) ? item.bottom / BI.pixRatio + BI.pixUnit : item.bottom});
+            w.element.css({bottom: BI.isNumber(item.bottom) ? BI.pixFormat(item.bottom) : item.bottom});
        }
        if (o.vgap + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item) !== 0) {
            var top = o.vgap / 2 + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item);
--- a/src/core/wrapper/layout/layout.inline.js
+++ b/src/core/wrapper/layout/layout.inline.js
@ -47,7 +47,7 @@ BI.InlineLayout = BI.inherit(BI.Layout, {
            }
        }
        if (columnSize > 0) {
-            w.element.width(columnSize < 1 ? ((columnSize * 100).toFixed(1) + "%") : (columnSize / BI.pixRatio + BI.pixUnit));
+            w.element.width(columnSize < 1 ? ((columnSize * 100).toFixed(1) + "%") : BI.pixFormat(columnSize));
        }
        w.element.css({
            position: "relative",
@ -69,8 +69,8 @@ BI.InlineLayout = BI.inherit(BI.Layout, {
                gap += o.hgap + o.lgap + o.rgap + this._optimiseItemLgap(o.items[k]) + this._optimiseItemRgap(o.items[k]) + this._optimiseItemHgap(o.items[k]);
                length += cz;
            }
-            length = length > 0 && length < 1 ? (length * 100).toFixed(1) + "%" : length / BI.pixRatio + BI.pixUnit;
-            gap = gap > 0 && gap < 1 ? (gap * 100).toFixed(1) + "%" : gap / BI.pixRatio + BI.pixUnit;
+            length = length > 0 && length < 1 ? (length * 100).toFixed(1) + "%" : BI.pixFormat(length);
+            gap = gap > 0 && gap < 1 ? (gap * 100).toFixed(1) + "%" : BI.pixFormat(gap);
            if (columnSize === "fill") {
                w.element.css("min-width", "calc((100% - " + length + " - " + gap + ")" + (fillCount > 1 ? "/" + fillCount : "") + ")");
            }
@ -86,7 +86,7 @@ BI.InlineLayout = BI.inherit(BI.Layout, {
        if (o.verticalAlign === BI.VerticalAlign.Stretch && BI.isNull(item.height)) {
            var top = o.innerVgap + o.vgap + o.tgap + this._optimiseItemTgap(item) + this._optimiseItemVgap(item),
                bottom = o.innerVgap + o.vgap + o.bgap + this._optimiseItemBgap(item) + this._optimiseItemVgap(item);
-            var gap = (top + bottom) > 0 && (top + bottom) < 1 ? ((top + bottom) * 100).toFixed(1) + "%" : (top + bottom) / BI.pixRatio + BI.pixUnit;
+            var gap = (top + bottom) > 0 && (top + bottom) < 1 ? ((top + bottom) * 100).toFixed(1) + "%" : BI.pixFormat(top + bottom);
            w.element.css("height", "calc(100% - " + gap + ")");
        }
        return w;
--- a/src/widget/date/calendar/popup.month.js
+++ b/src/widget/date/calendar/popup.month.js
@ -67,7 +67,7 @@ BI.MonthPopup = BI.inherit(BI.Widget, {
                    whiteSpace: "nowrap",
                    once: false,
                    forceSelected: true,
-                    height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT - 1,
+                    height: BI.pixFormat(BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, 1),
                    width: 30,
                    value: td,
                    text: td,
--- a/src/widget/dynamicdate/dynamicdate.combo.js
+++ b/src/widget/dynamicdate/dynamicdate.combo.js
@ -50,13 +50,13 @@ BI.DynamicDateCombo = BI.inherit(BI.Single, {
                    el: {
                        type: "bi.horizontal_fill",
                        columnSize: [this.constants.iconWidth, "fill"],
-                        height: opts.height - border,
+                        height: BI.pixFormat(opts.height, border),
                        items: [{
                            el: {
                                type: "bi.icon_button",
                                cls: "bi-trigger-icon-button date-change-h-font",
-                                width: opts.height - border,
-                                height: opts.height - border,
+                                width: BI.pixFormat(opts.height, border),
+                                height: BI.pixFormat(opts.height, border),
                                ref: function () {
                                    self.changeIcon = this;
                                }
@ -69,8 +69,8 @@ BI.DynamicDateCombo = BI.inherit(BI.Single, {
                            format: opts.format,
                            allowEdit: opts.allowEdit,
                            watermark: opts.watermark,
-                            iconWidth: opts.height - border,
-                            height: opts.height - border,
+                            iconWidth: BI.pixFormat(opts.height, border),
+                            height: BI.pixFormat(opts.height, border),
                            value: opts.value,
                            ref: function () {
                                self.trigger = this;
--- a/src/widget/dynamicdate/dynamicdate.param.item.js
+++ b/src/widget/dynamicdate/dynamicdate.param.item.js
@ -21,7 +21,7 @@ BI.DynamicDateParamItem = BI.inherit(BI.Widget, {
                el: {
                    type: "bi.sign_editor",
                    cls: "bi-border bi-focus-shadow bi-border-radius",
-                    height: BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT - 2,
+                    height: BI.pixFormat(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 2),
                    validationChecker: function (v) {
                        return BI.isNaturalNumber(v);
                    },
--- a/src/widget/dynamicdate/dynamicdate.popup.js
+++ b/src/widget/dynamicdate/dynamicdate.popup.js
@ -26,7 +26,7 @@ BI.DynamicDatePopup = BI.inherit(BI.Widget, {
                        cls: "bi-high-light bi-split-top",
                        shadow: true,
                        text: BI.i18nText("BI-Basic_Clear"),
-                        textHeight: BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT - 1,
+                        textHeight: BI.pixFormat(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 1),
                        listeners: [{
                            eventName: BI.TextButton.EVENT_CHANGE,
                            action: function () {
@ -37,7 +37,7 @@ BI.DynamicDatePopup = BI.inherit(BI.Widget, {
                        type: "bi.text_button",
                        cls: "bi-split-left bi-split-right bi-high-light bi-split-top",
                        shadow: true,
-                        textHeight: BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT - 1,
+                        textHeight: BI.pixFormat(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 1),
                        text: BI.i18nText("BI-Multi_Date_Today"),
                        disabled: this._checkTodayValid(),
                        ref: function () {
@ -52,7 +52,7 @@ BI.DynamicDatePopup = BI.inherit(BI.Widget, {
                    }, {
                        type: "bi.text_button",
                        cls: "bi-high-light bi-split-top",
-                        textHeight: BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT - 1,
+                        textHeight: BI.pixFormat(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 1),
                        shadow: true,
                        text: BI.i18nText("BI-Basic_OK"),
                        listeners: [{
--- a/src/widget/dynamicdatetime/dynamicdatetime.combo.js
+++ b/src/widget/dynamicdatetime/dynamicdatetime.combo.js
@ -50,13 +50,13 @@ BI.DynamicDateTimeCombo = BI.inherit(BI.Single, {
                    el: {
                        type: "bi.horizontal_fill",
                        columnSize: [this.constants.iconWidth, "fill"],
-                        height: opts.height - border,
+                        height: BI.pixFormat(opts.height, border),
                        items: [{
                            el: {
                                type: "bi.icon_button",
                                cls: "bi-trigger-icon-button date-change-h-font",
                                width: this.constants.iconWidth,
-                                height: opts.height - border,
+                                height: BI.pixFormat(opts.height, border),
                                ref: function () {
                                    self.changeIcon = this;
                                }
@ -70,7 +70,7 @@ BI.DynamicDateTimeCombo = BI.inherit(BI.Single, {
                            watermark: opts.watermark,
                            format: opts.format,
                            iconWidth: this.constants.iconWidth,
-                            height: opts.height - border,
+                            height: BI.pixFormat(opts.height, border),
                            value: opts.value,
                            ref: function () {
                                self.trigger = this;
--- a/src/widget/dynamicdatetime/dynamicdatetime.popup.js
+++ b/src/widget/dynamicdatetime/dynamicdatetime.popup.js
@ -25,7 +25,7 @@ BI.DynamicDateTimePopup = BI.inherit(BI.Widget, {
                    items: [[{
                        type: "bi.text_button",
                        cls: "bi-high-light bi-split-top",
-                        textHeight: BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT - 1,
+                        textHeight: BI.pixFormat(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 1),
                        shadow: true,
                        text: BI.i18nText("BI-Basic_Clear"),
                        listeners: [{
@ -37,7 +37,7 @@ BI.DynamicDateTimePopup = BI.inherit(BI.Widget, {
                    }, {
                        type: "bi.text_button",
                        cls: "bi-split-left bi-split-right bi-high-light bi-split-top",
-                        textHeight: BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT - 1,
+                        textHeight: BI.pixFormat(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 1),
                        shadow: true,
                        text: BI.i18nText("BI-Multi_Date_Today"),
                        disabled: this._checkTodayValid(),
@ -53,7 +53,7 @@ BI.DynamicDateTimePopup = BI.inherit(BI.Widget, {
                    }, {
                        type: "bi.text_button",
                        cls: "bi-high-light bi-split-top",
-                        textHeight: BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT - 1,
+                        textHeight: BI.pixFormat(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 1),
                        shadow: true,
                        text: BI.i18nText("BI-Basic_OK"),
                        listeners: [{
--- a/src/widget/editor/editor.search.js
+++ b/src/widget/editor/editor.search.js
@ -15,13 +15,12 @@ BI.SearchEditor = BI.inherit(BI.Widget, {
        });
    },
    _init: function () {
-        this.options.height -= this.options.simple ? 1 : 2;
        BI.SearchEditor.superclass._init.apply(this, arguments);
        var self = this, o = this.options;
        this.editor = BI.createWidget(o.el, {
            type: "bi.editor",
            simple: o.simple,
-            height: o.height,
+            height: BI.pixFormat(o.height, o.simple ? 1 : 2),
            watermark: o.watermark,
            allowBlank: true,
            hgap: 1,
@ -45,6 +44,7 @@ BI.SearchEditor = BI.inherit(BI.Widget, {
        });
        BI.createWidget({
            element: this,
+            height: BI.pixFormat(o.height, o.simple ? 1 : 2),
            type: "bi.htape",
            items: [
                {
--- a/src/widget/editor/editor.text.js
+++ b/src/widget/editor/editor.text.js
@ -26,15 +26,11 @@ BI.TextEditor = BI.inherit(BI.Widget, {
    render: function () {
        var self = this, o = this.options;
        var border = o.simple ? 1 : 2;
-        if (BI.isNumber(o.height)) {
-            this.element.css({ height: o.height - border });
-        }
-        if (BI.isNumber(o.width)) {
-            this.element.css({ width: o.width - border });
-        }
        this.editor = BI.createWidget({
            type: "bi.editor",
            element: this,
+            width: BI.pixFormat(o.width, border),
+            height: BI.pixFormat(o.height, border),
            simple: o.simple,
            hgap: o.hgap,
            vgap: o.vgap,
--- a/src/widget/intervalslider/intervalslider.js
+++ b/src/widget/intervalslider/intervalslider.js
@ -60,8 +60,8 @@ BI.IntervalSlider = BI.inherit(BI.Single, {
            cls: "slider-editor-button",
            text: this.options.unit,
            allowBlank: false,
-            width: c.EDITOR_WIDTH - 2,
-            height: c.EDITOR_HEIGHT - 2,
+            width: BI.pixFormat(c.EDITOR_WIDTH, 2),
+            height: BI.pixFormat(c.EDITOR_HEIGHT, 2),
            validationChecker: function (v) {
                return self._checkValidation(v);
            }
@ -88,8 +88,8 @@ BI.IntervalSlider = BI.inherit(BI.Single, {
            cls: "slider-editor-button",
            text: this.options.unit,
            allowBlank: false,
-            width: c.EDITOR_WIDTH - 2,
-            height: c.EDITOR_HEIGHT - 2,
+            width: BI.pixFormat(c.EDITOR_WIDTH, 2),
+            height: BI.pixFormat(c.EDITOR_HEIGHT, 2),
            validationChecker: function (v) {
                return self._checkValidation(v);
            }
--- a/src/widget/multilayerselecttree/multilayerselecttree.combo.js
+++ b/src/widget/multilayerselecttree/multilayerselecttree.combo.js
@ -21,13 +21,6 @@ BI.MultiLayerSelectTreeCombo = BI.inherit(BI.Widget, {
        });
    },

-    _init: function () {
-        var o = this.options;
-        BI.isNumeric(o.width) && (o.width -= 2);
-        BI.isNumeric(o.height) && (o.height -= 2);
-        BI.MultiLayerSelectTreeCombo.superclass._init.apply(this, arguments);
-    },
-
    render: function () {
        var self = this, o = this.options;

@ -38,6 +31,8 @@ BI.MultiLayerSelectTreeCombo = BI.inherit(BI.Widget, {
        if (o.allowEdit) {
            return {
                type: "bi.absolute",
+                width: BI.pixFormat(o.width, 2),
+                height: BI.pixFormat(o.height, 2),
                cls,
                items: [
                    {
@ -59,7 +54,7 @@ BI.MultiLayerSelectTreeCombo = BI.inherit(BI.Widget, {
                },
                text: o.text,
                defaultText: o.defaultText,
-                height: o.height,
+                height: BI.pixFormat(o.height, 2),
                items: o.items,
                value: o.value,
                tipType: o.tipType,
@ -73,6 +68,8 @@ BI.MultiLayerSelectTreeCombo = BI.inherit(BI.Widget, {
        var self = this, o = this.options;
        return {
            type: "bi.combo",
+            width: BI.pixFormat(o.width, 2),
+            height: BI.pixFormat(o.height, 2),
            container: o.container,
            destroyWhenHide: o.destroyWhenHide,
            adjustLength: 2,
@ -136,8 +133,7 @@ BI.MultiLayerSelectTreeCombo = BI.inherit(BI.Widget, {
                itemsCreator: o.itemsCreator,
                valueFormatter: o.valueFormatter,
                watermark: o.watermark,
-                // height: o.height - (o.simple ? 1 : 2),
-                height: o.height,
+                height: BI.pixFormat(o.height, 2),
                text: o.text,
                defaultText: o.defaultText,
                value: o.value,
@ -213,8 +209,8 @@ BI.MultiLayerSelectTreeCombo = BI.inherit(BI.Widget, {
            ref: function (_ref) {
                self.triggerBtn = _ref;
            },
-            width: o.height,
-            height: o.height,
+            width: BI.pixFormat(o.height, 2),
+            height: BI.pixFormat(o.height, 2),
            listeners: [
                {
                    eventName: BI.TriggerIconButton.EVENT_CHANGE,
--- a/src/widget/multilayerselecttree/multilayerselecttree.popup.js
+++ b/src/widget/multilayerselecttree/multilayerselecttree.popup.js
@ -56,7 +56,7 @@ BI.MultiLayerSelectTreePopup = BI.inherit(BI.Widget, {
            self.fireEvent(BI.MultiLayerSelectTreePopup.EVENT_CHANGE);
        });

-        this.tree.css("min-height", o.minHeight - 10);
+        this.tree.css("min-height", BI.pixFormat(o.minHeight - 10));
    },

    getValue: function () {
--- a/src/widget/multilayersingletree/multilayersingletree.combo.js
+++ b/src/widget/multilayersingletree/multilayersingletree.combo.js
@ -23,13 +23,6 @@ BI.MultiLayerSingleTreeCombo = BI.inherit(BI.Widget, {
        });
    },

-    _init: function () {
-        var o = this.options;
-        BI.isNumeric(o.width) && (o.width -= 2);
-        BI.isNumeric(o.height) && (o.height -= 2);
-        BI.MultiLayerSingleTreeCombo.superclass._init.apply(this, arguments);
-    },
-
    render: function () {
        var self = this, o = this.options;

@ -40,6 +33,8 @@ BI.MultiLayerSingleTreeCombo = BI.inherit(BI.Widget, {
        if (o.allowEdit) {
            return {
                type: "bi.absolute",
+                width: BI.pixFormat(o.width, 2),
+                height: BI.pixFormat(o.height, 2),
                cls,
                items: [
                    {
@ -61,7 +56,7 @@ BI.MultiLayerSingleTreeCombo = BI.inherit(BI.Widget, {
                },
                text: o.text,
                defaultText: o.defaultText,
-                height: o.height,
+                height: BI.pixFormat(o.height, 2),
                items: o.items,
                value: o.value,
                tipType: o.tipType,
@ -136,7 +131,7 @@ BI.MultiLayerSingleTreeCombo = BI.inherit(BI.Widget, {
                items: o.items,
                itemsCreator: o.itemsCreator,
                valueFormatter: o.valueFormatter,
-                height: o.height,
+                height: BI.pixFormat(o.height, 2),
                text: o.text,
                defaultText: o.defaultText,
                value: o.value,
@ -210,8 +205,8 @@ BI.MultiLayerSingleTreeCombo = BI.inherit(BI.Widget, {
            ref: function (_ref) {
                self.triggerBtn = _ref;
            },
-            width: o.height,
-            height: o.height,
+            width: BI.pixFormat(o.height, 2),
+            height: BI.pixFormat(o.height, 2),
            listeners: [
                {
                    eventName: BI.TriggerIconButton.EVENT_CHANGE,
--- a/src/widget/multilayersingletree/multilayersingletree.popup.js
+++ b/src/widget/multilayersingletree/multilayersingletree.popup.js
@ -55,7 +55,7 @@ BI.MultiLayerSingleTreePopup = BI.inherit(BI.Widget, {
            self.fireEvent(BI.MultiLayerSingleTreePopup.EVENT_CHANGE);
        });

-        this.tree.css("min-height", o.minHeight - 10);
+        this.tree.css("min-height", BI.pixFormat(o.minHeight - 10));
    },

    getValue: function () {
--- a/src/widget/multiselect/multiselect.combo.js
+++ b/src/widget/multiselect/multiselect.combo.js
@ -45,7 +45,7 @@ BI.MultiSelectCombo = BI.inherit(BI.Single, {
        this.trigger = BI.createWidget({
            type: "bi.multi_select_trigger",
            allowEdit: o.allowEdit,
-            height: o.height - (o.simple ? 1 : 2),
+            height: BI.pixFormat(o.height, o.simple ? 1 : 2),
            text: o.text,
            defaultText: o.defaultText,
            masker: {
--- a/src/widget/multiselect/multiselect.combo.nobar.js
+++ b/src/widget/multiselect/multiselect.combo.nobar.js
@ -41,7 +41,7 @@ BI.MultiSelectNoBarCombo = BI.inherit(BI.Single, {

        this.trigger = BI.createWidget({
            type: "bi.multi_select_trigger",
-            height: o.height - (o.simple ? 1 : 2),
+            height: BI.pixFormat(o.height, o.simple ? 1 : 2),
            text: o.text,
            defaultText: o.defaultText,
            masker: {
--- a/src/widget/multiselect/multiselect.insert.combo.js
+++ b/src/widget/multiselect/multiselect.insert.combo.js
@ -40,7 +40,7 @@ BI.MultiSelectInsertCombo = BI.inherit(BI.Single, {
        this.trigger = BI.createWidget({
            type: "bi.multi_select_insert_trigger",
            allowEdit: o.allowEdit,
-            height: o.height - (o.simple ? 1 : 2),
+            height: BI.pixFormat(o.height, o.simple ? 1 : 2),
            text: o.text,
            watermark: o.watermark,
            defaultText: o.defaultText,
--- a/src/widget/multiselect/multiselect.insert.combo.nobar.js
+++ b/src/widget/multiselect/multiselect.insert.combo.nobar.js
@ -41,7 +41,7 @@ BI.MultiSelectInsertNoBarCombo = BI.inherit(BI.Single, {

        this.trigger = BI.createWidget({
            type: "bi.multi_select_insert_trigger",
-            height: o.height - (o.simple ? 1 : 2),
+            height: BI.pixFormat(o.height, o.simple ? 1 : 2),
            text: o.text,
            // adapter: this.popup,
            masker: {
--- a/src/widget/multiselect/multiselect.loader.nobar.js
+++ b/src/widget/multiselect/multiselect.loader.nobar.js
@ -173,7 +173,7 @@ BI.MultiSelectNoBarLoader = BI.inherit(BI.Widget, {
    },

    resetHeight: function (h) {
-        this.button_group.element.css({ "max-height": h / BI.pixRatio + BI.pixUnit });
+        this.button_group.element.css({ "max-height": BI.pixFormat(h) });
    },

    resetWidth: function () {
--- a/src/widget/multitree/multi.tree.combo.js
+++ b/src/widget/multitree/multi.tree.combo.js
@ -27,7 +27,7 @@ BI.MultiTreeCombo = BI.inherit(BI.Single, {
        this.trigger = BI.createWidget({
            type: "bi.multi_select_trigger",
            allowEdit: o.allowEdit,
-            height: o.height - (o.simple ? 1 : 2),
+            height: BI.pixFormat(o.height, o.simple ? 1 : 2),
            valueFormatter: o.valueFormatter,
            text: o.text,
            defaultText: o.defaultText,
--- a/src/widget/multitree/multi.tree.insert.combo.js
+++ b/src/widget/multitree/multi.tree.insert.combo.js
@ -28,7 +28,7 @@ BI.MultiTreeInsertCombo = BI.inherit(BI.Single, {
        this.trigger = BI.createWidget({
            type: "bi.multi_select_trigger",
            allowEdit: o.allowEdit,
-            height: o.height - (o.simple ? 1 : 2),
+            height: BI.pixFormat(o.height, o.simple ? 1 : 2),
            valueFormatter: o.valueFormatter,
            text: o.text,
            defaultText: o.defaultText,
--- a/src/widget/multitree/multi.tree.list.combo.js
+++ b/src/widget/multitree/multi.tree.list.combo.js
@ -32,7 +32,7 @@ BI.MultiTreeListCombo = BI.inherit(BI.Single, {
            text: o.text,
            defaultText: o.defaultText,
            watermark: o.watermark,
-            height: o.height - (o.simple ? 1 : 2),
+            height: BI.pixFormat(o.height, o.simple ? 1 : 2),
            valueFormatter: o.valueFormatter,
            masker: {
                offset: {
--- a/src/widget/numbereditor/number.editor.js
+++ b/src/widget/numbereditor/number.editor.js
@ -27,7 +27,7 @@ BI.NumberEditor = BI.inherit(BI.Widget, {
        var self = this, o = this.options;
        this.editor = BI.createWidget({
            type: "bi.sign_editor",
-            height: o.height - 2,
+            height: BI.pixFormat(o.height, 2),
            simple: o.simple,
            allowBlank: o.allowBlank,
            value: o.valueFormatter(o.value),
@ -87,7 +87,7 @@ BI.NumberEditor = BI.inherit(BI.Widget, {
        });
        BI.createWidget({
            type: "bi.htape",
-            height: o.height - 2,
+            height: BI.pixFormat(o.height, 2),
            element: this,
            items: [this.editor, {
                el: {
--- a/src/widget/numberinterval/numberinterval.js
+++ b/src/widget/numberinterval/numberinterval.js
@ -36,7 +36,7 @@ BI.NumberInterval = BI.inherit(BI.Single, {
        BI.NumberInterval.superclass._init.apply(this, arguments);
        this.smallEditor = BI.createWidget({
            type: "bi.number_interval_single_editor",
-            height: o.height - (o.simple ? 1 : 2),
+            height: BI.pixFormat(o.height, o.simple ? 1 : 2),
            watermark: o.watermark,
            allowBlank: o.allowBlank,
            value: o.min,
@ -61,7 +61,7 @@ BI.NumberInterval = BI.inherit(BI.Single, {
        this.smallTip = BI.createWidget({
            type: "bi.label",
            text: o.numTip,
-            height: o.height - (o.simple ? 1 : 2),
+            height: BI.pixFormat(o.height, o.simple ? 1 : 2),
            invisible: true
        });
        BI.createWidget({
@ -76,7 +76,7 @@ BI.NumberInterval = BI.inherit(BI.Single, {

        this.bigEditor = BI.createWidget({
            type: "bi.number_interval_single_editor",
-            height: o.height - (o.simple ? 1 : 2),
+            height: BI.pixFormat(o.height, o.simple ? 1 : 2),
            watermark: o.watermark,
            allowBlank: o.allowBlank,
            value: o.max,
@ -99,7 +99,7 @@ BI.NumberInterval = BI.inherit(BI.Single, {
        this.bigTip = BI.createWidget({
            type: "bi.label",
            text: o.numTip,
-            height: o.height - (o.simple ? 1 : 2),
+            height: BI.pixFormat(o.height, o.simple ? 1 : 2),
            invisible: true
        });
        BI.createWidget({
@ -114,7 +114,8 @@ BI.NumberInterval = BI.inherit(BI.Single, {
        this.smallCombo = BI.createWidget({
            type: "bi.icon_combo",
            cls: "number-interval-small-combo" + (o.simple ? "" : " bi-border-top bi-border-bottom bi-border-right bi-border-corner-right-radius"),
-            height: o.height - (o.simple ? 0 : 2),
+            height: BI.pixFormat(o.height, o.simple ? 0 : 2),
+            width: BI.pixFormat(c.width, c.border),
            items: [{
                text: "(" + BI.i18nText("BI-Less_Than") + ")",
                iconCls: "less-font",
@ -133,7 +134,8 @@ BI.NumberInterval = BI.inherit(BI.Single, {
        this.bigCombo = BI.createWidget({
            type: "bi.icon_combo",
            cls: "number-interval-big-combo" + (o.simple ? "" : " bi-border-top bi-border-bottom bi-border-left bi-border-corner-left-radius"),
-            height: o.height - (o.simple ? 0 : 2),
+            height: BI.pixFormat(o.height, o.simple ? 0 : 2),
+            width: BI.pixFormat(c.width, c.border),
            items: [{
                text: "(" + BI.i18nText("BI-Less_Than") + ")",
                iconCls: "less-font",
@ -152,71 +154,83 @@ BI.NumberInterval = BI.inherit(BI.Single, {
        this.label = BI.createWidget({
            type: "bi.label",
            text: BI.i18nText("BI-Basic_Value"),
-            textHeight: o.height - (o.simple ? 0 : c.border * 2),
-            width: c.width - (o.simple ? 0 : c.border * 2),
-            height: o.height - (o.simple ? 0 : c.border * 2),
+            textHeight: o.height,
+            // width: BI.pixFormat(o.width, o.simple ? 0 : c.border * 2),
+            hgap: 5,
+            height: o.height,
            level: "warning",
            tipType: "warning"
        });
        this.left = BI.createWidget({
-            type: "bi.htape",
+            type: "bi.horizontal_fill",
+            columnSize: ["fill", ""],
            items: [{
                el: self.smallEditor
            }, {
                el: self.smallCombo,
-                width: c.width - c.border
            }]

        });
        this.right = BI.createWidget({
-            type: "bi.htape",
+            type: "bi.horizontal_fill",
+            columnSize: ["", "fill"],
            items: [{
                el: self.bigCombo,
-                width: c.width - c.border
            }, {
                el: self.bigEditor,
                // BI-23883 间距考虑边框
-                lgap: 1
+                // lgap: 1
            }]
        });

-
-        BI.createWidget({
-            element: self,
-            type: "bi.center",
-            hgap: 15,
-            height: o.height,
-            items: [
-                {
-                    type: "bi.absolute",
-                    items: [{
-                        el: self.left,
-                        left: -15,
-                        right: 0,
-                        top: 0,
-                        bottom: 0
-                    }]
-                }, {
-                    type: "bi.absolute",
-                    items: [{
-                        el: self.right,
-                        left: 0,
-                        right: -15,
-                        top: 0,
-                        bottom: 0
-                    }]
-                }
-            ]
-        });
-
        BI.createWidget({
            element: self,
-            type: "bi.horizontal_auto",
-            items: [
-                self.label
-            ]
+            type: "bi.horizontal_fill",
+            columnSize: ["fill", "", "fill"],
+            items: [{
+                el: self.left
+            }, {
+                el: self.label
+            }, {
+                el: self.right
+            }]
        });

+        // BI.createWidget({
+        //     element: self,
+        //     type: "bi.horizontal_auto",
+        //     items: [
+        //         self.label
+        //     ]
+        // });
+
+        // BI.createWidget({
+        //     element: self,
+        //     type: "bi.center",
+        //     hgap: 15,
+        //     height: o.height,
+        //     items: [
+        //         {
+        //             type: "bi.absolute",
+        //             items: [{
+        //                 el: self.left,
+        //                 left: -15,
+        //                 right: 0,
+        //                 top: 0,
+        //                 bottom: 0
+        //             }]
+        //         }, {
+        //             type: "bi.absolute",
+        //             items: [{
+        //                 el: self.right,
+        //                 left: 0,
+        //                 right: -15,
+        //                 top: 0,
+        //                 bottom: 0
+        //             }]
+        //         }
+        //     ]
+        // });

        self._setValidEvent(self.bigEditor, c.bigEditor);
        self._setValidEvent(self.smallEditor, c.smallEditor);
--- a/src/widget/searchmultitextvaluecombo/multitextvalue.combo.search.js
+++ b/src/widget/searchmultitextvaluecombo/multitextvalue.combo.search.js
@ -35,7 +35,7 @@ BI.SearchMultiTextValueCombo = BI.inherit(BI.Single, {
        this.trigger = BI.createWidget({
            type: "bi.search_multi_select_trigger",
            text: o.text,
-            height: o.height - (o.simple ? 1 : 2),
+            height: BI.pixFormat(o.height, o.simple ? 1 : 2),
            // adapter: this.popup,
            masker: {
                offset: {
--- a/src/widget/selecttree/selecttree.combo.js
+++ b/src/widget/selecttree/selecttree.combo.js
@ -17,14 +17,12 @@ BI.SelectTreeCombo = BI.inherit(BI.Widget, {

    _init: function () {
        var self = this, o = this.options;
-        o.height -= 2;
-        BI.isNumeric(o.width) && (o.width -= 2);
        BI.SelectTreeCombo.superclass._init.apply(this, arguments);

        this.trigger = BI.createWidget({
            type: "bi.single_tree_trigger",
            text: o.text,
-            height: o.height,
+            height: BI.pixFormat(o.height, 2),
            items: o.items,
            value: o.value,
            allowClear: o.allowClear,
@ -43,6 +41,8 @@ BI.SelectTreeCombo = BI.inherit(BI.Widget, {

        this.combo = BI.createWidget({
            type: "bi.combo",
+            width: BI.pixFormat(o.width, 2),
+            height: BI.pixFormat(o.height, 2),
            container: o.container,
            element: this,
            adjustLength: 2,
--- a/src/widget/singleselect/singleselect.combo.js
+++ b/src/widget/singleselect/singleselect.combo.js
@ -31,7 +31,7 @@ BI.SingleSelectCombo = BI.inherit(BI.Single, {

        this.trigger = BI.createWidget({
            type: "bi.single_select_trigger",
-            height: o.height - (o.simple ? 1 : 2),
+            height: BI.pixFormat(o.height, o.simple ? 1 : 2),
            // adapter: this.popup,
            allowNoSelect: o.allowNoSelect,
            allowEdit: o.allowEdit,
--- a/src/widget/singleselect/singleselect.insert.combo.js
+++ b/src/widget/singleselect/singleselect.insert.combo.js
@ -32,7 +32,7 @@ BI.SingleSelectInsertCombo = BI.inherit(BI.Single, {
        this.trigger = BI.createWidget({
            type: "bi.single_select_trigger",
            watermark: o.watermark,
-            height: o.height - (o.simple ? 1 : 2),
+            height: BI.pixFormat(o.height, o.simple ? 1 : 2),
            allowNoSelect: o.allowNoSelect,
            allowEdit: o.allowEdit,
            // adapter: this.popup,
--- a/src/widget/singleselect/singleselect.list.js
+++ b/src/widget/singleselect/singleselect.list.js
@ -120,7 +120,7 @@ BI.SingleSelectList = BI.inherit(BI.Widget, {

    resetHeight: function (h) {
        this.list.resetHeight ? this.list.resetHeight(h) :
-            this.list.element.css({"max-height": (h - (this.options.allowNoSelect ? this._constants.itemHeight : 0)) / BI.pixRatio + BI.pixUnit});
+            this.list.element.css({"max-height": BI.pixFormat(h - (this.options.allowNoSelect ? this._constants.itemHeight : 0))});
    },

    setNotSelectedValue: function () {
--- a/src/widget/singleslider/singleslider.js
+++ b/src/widget/singleslider/singleslider.js
@ -91,8 +91,8 @@ BI.SingleSlider = BI.inherit(BI.Single, {
            type: "bi.sign_text_editor",
            cls: "slider-editor-button",
            text: o.unit,
-            width: c.EDITOR_WIDTH - 2,
-            height: c.EDITOR_HEIGHT - 2,
+            width: BI.pixFormat(c.EDITOR_WIDTH, 2),
+            height: BI.pixFormat(c.EDITOR_HEIGHT, 2),
            allowBlank: false,
            textAlign: "center",
            validationChecker: function (v) {
--- a/src/widget/singleslider/singleslider.label.js
+++ b/src/widget/singleslider/singleslider.label.js
@ -90,7 +90,7 @@ BI.SingleSliderLabel = BI.inherit(BI.Single, {
        this.label = BI.createWidget({
            type: "bi.label",
            height: c.HEIGHT,
-            width: c.EDITOR_WIDTH - 2
+            width: BI.pixFormat(c.EDITOR_WIDTH, 2)
        });

        this._setVisible(false);
--- a/src/widget/singletree/singletree.combo.js
+++ b/src/widget/singletree/singletree.combo.js
@ -18,15 +18,13 @@ BI.SingleTreeCombo = BI.inherit(BI.Widget, {

    _init: function () {
        var self = this, o = this.options;
-        o.height -= 2;
-        BI.isNumeric(o.width) && (o.width -= 2);
        BI.SingleTreeCombo.superclass._init.apply(this, arguments);

        this.trigger = BI.createWidget(BI.extend({
            type: "bi.single_tree_trigger",
            text: o.text,
            defaultText: o.defaultText,
-            height: o.height,
+            height: BI.pixFormat(o.height, 2),
            items: o.items,
            value: o.value,
            allowClear: o.allowClear,
@ -45,6 +43,8 @@ BI.SingleTreeCombo = BI.inherit(BI.Widget, {

        this.combo = BI.createWidget({
            type: "bi.combo",
+            width: BI.pixFormat(o.width, 2),
+            height: BI.pixFormat(o.height, 2),
            container: o.container,
            element: this,
            adjustLength: 2,
--- a/src/widget/textvaluedownlistcombo/combo.textvaluedownlist.js
+++ b/src/widget/textvaluedownlistcombo/combo.textvaluedownlist.js
@ -12,8 +12,6 @@ BI.TextValueDownListCombo = BI.inherit(BI.Widget, {

    _init: function () {
        var self = this, o = this.options;
-        o.height -= 2;
-        BI.isNumeric(o.width) && (o.width -= 2);
        BI.TextValueDownListCombo.superclass._init.apply(this, arguments);
        this._createValueMap();

@ -24,7 +22,7 @@ BI.TextValueDownListCombo = BI.inherit(BI.Widget, {
        this.trigger = BI.createWidget({
            type: "bi.down_list_select_text_trigger",
            cls: "text-value-down-list-trigger",
-            height: o.height,
+            height: BI.pixFormat(o.height, 2),
            items: o.items,
            text: o.text,
            value: value
@ -35,7 +33,8 @@ BI.TextValueDownListCombo = BI.inherit(BI.Widget, {
            element: this,
            chooseType: BI.Selection.Single,
            adjustLength: 2,
-            height: o.height,
+            width: BI.pixFormat(o.width, 2),
+            height: BI.pixFormat(o.height, 2),
            el: this.trigger,
            value: BI.isNull(value) ? [] : [value],
            items: BI.deepClone(o.items)
--- a/src/widget/time/time.combo.js
+++ b/src/widget/time/time.combo.js
@ -72,10 +72,10 @@
                        el: {
                            type: "bi.horizontal_fill",
                            columnSize: ["fill", this.constants.iconWidth],
-                            height: opts.height - 2,
+                            height: BI.pixFormat(opts.height, 2),
                            items: [{
                                type: "bi.time_trigger",
-                                height: opts.height - 2,
+                                height: BI.pixFormat(opts.height, 2),
                                allowEdit: opts.allowEdit,
                                watermark: opts.watermark,
                                format: opts.format,
--- a/src/widget/timeinterval/dateinterval.js
+++ b/src/widget/timeinterval/dateinterval.js
@ -19,50 +19,32 @@ BI.DateInterval = BI.inherit(BI.Single, {
            supportDynamic: true,
        });
    },
-    _init: function () {
+    
+    render: function () {
        var self = this, o = this.options;
-        BI.DateInterval.superclass._init.apply(this, arguments);
-
        o.value = o.value || {};
        this.left = this._createCombo(o.value.start, o.watermark?.start);
        this.right = this._createCombo(o.value.end, o.watermark?.end);
-        this.label = BI.createWidget({
-            type: "bi.label",
-            height: o.height,
-            width: this.constants.width,
-            text: "-"
-        });
-        BI.createWidget({
-            element: self,
-            type: "bi.center",
-            height: o.height,
+
+        return {
+            type: "bi.horizontal_fill",
+            columnSize: ["fill", "", "fill"],
            items: [{
-                type: "bi.absolute",
-                items: [{
-                    el: self.left,
-                    left: this.constants.offset,
-                    right: this.constants.width / 2,
-                    top: 0,
-                    bottom: 0
-                }]
+                el: self.left
            }, {
-                type: "bi.absolute",
-                items: [{
-                    el: self.right,
-                    left: this.constants.width / 2,
-                    right: this.constants.offset,
-                    top: 0,
-                    bottom: 0
-                }]
+                el: {
+                    type: "bi.label",
+                    height: o.height,
+                    hgap: 5,
+                    text: "-",
+                    ref: function (_ref) {
+                        self.label = _ref;
+                    }
+                }
+            }, {
+                el: self.right
            }]
-        });
-        BI.createWidget({
-            type: "bi.horizontal_auto",
-            element: this,
-            items: [
-                self.label
-            ]
-        });
+        };
    },

    _createCombo: function (v, watermark) {
--- a/src/widget/timeinterval/timeinterval.js
+++ b/src/widget/timeinterval/timeinterval.js
@ -19,50 +19,32 @@ BI.TimeInterval = BI.inherit(BI.Single, {
            supportDynamic: true
        });
    },
-    _init: function () {
-        var self = this, o = this.options;
-        BI.TimeInterval.superclass._init.apply(this, arguments);

+    render: function () {
+        var self = this, o = this.options;
        o.value = o.value || {};
        this.left = this._createCombo(o.value.start, o.watermark?.start);
        this.right = this._createCombo(o.value.end, o.watermark?.end);
-        this.label = BI.createWidget({
-            type: "bi.label",
-            height: o.height,
-            width: this.constants.width,
-            text: "-"
-        });
-        BI.createWidget({
-            element: self,
-            type: "bi.center",
-            height: o.height,
+
+        return {
+            type: "bi.horizontal_fill",
+            columnSize: ["fill", "", "fill"],
            items: [{
-                type: "bi.absolute",
-                items: [{
-                    el: self.left,
-                    left: this.constants.offset,
-                    right: this.constants.width / 2,
-                    top: 0,
-                    bottom: 0
-                }]
+                el: self.left
+            }, {
+                el: {
+                    type: "bi.label",
+                    height: o.height,
+                    hgap: 5,
+                    text: "-",
+                    ref: function (_ref) {
+                        self.label = _ref;
+                    }
+                }
            }, {
-                type: "bi.absolute",
-                items: [{
-                    el: self.right,
-                    left: this.constants.width / 2,
-                    right: this.constants.offset,
-                    top: 0,
-                    bottom: 0
-                }]
+                el: self.right
            }]
-        });
-        BI.createWidget({
-            type: "bi.horizontal_auto",
-            element: this,
-            items: [
-                self.label
-            ]
-        });
+        };
    },

    _createCombo: function (v, watermark) {
--- a/src/widget/timeinterval/timeperiods.js
+++ b/src/widget/timeinterval/timeperiods.js
@ -16,66 +16,35 @@
            extraCls: "bi-time-interval",
            value: {}
        },
+        
        render: function () {
            var self = this, o = this.options;

            return {
-                type: "bi.absolute",
-                height: o.height,
+                type: "bi.horizontal_fill",
+                columnSize: ["fill", "", "fill"],
                items: [{
-                    el: {
-                        type: "bi.horizontal_auto",
-                        items: [{
-                            type: "bi.label",
-                            height: o.height,
-                            width: this.constants.width,
-                            text: "-",
-                            ref: function (_ref) {
-                                self.label = _ref;
-                            }
-                        }]
-                    },
-                    top: 0,
-                    left: 0,
-                    right: 0,
-                    bottom: 0
+                    el: BI.extend({
+                        ref: function (_ref) {
+                            self.left = _ref;
+                        }
+                    }, this._createCombo(o.value.start, o.watermark?.start))
                }, {
                    el: {
-                        type: "bi.center",
+                        type: "bi.label",
                        height: o.height,
-                        hgap: this.constants.hgap,
-                        items: [{
-                            type: "bi.absolute",
-                            items: [{
-                                el: BI.extend({
-                                    ref: function (_ref) {
-                                        self.left = _ref;
-                                    }
-                                }, this._createCombo(o.value.start, o.watermark?.start)),
-                                left: this.constants.offset,
-                                right: 0,
-                                top: 0,
-                                bottom: 0,
-                            }]
-                        }, {
-                            type: "bi.absolute",
-                            items: [{
-                                el: BI.extend({
-                                    ref: function (_ref) {
-                                        self.right = _ref;
-                                    }
-                                }, this._createCombo(o.value.end, o.watermark?.end)),
-                                left: 0,
-                                right: this.constants.offset,
-                                top: 0,
-                                bottom: 0,
-                            }]
-                        }]
-                    },
-                    top: 0,
-                    left: 0,
-                    right: 0,
-                    bottom: 0
+                        hgap: 5,
+                        text: "-",
+                        ref: function (_ref) {
+                            self.label = _ref;
+                        }
+                    }
+                }, {
+                    el: BI.extend({
+                        ref: function (_ref) {
+                            self.right = _ref;
+                        }
+                    }, this._createCombo(o.value.end, o.watermark?.end))
                }]
            };
        },
--- a/src/widget/year/combo.year.js
+++ b/src/widget/year/combo.year.js
@ -23,7 +23,7 @@ BI.DynamicYearCombo = BI.inherit(BI.Widget, {
            simple: o.simple,
            min: o.minDate,
            max: o.maxDate,
-            height: o.height - border,
+            height: BI.pixFormat(o.height, border),
            value: o.value || "",
            watermark: o.watermark
        });
@ -132,7 +132,8 @@ BI.DynamicYearCombo = BI.inherit(BI.Widget, {
            element: this,
            items: [{
                el: {
-                    type: "bi.htape",
+                    type: "bi.horizontal_fill",
+                    columnSize: ["", "fill"],
                    cls: (o.simple ? "bi-border-bottom" : "bi-border bi-border-radius") + " bi-focus-shadow",
                    ref: function () {
                        self.comboWrapper = this;
@ -142,12 +143,11 @@ BI.DynamicYearCombo = BI.inherit(BI.Widget, {
                            type: "bi.icon_button",
                            cls: "bi-trigger-icon-button",
                            width: this._const.iconWidth,
-                            height: o.height - border,
+                            height: BI.pixFormat(o.height, border),
                            ref: function () {
                                self.changeIcon = this;
                            }
                        },
-                        width: this._const.iconWidth
                    }, this.combo]
                },
                top: 0,
@ -167,12 +167,8 @@ BI.DynamicYearCombo = BI.inherit(BI.Widget, {
        switch (type) {
            case BI.DynamicYearCombo.Dynamic:
                this.changeIcon.setVisible(true);
-                this.comboWrapper.attr("items")[0].width = this.options.height - this.options.simple ? 1 : 2;
-                this.comboWrapper.resize();
                break;
            default:
-                this.comboWrapper.attr("items")[0].width = 0;
-                this.comboWrapper.resize();
                this.changeIcon.setVisible(false);
                break;
        }
--- a/src/widget/year/popup.year.js
+++ b/src/widget/year/popup.year.js
@ -32,7 +32,7 @@ BI.DynamicYearPopup = BI.inherit(BI.Widget, {
                    items: [[{
                        type: "bi.text_button",
                        cls: "bi-split-top bi-high-light",
-                        textHeight: BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT - 1,
+                        textHeight: BI.pixFormat(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 1),
                        shadow: true,
                        text: BI.i18nText("BI-Basic_Clear"),
                        listeners: [{
@ -43,7 +43,7 @@ BI.DynamicYearPopup = BI.inherit(BI.Widget, {
                        }]
                    }, {
                        type: "bi.text_button",
-                        textHeight: BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT - 1,
+                        textHeight: BI.pixFormat(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 1),
                        cls: "bi-split-left bi-split-right bi-high-light bi-split-top",
                        shadow: true,
                        text: BI.i18nText("BI-Basic_Current_Year"),
@ -60,7 +60,7 @@ BI.DynamicYearPopup = BI.inherit(BI.Widget, {
                    }, {
                        type: "bi.text_button",
                        cls: "bi-split-top bi-high-light",
-                        textHeight: BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT - 1,
+                        textHeight: BI.pixFormat(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 1),
                        shadow: true,
                        text: BI.i18nText("BI-Basic_OK"),
                        listeners: [{
--- a/src/widget/yearinterval/yearinterval.js
+++ b/src/widget/yearinterval/yearinterval.js
@ -26,41 +26,25 @@ BI.YearInterval = BI.inherit(BI.Single, {
        this.left = this._createCombo(o.value.start, o.watermark?.start);
        this.right = this._createCombo(o.value.end, o.watermark?.end);

-        return [{
-            type: "bi.center",
-            hgap: 15,
-            height: o.height,
+        return {
+            type: "bi.horizontal_fill",
+            columnSize: ["fill", "", "fill"],
            items: [{
-                type: "bi.absolute",
-                items: [{
-                    el: self.left,
-                    left: this.constants.offset,
-                    right: 0,
-                    top: 0,
-                    bottom: 0
-                }]
+                el: self.left
            }, {
-                type: "bi.absolute",
-                items: [{
-                    el: self.right,
-                    left: 0,
-                    right: this.constants.offset,
-                    top: 0,
-                    bottom: 0
-                }]
-            }]
-        }, {
-            type: "bi.horizontal_auto",
-            items: [{
-                type: "bi.label",
-                height: o.height,
-                width: this.constants.width,
-                text: "-",
-                ref: function (_ref) {
-                    self.label = _ref;
+                el: {
+                    type: "bi.label",
+                    height: o.height,
+                    hgap: 5,
+                    text: "-",
+                    ref: function (_ref) {
+                        self.label = _ref;
+                    }
                }
+            }, {
+                el: self.right
            }]
-        }]
+        };
    },

    _createCombo: function (v, watermark) {
--- a/src/widget/yearmonth/card.static.yearmonth.js
+++ b/src/widget/yearmonth/card.static.yearmonth.js
@ -19,7 +19,7 @@ BI.StaticYearMonthCard = BI.inherit(BI.Widget, {
                    whiteSpace: "nowrap",
                    once: false,
                    forceSelected: true,
-                    height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT - 1,
+                    height: BI.pixFormat(BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, 1),
                    width: 38,
                    value: td,
                    text: td,
--- a/src/widget/yearmonth/combo.yearmonth.js
+++ b/src/widget/yearmonth/combo.yearmonth.js
@ -22,7 +22,7 @@ BI.DynamicYearMonthCombo = BI.inherit(BI.Single, {
            simple: o.simple,
            min: o.minDate,
            max: o.maxDate,
-            height: o.height - border,
+            height: BI.pixFormat(o.height, border),
            value: o.value || "",
            watermark: o.watermark,
        });
@ -132,7 +132,8 @@ BI.DynamicYearMonthCombo = BI.inherit(BI.Single, {
            element: this,
            items: [{
                el: {
-                    type: "bi.htape",
+                    type: "bi.horizontal_fill",
+                    columnSize: ["", "fill"],
                    cls: (o.simple ? "bi-border-bottom" : "bi-border bi-border-radius") + " bi-focus-shadow",
                    ref: function () {
                        self.comboWrapper = this;
@ -141,13 +142,12 @@ BI.DynamicYearMonthCombo = BI.inherit(BI.Single, {
                        el: {
                            type: "bi.icon_button",
                            cls: "bi-trigger-icon-button",
-                            width: o.height - border,
-                            height: o.height - border,
+                            width: BI.pixFormat(o.height, border),
+                            height: BI.pixFormat(o.height, border),
                            ref: function () {
                                self.changeIcon = this;
                            }
-                        },
-                        width: o.height - border
+                        }
                    }, this.combo]
                },
                top: 0,
@ -167,12 +167,8 @@ BI.DynamicYearMonthCombo = BI.inherit(BI.Single, {
        switch (type) {
            case BI.DynamicYearMonthCombo.Dynamic:
                this.changeIcon.setVisible(true);
-                this.comboWrapper.attr("items")[0].width = this.options.height - this.options.simple ? 1 : 2;
-                this.comboWrapper.resize();
                break;
            default:
-                this.comboWrapper.attr("items")[0].width = 0;
-                this.comboWrapper.resize();
                this.changeIcon.setVisible(false);
                break;
        }
--- a/src/widget/yearmonth/popup.yearmonth.js
+++ b/src/widget/yearmonth/popup.yearmonth.js
@ -32,7 +32,7 @@ BI.DynamicYearMonthPopup = BI.inherit(BI.Widget, {
                    items: [[{
                        type: "bi.text_button",
                        cls: "bi-split-top bi-high-light",
-                        textHeight: BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT - 1,
+                        textHeight: BI.pixFormat(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 1),
                        shadow: true,
                        text: BI.i18nText("BI-Basic_Clear"),
                        listeners: [{
@ -44,7 +44,7 @@ BI.DynamicYearMonthPopup = BI.inherit(BI.Widget, {
                    }, {
                        type: "bi.text_button",
                        cls: "bi-split-left bi-split-right bi-high-light bi-split-top",
-                        textHeight: BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT - 1,
+                        textHeight: BI.pixFormat(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 1),
                        shadow: true,
                        text: BI.i18nText("BI-Basic_Current_Month"),
                        disabled: this._checkTodayValid(),
@ -60,7 +60,7 @@ BI.DynamicYearMonthPopup = BI.inherit(BI.Widget, {
                    }, {
                        type: "bi.text_button",
                        cls: "bi-split-top bi-high-light",
-                        textHeight: BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT - 1,
+                        textHeight: BI.pixFormat(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 1),
                        shadow: true,
                        text: BI.i18nText("BI-Basic_OK"),
                        listeners: [{
--- a/src/widget/yearmonthinterval/yearmonthinterval.js
+++ b/src/widget/yearmonthinterval/yearmonthinterval.js
@ -14,51 +14,31 @@ BI.YearMonthInterval = BI.inherit(BI.Single, {
        height: 24
    },

-    _init: function () {
+    render: function () {
        var self = this, o = this.options;
-        BI.YearMonthInterval.superclass._init.apply(this, arguments);
-
        o.value = o.value || {};
        this.left = this._createCombo(o.value.start, o.watermark?.start);
        this.right = this._createCombo(o.value.end, o.watermark?.end);
-        this.label = BI.createWidget({
-            type: "bi.label",
-            height: o.height,
-            width: this.constants.width,
-            text: "-"
-        });
-        BI.createWidget({
-            element: self,
-            type: "bi.center",
-            hgap: 15,
-            height: o.height,
+        
+        return {
+            type: "bi.horizontal_fill",
+            columnSize: ["fill", "", "fill"],
            items: [{
-                type: "bi.absolute",
-                items: [{
-                    el: self.left,
-                    left: this.constants.offset,
-                    right: 0,
-                    top: 0,
-                    bottom: 0
-                }]
+                el: self.left
            }, {
-                type: "bi.absolute",
-                items: [{
-                    el: self.right,
-                    left: 0,
-                    right: this.constants.offset,
-                    top: 0,
-                    bottom: 0
-                }]
+                el: {
+                    type: "bi.label",
+                    height: o.height,
+                    hgap: 5,
+                    text: "-",
+                    ref: function (_ref) {
+                        self.label = _ref;
+                    }
+                }
+            }, {
+                el: self.right
            }]
-        });
-        BI.createWidget({
-            type: "bi.horizontal_auto",
-            element: this,
-            items: [
-                self.label
-            ]
-        });
+        };
    },

    _createCombo: function (v, watermark) {
--- a/src/widget/yearquarter/combo.yearquarter.js
+++ b/src/widget/yearquarter/combo.yearquarter.js
@ -25,7 +25,7 @@ BI.DynamicYearQuarterCombo = BI.inherit(BI.Widget, {
            simple: o.simple,
            min: o.minDate,
            max: o.maxDate,
-            height: o.height - border,
+            height: BI.pixFormat(o.height, border),
            value: o.value || "",
            watermark: o.watermark,
        });
@ -135,7 +135,8 @@ BI.DynamicYearQuarterCombo = BI.inherit(BI.Widget, {
            element: this,
            items: [{
                el: {
-                    type: "bi.htape",
+                    type: "bi.horizontal_fill",
+                    columnSize: ["", "fill"],
                    cls: (o.simple ? "bi-border-bottom" : "bi-border bi-border-radius") + " bi-focus-shadow",
                    ref: function () {
                        self.comboWrapper = this;
@ -145,12 +146,11 @@ BI.DynamicYearQuarterCombo = BI.inherit(BI.Widget, {
                            type: "bi.icon_button",
                            cls: "bi-trigger-icon-button",
                            width: this._consts.iconWidth,
-                            height: o.height - border,
+                            height: BI.pixFormat(o.height, border),
                            ref: function () {
                                self.changeIcon = this;
                            }
-                        },
-                        width: this._consts.iconWidth
+                        }
                    }, this.combo]
                },
                top: 0,
@ -169,13 +169,9 @@ BI.DynamicYearQuarterCombo = BI.inherit(BI.Widget, {
        }
        switch (type) {
            case BI.DynamicYearQuarterCombo.Dynamic:
-                this.changeIcon.setVisible(true);
-                this.comboWrapper.attr("items")[0].width = this.options.height - this.options.simple ? 1 : 2;
                this.comboWrapper.resize();
                break;
            default:
-                this.comboWrapper.attr("items")[0].width = 0;
-                this.comboWrapper.resize();
                this.changeIcon.setVisible(false);
                break;
        }
--- a/src/widget/yearquarter/popup.yearquarter.js
+++ b/src/widget/yearquarter/popup.yearquarter.js
@ -27,7 +27,7 @@ BI.DynamicYearQuarterPopup = BI.inherit(BI.Widget, {
                        type: "bi.text_button",
                        cls: "bi-split-top bi-high-light",
                        shadow: true,
-                        textHeight: BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT - 1,
+                        textHeight: BI.pixFormat(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 1),
                        text: BI.i18nText("BI-Basic_Clear"),
                        listeners: [{
                            eventName: BI.TextButton.EVENT_CHANGE,
@ -38,7 +38,7 @@ BI.DynamicYearQuarterPopup = BI.inherit(BI.Widget, {
                    }, {
                        type: "bi.text_button",
                        cls: "bi-split-left bi-split-right bi-high-light bi-split-top",
-                        textHeight: BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT - 1,
+                        textHeight: BI.pixFormat(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 1),
                        shadow: true,
                        text: BI.i18nText("BI-Basic_Current_Quarter"),
                        disabled: this._checkTodayValid(),
@ -55,7 +55,7 @@ BI.DynamicYearQuarterPopup = BI.inherit(BI.Widget, {
                        type: "bi.text_button",
                        cls: "bi-split-top bi-high-light",
                        shadow: true,
-                        textHeight: BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT - 1,
+                        textHeight: BI.pixFormat(BI.SIZE_CONSANTS.TOOL_BAR_HEIGHT, 1),
                        text: BI.i18nText("BI-Basic_OK"),
                        listeners: [{
                            eventName: BI.TextButton.EVENT_CHANGE,
--- a/src/widget/yearquarterinterval/yearquarterinterval.js
+++ b/src/widget/yearquarterinterval/yearquarterinterval.js
@ -26,41 +26,26 @@ BI.YearQuarterInterval = BI.inherit(BI.Single, {
        this.left = this._createCombo(o.value.start, o.watermark?.start);
        this.right = this._createCombo(o.value.end, o.watermark?.end);

-        return [{
-            type: "bi.center",
-            hgap: 15,
-            height: o.height,
+
+        return {
+            type: "bi.horizontal_fill",
+            columnSize: ["fill", "", "fill"],
            items: [{
-                type: "bi.absolute",
-                items: [{
-                    el: self.left,
-                    left: this.constants.offset,
-                    right: 0,
-                    top: 0,
-                    bottom: 0
-                }]
+                el: self.left
            }, {
-                type: "bi.absolute",
-                items: [{
-                    el: self.right,
-                    left: 0,
-                    right: this.constants.offset,
-                    top: 0,
-                    bottom: 0
-                }]
-            }]
-        }, {
-            type: "bi.horizontal_auto",
-            items: [{
-                type: "bi.label",
-                height: o.height,
-                width: this.constants.width,
-                text: "-",
-                ref: function (_ref) {
-                    self.label = _ref;
+                el: {
+                    type: "bi.label",
+                    height: o.height,
+                    hgap: 5,
+                    text: "-",
+                    ref: function (_ref) {
+                        self.label = _ref;
+                    }
                }
+            }, {
+                el: self.right
            }]
-        }]
+        };
    },

    _createCombo: function (v, watermark) {
--- a/template/index.html
+++ b/template/index.html
@ -1,4 +1,3 @@
-<!DOCTYPE html>
 <html lang="en">

 <head>