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

[davout]

With the ‘smart-number-input’ component is there a way to limit the component width?   By default the component is quite wide, and I want to use it to collect a two digit number

[yavordashew]

Hi davout,
Yes you can do that with the following code snippet:

smart-number-input {
    width: 80px;
}

More information about this is also available in the documentation section for the component:
https://www.htmlelements.com/docs/input-css/
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[Giovanni Zomer]

but is there a way to set the width using a property (as in standard html)? otherwise it would be difficult to manage it, as we would like to have one large input and the other small, on the same page; doing it this way seems to request to consider two different styles and this won’t be as easy to manage; is there no way to set the width just for one text-input (or numeric text-input)?

[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/

[Giovanni Zomer]

thanks for your information; unfortunately it could be rather difficult to implement this case, as we build the form dynamically and – at least up to now – we don’t know in advance the max-length and size we need for inputs (as they could be set by the user himself); so we cannot build a style for each possibility as this could be difficult to mantain;
but in the meantime, I found a solution which could be suitable to us, and I’m just testing it;
if I use the template-tag, passing the variable data for size and maxlength

…
var objFormElements=[];
…
(looping through values and creating all the input fields with individual and personalized lengths)

objElement={ dataField:arrDetail[0], controlType:’template’, label:arrDetail[2], template:'<input type=text size=’+arrDetail[3]+’ maxlength=’+arrDetail[4]+’ class=dataInput>’ };

…

objFormElements.push(objElement);
var objForm=new Smart.Form(‘#EDIT’,{ controls: objFormElements });

and it seems it could work (I have to finish the tests, but I’m confident)
thanks for your help!

 

 

 

 

[Author]

Posts