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)
Related
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?
enter image description here
I need to remove this extra feature from data grid Mui. I've tried the root way also. But it's not working for me.
disableColumnMenu prop passed to DataGrid component will hide column menu icon (3 dots):
<DataGrid
disableColumnMenu
{...other props}
/>
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.
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}/>
How can I create a theme for a dialog box?
I was trying to change the border style of the dialog box but the border style applies 2 times for an inner element and for an outer element. I was expected that the border style applies only to the inner element.
To be clearer, as I cannot add image to my post, it seems that the dialog does not consist only from the center box which is showed while dialog is active. The dialog UI consists from a “background form” which usually is transparent and from a container which overlay over the background form. The last mentioned container contains de graphic representation of the “dialog box”.
My issue is that I can not apply my style only to the container which contains the dialog box but the style applies also to the background form.
How can I apply the border style only to the dialog box container element?
Any additional tips will be highly appreciated.
Thanks.
How are you applying the style? Are you using the theme to apply a style to the Dialog UIID as explained here.
Using setStyle or getStyle on a dialog component would be problematic and would not result in proper styling (you might get away with doing it on getDialogComponent but you should work with the theme).
Notice that to style a dialog you should use Dialog, DialogTitle & DialogBody UIID's and quite a few theme constants.
Thanks Shai,
is clear now.
I’m doing a custom dialog starting from the BlankDialog element provided in designer.
Because I started from BlankDialog I thought that overriding only UIID theme is enough.
I understood the BlankDialog structure wrongly thinking that is a simple empty form because is named "Blank…"
Is clear now that for every new UI object added, I should check if it has any other UI child to be customized together with the parent.
Thanks again.