JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Text Boxes & Inputs › smart-number-input: how to set width of component?
Tagged: smart-number-input
- This topic has 4 replies, 2 voices, and was last updated 2 years, 10 months ago by Giovanni Zomer.
-
AuthorPosts
-
July 27, 2021 at 10:03 am #102094davoutMember
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
July 27, 2021 at 1:09 pm #102096yavordashewMemberHi 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/November 30, 2021 at 11:45 am #102605Giovanni ZomerParticipantbut 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)?
November 30, 2021 at 3:29 pm #102607Yavor DashevParticipantHi 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/December 1, 2021 at 10:27 am #102613Giovanni ZomerParticipantthanks 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! -
AuthorPosts
- You must be logged in to reply to this topic.