3.1.0 • Published 3 years ago

@polymer/iron-fit-behavior v3.1.0

Weekly downloads
24,514
License
BSD-3-Clause
Repository
github
Last release
3 years ago

Build status

Demo and API docs

Polymer.IronFitBehavior

Polymer.IronFitBehavior fits an element in another element using max-height and max-width, and optionally centers it in the window or another element.

The element will only be sized and/or positioned if it has not already been sized and/or positioned by CSS.

CSS propertiesAction
position setElement is not centered horizontally or vertically
top or bottom setElement is not vertically centered
left or right setElement is not horizontally centered
max-height setElement respects max-height
max-width setElement respects max-width

Polymer.IronFitBehavior can position an element into another element using verticalAlign and horizontalAlign. This will override the element's css position.

  <div class="container">
    <iron-fit-impl vertical-align="top" horizontal-align="auto">
      Positioned into the container
    </iron-fit-impl>
  </div>

Use noOverlap to position the element around another element without overlapping it.

  <div class="container">
    <iron-fit-impl no-overlap vertical-align="auto" horizontal-align="auto">
      Positioned around the container
    </iron-fit-impl>
  </div>