Reply To: smart-number-input: how to set width of component?

[Yavor Dashev]

Hi Giovanni Zomer,

The functionality that you need can be achieved in several ways.

One option is to create a class and to apply it to the SmartInput component you want to alter it’s width.
For example:

    <smart-number-input class="large-smart-input" placeholder="Please Enter a Number">
    </smart-number-input>
    <smart-number-input class="small-smart-input" placeholder="Please Enter a Number">
    </smart-number-input>

    <style>
        .small-smart-input {
            --smart-text-box-default-width: 150px;
        }
        .large-smart-input{
            --smart-text-box-default-width: 250px;
        }
    </style>

Or if you want to do it with JavaScript you can do it like so:

        const numberInput = document.querySelectorAll('smart-number-input');
        numberInput[1].style.width = '500px';

or

   const numberInput = document.querySelectorAll('smart-number-input');
        numberInput[1].classList.add('large-smart-input')

Let me know what you think!

Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/