OLD | NEW |
1 | 1 |
2 <!--- | 2 <!--- |
3 | 3 |
4 This README is automatically generated from the comments in these files: | 4 This README is automatically generated from the comments in these files: |
5 iron-fit-behavior.html | 5 iron-fit-behavior.html |
6 | 6 |
7 Edit those files, and our readme bot will duplicate them over here! | 7 Edit those files, and our readme bot will duplicate them over here! |
8 Edit this file, and the bot will squash your changes :) | 8 Edit this file, and the bot will squash your changes :) |
9 | 9 |
10 The bot does some handling of markdown. Please file a bug if it does the wrong | 10 The bot does some handling of markdown. Please file a bug if it does the wrong |
11 thing! https://github.com/PolymerLabs/tedium/issues | 11 thing! https://github.com/PolymerLabs/tedium/issues |
12 | 12 |
13 --> | 13 --> |
14 | 14 |
15 [![Build status](https://travis-ci.org/PolymerElements/iron-fit-behavior.svg?bra
nch=master)](https://travis-ci.org/PolymerElements/iron-fit-behavior) | 15 [![Build status](https://travis-ci.org/PolymerElements/iron-fit-behavior.svg?bra
nch=master)](https://travis-ci.org/PolymerElements/iron-fit-behavior) |
16 | 16 |
17 _[Demo and API docs](https://elements.polymer-project.org/elements/iron-fit-beha
vior)_ | 17 _[Demo and API docs](https://elements.polymer-project.org/elements/iron-fit-beha
vior)_ |
18 | 18 |
19 | 19 |
20 ##Polymer.IronFitBehavior | 20 ##Polymer.IronFitBehavior |
21 | 21 |
22 Polymer.IronFitBehavior fits an element in another element using `max-height` an
d `max-width`, and | 22 `Polymer.IronFitBehavior` fits an element in another element using `max-height`
and `max-width`, and |
23 optionally centers it in the window or another element. | 23 optionally centers it in the window or another element. |
24 | 24 |
25 The element will only be sized and/or positioned if it has not already been size
d and/or positioned | 25 The element will only be sized and/or positioned if it has not already been size
d and/or positioned |
26 by CSS. | 26 by CSS. |
27 | 27 |
28 | CSS properties | Action | | 28 | CSS properties | Action | |
29 | --- | --- | | 29 | --- | --- | |
30 | `position` set | Element is not centered horizontally or vertically | | 30 | `position` set | Element is not centered horizontally or vertically | |
31 | `top` or `bottom` set | Element is not vertically centered | | 31 | `top` or `bottom` set | Element is not vertically centered | |
32 | `left` or `right` set | Element is not horizontally centered | | 32 | `left` or `right` set | Element is not horizontally centered | |
33 | `max-height` or `height` set | Element respects `max-height` or `height` | | 33 | `max-height` set | Element respects `max-height` | |
34 | `max-width` or `width` set | Element respects `max-width` or `width` | | 34 | `max-width` set | Element respects `max-width` | |
| 35 |
| 36 `Polymer.IronFitBehavior` can position an element into another element using |
| 37 `verticalAlign` and `horizontalAlign`. This will override the element's css posi
tion. |
| 38 |
| 39 ```html |
| 40 <div class="container"> |
| 41 <iron-fit-impl vertical-align="top" horizontal-align="auto"> |
| 42 Positioned into the container |
| 43 </iron-fit-impl> |
| 44 </div> |
| 45 ``` |
| 46 |
| 47 Use `noOverlap` to position the element around another element without overlappi
ng it. |
| 48 |
| 49 ```html |
| 50 <div class="container"> |
| 51 <iron-fit-impl no-overlap vertical-align="auto" horizontal-align="auto"> |
| 52 Positioned around the container |
| 53 </iron-fit-impl> |
| 54 </div> |
| 55 ``` |
35 | 56 |
36 | 57 |
OLD | NEW |