search

PolymerElements / paper-toggle-button

A Material Design toggle button
https://webcomponents.org/element/PolymerElements/paper-toggle-button
27 stars 39 forks source link

paper-toggle-button cannot be centered #85

Open marto55555 opened 8 years ago

marto55555 commented 8 years ago

paper-toggle-button can no longer be centered in the middle of the page. In the past, I used this code, but it no longer works: `

`

bicknellr commented 8 years ago

repro here. Looks like we need display: inline-flex;.

bicknellr commented 8 years ago

.. or the display: inline-block; in :host needs to be moved after the mixins overriding it, but I'm not sure what the flex is being used for - it might be needed.

tonlie commented 8 years ago

the reason seems to be the absolute left/right margin for the toggle-container implemented in 182ecb2a786d01212115bb3729409e49298b3c70. Setting it to auto (as in margin: 4px auto;) will center it properly.

I'm not sure, why the left/right margin has to be set to 1px, maybe @notwaldorf can help?

Also, if your paper-toggle-button does not need a label, make sure to set the distance between the button and the label to 0px by applying the the --paper-toggle-button-label-spacing mixin, otherwise the button will be slightly offset to the left!