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?
Related
I have a basic create-react-app with Material/MUI text field and button. When I tab from the textfield to the button, it creates an animation on the button where the middle part slightly grows and shrinks. I'm trying to figure out how to get rid of that animation and just show a simple button that has focus. Toggling the options in Chrome debugger hasn't helped me track down where this animation is being created (focus, hover, etc.). In fact, anytime I change any property in the CSS panel it turns the animation off and makes it harder to track down what is causing this.
Thanks.
I have a React App where the user can toggle between different views of the same data structure. When toggling from one view to another, the browser window sometimes automatically scrolls vertically. Instead I am expecting the window to not scroll when possible.
The CodeSandbox here reproduces the issue:
https://codesandbox.io/embed/magical-chebyshev-otlpu?fontsize=14&hidenavigation=1&theme=dark
If you scroll down, then click on "CLICK TO SWITCH VIEW BELOW", you will notice that there's an automatic scroll to the top happening.
I suspect this is an issue with MUI TextField. If I change the MUI TextField to a div, the issue does not show up, so I don't think this is due to React.
I use React and Material-UI. I use huge Popover with the Tooltip behaviour. The goal is to display data when the user hover some links. It's working well but i have a problem about scrolling.
I want to be able to scroll INSIDE the popover when the Mouse is inside it. The default behaviour is to let the user scroll the entire page instead of focus on the popover.
I have set a CodeSansBox to show you.
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}/>
I'm trying to use reactstrap collapse instead of reactjs transition for sliding my div horizontally. because the height of div changes according to the content of that. so I can't use transition. now I need to set a duration for collapse animation but I couldn't find any solution. can anybody help me?