I am trying to get the scroll height of the multi-line text field. I have used office UI fabric react TextField.
I have tried to get the TextField scroll height in the ComponentDidUpdate() /jQuery, but it always returns scrollHeight as 0.
AutoHeightAdjust property works fine when I am entering input in the TextField. But, when I am trying to show the data from the state in the TextField it does not fit to the size of the content. That's where the real problem is.
This is my tag:
<TextField disabled={this.isDisabled} autoAdjustHeight value={this.state.Action} onChanged={this.handleAction} multiline resizable={true} rows={6}/>
Related
I have MUI Slider which uses custom ValueLabelComponent. ValueLabelComponent in my case it's a MUI Tooltip which wraps children (slider knobs) and it appears when you hoover over the knobs. Tooltip has property title where I pass MUI TextField (normally you just pass value in there). The idea is to change min max value not only with slider knobs but by typing in TextField.
At the moment I able to render TextField inside the Tooltip, but I can't type in it.
Here is CodeSandBox - https://codesandbox.io/s/rangeslider-demo-material-ui-forked-fuif4l?file=/demo.tsx
I'm making a sidebar for my project and I'm using div transitions to give a smooth effect on collapse. However I have Material-ui (v4.12.3) TextField inside, and during the transition of opening the div, the height of the text field changes to 496px. Adding maxHeight style doesn't prevent a limit and once you interact with the field, it returns to normal (16px). Has anyone had this interactions with transition and mui text fields before?
I am using the helpertext of the mui textfield component to display validation errors. Unfortunately the helpertext is increasing the width of the textfield. I am using the "fullWidth" attribute.
If there is no error, no helper text is shown (image 1). If input validation fails, error is shown but the the textfield should remain the same size (image 2).
I had the same problem with GWT MaterialTextBox. I managed to solve my problem by setting a fixed width (e.g. 300px) for the text box.
I'm working with Material UI to create the UI for the web application I'm designing. After placing some TextFields within a Grid using theme spacing, I'm having troubles with the inner text of the the TextField no longer being centered within its container. As soon as I remove the theme spacing from the style applied to the TextField, there's no problem anymore.
Here's a codesandbox that showcases the problem: https://codesandbox.io/s/nice-sound-vjsm4?file=/src/App.js
Does anyone know how to recenter the text within its TextField? Thanks.
Try Moving the textInput class to Grid instead of TextField.
<Grid item xs={6} className={classes.textInput}>
<TextField
id="project-client"
label="Client"
variant="outlined"
/>
</Grid>
If you inspect and see the HTML, it seems that Material-UI doesn't apply that class to the label but only to the input. Moving the class at grid level should apply it to the entire container (label and input)
This is what I currently have:
<TooltipHost
content="Enter claim name in a way to be understandable for all parties."
directionalHint={DirectionalHint.rightCenter}
calloutProps={{ calloutMaxWidth: 100}}
>
<TextField />
</TooltipHost>
The tooltip is shown on hover. I want it to be exclusively shown on focus.
Is there a way to do it without controlling it with state?
The host automatically adds it to hover and focus. If you want focus only you'd need to use the Tooltip control itself and manually show it on focus.