Setting a width on a Input component doesn't seem to work:
<Input label="Something" width={1} />Renders to:
The code in the DOM looks like:
All the other input components (like "NumericTextBox") have the width property applied on the containing <span>, but for an Input, the containing span has always a width of 200.
Any suggestions on how to set the width of an Input properly?
1 Answer, 1 is accepted
Hello, Pieter,
This can be done using the style property of the component:
https://stackblitz.com/edit/react-7jxctu?file=app/main.jsx
Before we were exposing the width and height props of all components, but as there are many styles that the developer may want to use, we decided to expose the style property of each component.
Regards,
Stefan
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 1
Iron
Iron
Thanks for the answer, this indeed works. Two follow-up questions:
- Is it expected that using a className (instead of style) doesn't work? I see it being applied on the inner tag instead of the surrounding <span>. I rather avoid using inline styling.
- If the width (and other) properties are there, but not doing what a developer expects them to do, shouldn't they be removed/deprecated? It is totally confusing that on some inputs it works, and on others not...
Regarding the additional questions:
1) Is it expected that using a className (instead of style) doesn't work? I see it being applied on the inner tag instead of the surrounding <span>. I rather avoid using inline styling. - Yes, this is expected as we will set the className directly to the input component. For other more complex components, we do set it to the surrounding element as the component has multiple elements. The Input component actually has only the input element, the surrounding span is only added when there is a label, it is not part of the component by default:
https://stackblitz.com/edit/react-ujcxut?file=app/main.jsx
2) If the width (and other) properties are there, but not doing what a developer expects them to do, shouldn't they be removed/deprecated? It is totally confusing that on some inputs it works, and on others not - The input props are extending the native input element props. This is why the width is a valid prop, but in the native input element this property exists but does nothing and we have no control over it: