I am currently working on creating a dialog box with a text area using material UI. Unfortunately, when I input a significant amount of text, the dialog box ends up extending beyond the screen, making it impossible to scroll down to access the buttons.
<div>
<TextField hintText="Project Name" floatingLabelText="Pitch Name"/> <div/>
<TextField hintText="Pitch Name" floatingLabelText="Pitch Name"/> <div/>
<TextField hintText="Shortcut" floatingLabelText="Shortcut"/> <div/>
<TextField hintText="Subject" floatingLabelText="Subject"/> <div/>
<TextField
fullWidth='true'
multiLine="true"
hintText="Pitch"
floatingLabelText="Pitch"
/> <div/>
</div>
Initially, this is how it looks:
If there is an extensive amount of text, the layout gets disrupted:
https://i.stack.imgur.com/d2SOE.png
When the dialog extends beyond the bottom of the page, scrolling becomes difficult, especially to reach the buttons. Is there a configuration or setting that can help address this issue?
Do you have any suggestions on how to resolve this problem?