search

shakrmedia / petal

A modern, light CSS UI framework by Shakr
https://shakrmedia.github.io/petal
MIT License
128 stars 9 forks source link

Spinner In Inputs #21

Closed Uup115 closed 5 years ago

Uup115 commented 5 years ago

Hello,

I'm having trouble with implementing the spinner inside a textbox. Please, can you share the JavaScript to make this work?

Thanks.

Best Regards

zvuc commented 5 years ago

While petal doesn't provide built-in styles for spinners in inputs, your best bet to implementing this would be wrapping an input with a .spinner together in one div, then overlaying the spinner on top of the input with position: absolute, give some padding-right to the input to compensate for the space spinner takes.

See this example: https://codepen.io/zvuc/pen/rbqGXG

You'll need to write the JS part yourself to toggle between states where spinner is visible and where it's not. (In the example pen it uses the .spinner-active class on input-wrap.)