Open hzmsrv opened 5 years ago
my solution is to add a status 'undefined' for horizontalAlign and verticalAlign
could it add in the code??
`position: function () { if (!this.__shouldPosition) { // needs to be centered, and it is done after constrain. return; } this._discoverInfo(); if (!this.horizontalAlign === 'undefined') { this.style.position = 'fixed'; } // Need border-box for margin/padding. this.sizingTarget.style.boxSizing = 'border-box'; // Set to 0, 0 in order to discover any offset caused by parent stacking // contexts. this.style.left = '0px'; this.style.top = '0px';
var rect = this.getBoundingClientRect();
var positionRect = this.__getNormalizedRect(this.positionTarget);
var fitRect = this.__getNormalizedRect(this.fitInto);
var margin = this._fitInfo.margin;
// Consider the margin as part of the size for position calculations.
var size = {
width: rect.width + margin.left + margin.right,
height: rect.height + margin.top + margin.bottom
};
var position = this.__getPosition(
this._localeHorizontalAlign,
this.verticalAlign,
size,
rect,
positionRect,
fitRect);
var left = position.left + margin.left;
var top = position.top + margin.top;
// We first limit right/bottom within fitInto respecting the margin,
// then use those values to limit top/left.
var right = Math.min(fitRect.right - margin.right, left + rect.width);
var bottom = Math.min(fitRect.bottom - margin.bottom, top + rect.height);
// Keep left/top within fitInto respecting the margin.
left = Math.max(
fitRect.left + margin.left,
Math.min(left, right - this._fitInfo.sizedBy.minWidth));
top = Math.max(
fitRect.top + margin.top,
Math.min(top, bottom - this._fitInfo.sizedBy.minHeight));
// Use right/bottom to set maxWidth/maxHeight, and respect
// minWidth/minHeight.
// this.sizingTarget.style.maxWidth = // Math.max(right - left, this._fitInfo.sizedBy.minWidth) + 'px'; // this.sizingTarget.style.maxHeight = // Math.max(bottom - top, this._fitInfo.sizedBy.minHeight) + 'px';
// Remove the offset caused by any stacking context.
if (!this.horizontalAlign === 'undefined') {
this.style.left = (left - rect.left) + 'px';
this.sizingTarget.style.maxWidth =
Math.max(right - left, this._fitInfo.sizedBy.minWidth) + 'px';
}
if (this.verticalAlign === 'undefined') {
this.sizingTarget.style.maxHeight =
Math.max(bottom - top, this._fitInfo.sizedBy.minHeight) + 'px';
this.style.top = (top - rect.top) + 'px';
}else{
this.style.top = '';
}
},`
when we using <"iron-dropdown"> we would like to change its position to toggle under the button. but nothing we could do for it. <"iron-fit-behavior"> will recover any style we set