search

Zecat / paper-number-input

A Material Design input field for numric values with step up/down buttons (Polymer 2)
https://www.webcomponents.org/element/Zecat/paper-relative-integer-input
6 stars 3 forks source link

Left aligned label #1

Open nicolasr75 opened 6 years ago

nicolasr75 commented 6 years ago

Thanks for sharing this component! I used to have hundreds of this type in desktop applications and was badly missing them from day one when I started to port desktop applications to web applications with Polymer.

Just this one issue: I would like to have the label left aligned so it behaves the same as paper-input. Is there any way to do it with the current version? Alternatively, would it be possible to add an option for it?

I tried to set text-align: left but that also affects the text in the input field which should stay centered (or maybe should be configurable to choose between center and right alignment).

Zecat commented 6 years ago

Hi, this element uses <paper-input-container>, so you should be able to use css mixins and variables described in its doc https://www.webcomponents.org/element/PolymerElements/paper-input/elements/paper-input-container.

This should do the trick:

paper-number-input {
  --paper-input-container-label: {
    text-align: left;
  };
}