hey i wanted to know how can i delete the border of the text area of mui with tailwind if possible and how can i add dir auto to this also
i want is to display the direction According to the language
return (
<div className="flex items-center">
<Textarea
minRows={4}
maxRows={4}
componentsProps={{
textarea: {
maxLength: 300,
dir: "auto",
},
}}
name="body"
onChange={formik.handleChange}
onBlur={formik.handleBlur}
value={formik.values.body}
error={formik.touched.body && Boolean(formik.errors.body)}
placeholder="Text (optional)"
required
variant="soft"
disabled={!loggedIn}
className=" flex-1 m-2 p-2 bg-gray-50 !outline-none !border-none rounded-md resize-none "
endDecorator={
<Typography className="text-xs ml-auto text-gray-500">
{300 - formik.values.body.length} character(s)
</Typography>
}
/>
</div>
);
};```
Related
I have a page on my application where there is a DataGrid and some textField to update data from the DataGrid.
The DataGrid has checkbox on each row.
The problem is:
If I just enter the page and select any checkbox and then click on any TextField, the TextField's label goes up and quickly down to default position. I need to click again on the TextField to type anything I want. This problem does not happend if I dont click on any checkbox.
My front end
<div className="main">
<Typography>You are at Update Page</Typography>
<p></p>
<div style={{ height: 300, width: '100%', backgroundColor: '' }}>
<DataGrid
rows={rows}
columns={columns}
pageSize={5}
checkboxSelection
onSelectionModelChange={(itemIdselected) => window.localStorage.setItem('id', itemIdselected)}
>
</DataGrid>
</div>
<p></p>
<Typography>First select which user you want to update</Typography>
<p></p>
<form onSubmit={handleSubmit(OnSubmitUpdate)}>
<TextField label='New name' {...register('Name')} color="primary" style={{ width: '10%' }}></TextField>
<p className="errors">{errors.Name?.message}</p>
<TextField label='New email' {...register('Email')} color="primary" style={{ width: '10%' }}></TextField>
<p className="errors">{errors.Email?.message}</p>
<TextField label='New password' type={'password'} {...register('Password')} color="primary" style={{ width: '10%' }}></TextField>
<p className="errors">{errors.Password?.message}</p>
<ButtonComponent text="Update" type='submit'></ButtonComponent>
<p></p>
<Link to="/" style={{ textDecoration: 'none' }}><ButtonComponent text="Return"></ButtonComponent></Link>
</form>
</div>
I have a button and a CircularProgress component that are next to each other on the same row. I want to add a little bit of space between them. How can I achieve this? I've been trying using style etc but failing.
<Grid
container
direction="row"
// justify="space-between"
spacing={50}
>
<Button
variant="contained"
color="primary"
size="large"
style={{ marginTop: '1em' }}
// style={{ maxWidth: '108px', minWidth: '108px' }}
onClick={() => {
//code
}}
>
Import Games
</Button>
{showCircularProgress === true ? (
<CircularProgress style={{ marginTop: '1em' }} />
) : (
''
)}
</Grid>;
For that you would need to use marginRight to the direction of you next element
<Grid container direction="row">
<Button
variant="contained"
color="primary"
size="large"
style={{ marginRight: "32px" }}
>
Import Games
</Button>
<CircularProgress style={{ marginTop: "1em" }} />
</Grid>;
You could read more about CSS margin here
Simplified Working Example:
I am creating a navigation menu and part of it is having a Login link and "Try for Free" button on the right part of the webpage. But what is puzzling me is how to get the button aligned to the right of the Login link. Currently it looks like this:
What am I doing wrong?
<Grid item xs={4}>
{/* <Toolbar disableGutters> */}
<Tabs className={classes.tabContainer}>
<Tab className={classes.tab} component={Link} to="/analyze" label="Login" />
</Tabs>
{/* <Typography className={classes.root}>
<Link href="#" onClick={menuOptions}>
Link
</Link>
</Typography> */}
<Button
variant="contained"
color="default"
size="medium"
// style={{ marginTop: '1.1em' }}
// style={{ maxWidth: '108px', minWidth: '108px' }}
onClick={() => {
// handleClickImportPGN();
}}
>
Try for Free
</Button>
{/* </Toolbar> */}
</Grid>;
One of the handiest ways is to use CSS Flexbox
<Grid item style={{ display: "flex" }}>
<Tabs>
<Tab component={Link} label="Login" />
</Tabs>
<Button
variant="contained"
color="default"
size="medium"
// style={{ marginTop: '1.1em' }}
// style={{ maxWidth: '108px', minWidth: '108px' }}
onClick={() => {
// handleClickImportPGN();
}}
>
Try for Free
</Button>
{/* </Toolbar> */}
</Grid>;
But if you want to make use more of Material UI, you could try to have a few more Grid within each of the children elements.
Simplified Working Example:
"Missing form label" accessibility issue in Wave tool when using Table pagination. How do I fix it.
<TablePagination
ref={paginationComponentRef}
ActionsComponent={PaginationActionsComponent}
component='div'
page={page}
rowsPerPageOptions={5, 10, 25]}
rowsPerPage={0}
intl={props.intl}
count={props.count || 0}
onChangePage={props.onChangePage || handleChangePage}
onChangeRowsPerPage={props.onChangeRowsPerPage || handleChangeRowsPerPage}
backIconButtonProps={{
'aria-label': props.intl.formatMessage(messages.prev, props.customTexts),
}}
nextIconButtonProps={{
'aria-label': props.intl.formatMessage(messages.next, props.customTexts),
}}
/>
output rendered html:
<div class="MuiInputBase-root MuiTablePagination-input MuiTablePagination-selectRoot">
<div class="MuiSelect-root MuiSelect-select MuiTablePagination-select MuiSelect-selectMenu MuiInputBase-input" tabindex="0" role="button" aria-haspopup="listbox" aria-labelledby="mui-8736 mui-43" id="mui-43">5</div><input aria-hidden="true" tabindex="-1" class="MuiSelect-nativeInput" value="5"><svg class="MuiSvgIcon-root MuiSelect-icon MuiTablePagination-selectIcon" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 10l5 5 5-5z"></path>
</svg></div>
If you don't want to change the pagination select design then use this
SelectProps={{
inputProps: {
'aria-label': 'rows per page',
'aria-labelledby': 'rowsPage',
},
id: 'rowsPage',
}}
Try to add the below code in your <TablePagination /> tag.
SelectProps={{
inputProps: { 'aria-label': 'rows per page' },
native: true,
}}
I'm using a very simple sample of the material ui Snackbar component, that renders the following HTML
<div class="MuiSnackbar-root-352 MuiSnackbar-anchorOriginBottomLeft-358">
<p class="MuiTypography-root-199 MuiTypography-body2-207 MuiPaper-root-121 MuiPaper-elevation6-129 MuiSnackbarContent-root-373" role="alertdialog" aria-describedby="message-id" direction="up" style="transform: translate(0px, 0px); transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;">
<div class="MuiSnackbarContent-message-374">
<span id="message-id">TunisiaNet created!</span>
</div>
</p>
</div>
for the following code
<Snackbar
anchorOrigin={{
vertical: 'bottom',
horizontal: 'left',
}}
open={this.state.entityGroupAdded}
autoHideDuration={4000}
onClose={this.handleClose}
ContentProps={{
'aria-describedby': 'message-id',
}}
message={<span id="message-id">{this.state.name} created!</span>}
/>
This naturally leads to an HTML specification incompatibility. The issue is that I don't know how to tell the Snackbar to create a div instead of a p element
I get the error:
0.chunk.js:101009 Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>.
in div (created by SnackbarContent)
in p (created by Typography)
in Typography (created by WithStyles(Typography))
in WithStyles(Typography) (created by Paper)
in Paper (created by WithStyles(Paper))
in WithStyles(Paper) (created by SnackbarContent)
in SnackbarContent (created by WithStyles(SnackbarContent))
Might wanna check your Material UI version or any override settings you might have made which includes typography components. I just tested a snackbar with the exact same code and the p tag (which uses typography, this part is causing the error) does not exist as a p tag but a different classname
<div class="MuiSnackbar-root-185 MuiSnackbar-anchorOriginBottomLeft-191">
<div class="MuiTypography-root-313 MuiTypography-body1-322 MuiPaper-root-20 MuiPaper-elevation6-28 MuiSnackbarContent-root-310" role="alertdialog" aria-describedby="message-id" style="transform: translate(0px, 0px); transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;">
<div class="MuiSnackbarContent-message-311">
<span id="message-id">Note archived</span></div>
</div>
For other who is looking for an answer other than something wrong with the overrides, most likely if nothing wrong with your overrides, and even before you check for that. Look into your code if it contain a component that inherit the props of Typography component like DialogContentText and you also have another Typography component or a component that will transfer to <p> tag in HTML as a child of that component.
In the the error above message props will become
<p class="MuiTypography-root-199 MuiTypography-body2-207 MuiPaper-root-121 MuiPaper-elevation6-129 MuiSnackbarContent-root-373" role="alertdialog" aria-describedby="message-id" direction="up" style="transform: translate(0px, 0px); transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;">
<div class="MuiSnackbarContent-message-374">
<span id="message-id">TunisiaNet created!</span>
</div>
</p>
I think this is not showing anymore in the new versions of material. But if you want to fix something like that take a look;
This will give errors
const someFunction= (): JSX.Element => {
return (
<DialogTitle>
Some title
</DialogTitle>
<DialogContentText>
<Typography variant='h5'>
Sometext
<Typography />
</DialogContentText>
<TextField
autoComplete='off'
margin='dense'
variant="outlined"
id='name'
label='email'
type='email'
fullWidth
/>
);
};
this will fix it
const someFunction= (): JSX.Element => {
return (
<DialogTitle>
Some title
</DialogTitle>
<DialogContentText variant='h5'>
Sometext
</DialogContentText>
<TextField
autoComplete='off'
margin='dense'
variant="outlined"
id='name'
label='email'
type='email'
fullWidth
/>
);
};
In this case for example you can use the normal props of Typography with DialogContentText.
Also you can user component='div' as prop of Typography, it could fix it, I didn't test