JavaScript UI Libraries & Blazor Components Suite – Smart UI Forums Text Boxes & Inputs smart-number-input: how to set width of component?

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #102094
    davout
    Member

    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

    #102096
    yavordashew
    Member

    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/

    #102605
    Giovanni Zomer
    Participant

    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)?

    #102607
    Yavor Dashev
    Participant

    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/

    #102613
    Giovanni Zomer
    Participant

    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!

     

     

     

     

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.