I am relatively new to material UI and I have designed a text field of type search. I would like it to be responsive. But I am failing to render the textfield in screen sizes with width smaller than 423
<Box
sx={{ flexGrow: 1 }}
m={5} pt={5}
display="flex"
justifyContent="flex-end"
alignItems="flex-end"
>
<Grid item sx={{ flexGrow: 1 }} spacing={{ xs: 1, md: 2,lg:2}} columns={{ xs: 2, sm: 2, md: 12 ,lg: 22}} display="flex"
justifyContent="center"
alignItems="center" marginLeft={8} marginRight={1} mt={4} width='100%'>
<SearchIcon style={{ coSelf: "center", margin: "5px" }} />
<TextField
id="standard-search"
label="Search for a company..."
type="search"
variant="standard"
textAlign="center"
fullWidth
/>
</Grid>
<Button onClick={() => setLight((prev) => !prev)} variant="contained" color="primary" sx={{ height: 40 }}>
<SettingsIcon/>
</Button>
</Box>
Any help is appreciated.
Seems your search component is rendered but hiding behind the Stock Market Charting header as it gets longer in smaller screen sizes. If you have it as a fixed position try changing it to relative position, or remove/reduce the text inside it so it gets shorter for a quick test and might reveal the search component.
Related
I am using WebStorm 2022 with React, JavaScript and MUI -- and I have been getting insanely slow performance, that it's become impossible to use.
Autocomplete takes around 6-7 seconds to load, and my CPU usage rockets up to 100% whenever I type anything in my JSX file.
Example code:
function UserInputBox() {
return (
<Box
display="flex"
flexDirection="column"
alignItems="center" p={5} boxShadow={3}
>
<Box
p={5}
sx={{background: "blue", alignItems: "stretch"}}
>
<h1>User Input</h1>
</Box>
<Stack spacing={2}>
<TextField label="Username" />
<TextField label="Age (Years)" />
<Button
variant="contained"
sx={{borderRadius: 28, textTransform: "none"}}
>
Add User
</Button>
</Stack>
</Box>
)
}
export default UserInputBox
In material UI v5 supposedly one can create almost anything with the sx prop, on the list is grid unfortunately I am unable to create what should be a simple grid. To illustrate here is what my grid would look like.
My unsuccessful attempts at using the Box component and sx prop look like this
What am I missing here, how can recreate what I have with the Grid component with the Box/sx combo?
Is it that you want ? Live example sandbox ?
<Box sx={{ placeContent: "center", display: "grid" }}>
<Box sx={{ gridRow: "1", gridColumn: "div 1" }}>
<TextField
name="name"
label="Name"
variant="outlined"
type="text"
margin="dense"
/>
</Box>
<Box sx={{ gridRow: "2", gridColumn: "div 1" }}>
<Autocomplete
disablePortal
id="combo-box-demo"
options={top100Films}
renderInput={(params) => <TextField {...params} label="Movie" />}
/>
</Box>
</Box>
I am using MUI Accordion. In the Accordion details I have multiline textfield component to capture user responses and a button at the bottom for saving the data. Now if the user is keying in multiple lines, the button moves down and then disappears. Accordion details is not adjusting the height dynamically with the increase in the height for textfield component. If the user collapse and expand the accordion again the height readjusts.
How can I adjust the height of the accordion details dynamically as the text field contents grows ?
<AccordionDetails key={"SubCatIDDetails_" + this.props.SubCategoryID} >
{quesSubCategories.map((quesSubCat) => (
<>
<Grid container spacing={2} marginTop={1} marginBottom={1} textAlign={'Left'}>
<Grid item xs={3}>
<Typography> {quesSubCat.question}
{quesSubCat.hint.length > 0 && <HtmlTooltip
title={<Typography color="inherit"><i>{quesSubCat.hint}</i></Typography>}>
<IconButton>
<InfoIcon color="primary" />
</IconButton>
</HtmlTooltip>}
</Typography>
</Grid>
<Grid item xs={3.5}>
<TextField multiline fullWidth label="Response" name="Response" defaultValue={quesSubCat.response || ''} onBlur={(event) => this.props.handler([quesSubCat.quesID, quesSubCat.responseID, event.target.value, event.target.name])} />
</Grid>
<Grid item xs={3}>
<TextField multiline fullWidth label="Notes" name="Notes" onBlur={(event) => this.props.handler([quesSubCat.quesID, quesSubCat.responseID, event.target.value, event.target.name])} />
<NotesDetails Updated={this.props.UpdatingResponse} NoteType="Question" QuestionID={quesSubCat.quesID} ApplicationID={this.props.ApplicationID} userEmail={this.props.userEmail} />
</Grid>
<Grid item xs={2.5}>
<Status currentStatus={quesSubCat.quesStatus} QuesCat={quesSubCat.quesID} ResponseID={quesSubCat.responseID} currentTargetDt={quesSubCat.targetDate} handlerChange={this.HandleStatusChange} />
</Grid>
</Grid>
<Divider style={{ background: '#c4540c' }} />
</>
))}
{this.props.UpdatingResponse && <p style={{ marginLeft: '15px' }}><em>Updating...</em></p>}
<Button style={{ marginTop: '10px', marginBottom: '10px', marginLeft: '10px' }} color="warning" variant="contained" startIcon={<SaveIcon />} onClick={this.props.handlerClick}>Save & Continue</Button>
</AccordionDetails>
I've read about autoFlow propert and gap. They are not working the way I'm using them.
Specifically the Elements appear vertically centered only if I use gap=20, gap values of 19 or 21 align all content at the top.
This is my code:
return (
<Box
display={{ md: "flex" }}
alignItems="center"
minHeight="70vh"
gap={8}
mb={8}
w="full"
>
<Box>
<Grid gap={20}>
<Heading as="h2" fontSize={{ base: "lg", sm: "3xl" }}>
Text
</Heading>
<Form>
...Boxes
</Form>
</Grid>
</Box>
</Box>
);
Sources: https://chakra-ui.com/docs/layout/grid
I have a material-ui card in which it contains image, input field, check-box and a submit button. In which card is displaying onclick on some other option which is not mentioned in the below code. I want to close a card when I click on submit. How can I achieve this?
<Card
className="details-card"
style={{ paddingTop: "0px" }}
color="primary"
>
<CardHeader
style={{
paddingBottom: 0,
paddingTop: 0
}}
title="Image"
/>
<img src="https://unsplash.it/200/?random" />
<CardContent className="details-card-body">
<TextField label="Name" fullWidth />
<Grid container>
<Grid item xs={4}>
<Typography>
New User
<Checkbox
checked={this.state.addNew}
name="addNew"
onChange={this.handleCheckBox("addNew")}
value="new user"
inputProps={{ "aria-label": "Checkbox B" }}
/>
</Typography>
</Grid>
</Grid>
<Button variant="contained" color="primary">
Click to Tag
</Button>
</CardContent>
</Card>
Here below is my code on CodeSandbox
https://codesandbox.io/embed/lppzx48r0m
There are multiple ways to achieve what you want to do
you'll need a flag to conditionally hide or show the card.
For example lets take flag variable in state, and change state variable flag based on submit button and on the basis of this.state.flag you can do
{this.state.flag ?
(<Card
className="details-card"
style={{ paddingTop: "0px" }}
color="primary"
>
//Card content
</Card>)
:
null
}
You can also provide conditional css based on this.state.flag
<Card
className="details-card"
style={{ paddingTop: "0px", display: this.state.flag ? block : 'none'}}
color="primary"
>
//Card content
</Card>
P.S.: The second approach is not recommended because we are rendering element even if it is not needed.