PolymerElements / iron-fit-behavior

Fits an element into another element
17 stars 34 forks source link

could not change any style for child element! #96

Open hzmsrv opened 5 years ago

hzmsrv commented 5 years ago

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

hzmsrv commented 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 = '';
}

},`