[material-ui][Text Field] Size & Customization

[ceyxasm]

Summary

I have inputs using which I am filtering content and rendering in a TextField component. The content is however a little big and creates a big TextBox which breaks the layout.

1. Can I set the size of the textbox so that its fixed and the content can be browsed by scrolling?
2. Can I render all the text and highlight the selected text instead of just showing the filtered text?

Examples

I want to create an interface similar to this:

Motivation

• Avoids breaking the site layout because of unpredictable inputs.
• Avoids rerendering the entire text at each new input.

Search keywords: text field, size, customization, rerender

[DiegoAndai]

Hey @ceyxasm, thanks for the question.

You can use the rows prop to set a specific number of rows to the text field or use maxRows to limit it: https://mui.com/material-ui/react-text-field/#multiline. Let me know if this covers your use case.

About highlighting, we don't have that functionality implemented.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@ceyxasm How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

[ceyxasm]

This issue got solved. I ended up using Box component with custom formatting my text.