Textbox UI layout

General
1

Hello,
I am looking out for a textbox layout in the UI. Right now everything is like a text[just a line layout]. Is there something like a textbox with the boundaries to add description to the field. Please help me out here to achieve this.

[original thread by Narayan2627]

2

Hi @narayan2627(narayan2627), I’m not sure what you mean. We support multi-line inputs via the ui schema options if that is what you want, e.g.

{
    type: 'Control',
    scope: '#/properties/mystringprop',
    options: { multi: true }
 }

There is also a way to restrict the input’s length via maxLength: , in the JSON Schema:

{
    type: 'string',
    maxLength: 10
 }

Let me know if you have further questions.

3

[Narayan2627]

4

[Narayan2627]

Thanks for the reply Stefan. Yes this is 50% what I am looking for. And the other 50% is the UI. Do we have a way to implement something like in the attached Image. Or should we do that using custom render?

5

[Narayan2627]

I am looking to implement a box instead line for multi line text. Any Ideas?

6

I see. For the text box to display more than one line it seems that you have to set Material-UI’s rows property accordingly. This is currently only possible with a custom renderer. I think your custom renderer could be very simple and just reuse the existing MaterialTextControl and set the additional prop accordingly. If you like to contribute I think it would also make sense to being able to set the row property via the ui schema options, so no custom renderer would be needed.

7

[Narayan2627]

Sure thanks for the reply. Will try to implement and will get back to you with a result.