Every time I add content to the MUI Textfield it outputs it without any line breaks.
Is there a better solution to use?
<Stack direction="row" alignItems="start" justifyContent="start" mb={5}>
<TextField
name="Content" placeholder="Content" multiline={true}
value={content}
rows={18}
sx={{width: '100%'}}
onChange={(e) => setContent(e.target.value)}
/>
<div style={{maxWidth:"50%", paddingLeft:"10px"}} dangerouslySetInnerHTML={{__html: generateContent(content)}}></div>
</Stack>
Here's an example:
https://codesandbox.io/s/festive-dewdney-crxls
<Stack direction="row">
<TextField multiline value={state} onChange={handleChange} />
<Box sx={{ whiteSpace: "pre-wrap" }}>{state}</Box>
</Stack>
I used the whiteSpace: "pre-wrap" sx prop on the box where I am previewing the text, and I used the multiline prop on the textfield to make it a textarea input, and it worked.
I think the problem lies in your CSS and not in MUI. Use the white-space CSS property like this:
<div style={{maxWidth:"50%", paddingLeft:"10px", whiteSpace: "pre-wrap"}}...
Read more about pre-wrap and the other values here
If this does not work then there are two similar questions but I doubt you will need them.
Best way to preserve new lines when I post data from a Multi Line Text Field
New line '\n' not recognized inside TextField in React
Related
There is a lot to read here, but there is no other way to explain the issue I have.
I have four files, App.js, Intakes.js, IntakeDetails.js and Sizing.js. I start on the Intakes page where the user is presented with a table of data. The user clicks on a row and is taken to IntakeDetails. In IntakeDetails, there are four MUI tabs, one of which is Sizing.
The user never actually goes to a Sizing page. They only get to IntakeDetails. From IntakeDetails, the user can view, edit, and create data based on what tab they are in. If the user wants to create or update Sizing data, they navigate to the sizing tab and click the edit icon on the row of their choice from the Sizing table. The Dialog then pops up and its TextFields are populated with the data from the row the user clicked.
Sizing.js is 600+ lines long. 211 lines in this file are taken up by the MUI dialog which displays the data from the table row the user has clicked. The dialog is so long because of 19 TextFields. I want to make a short function with a parameter for id, value and label. This way I wont need to have lots of multiline TextFields. All of the TextFields in the Dialog take up 8 lines. With a function, this could be just one or two lines.
I have made a function to shorten the file previously, but it introduces a new problem. If I have a TextField that is populated with the word 'Hello', and I edit it, the Dialog disappears, reappears, and focus is lost on the TextField I edited, but, the change I made is persistent. I can only enter or remove one character at a time before having to click on the TextField again to enter another. I can copy and paste full words and sentences at once, but again the Dialog disappears and comes back.
I can't use .map because my data is not divided into groups or objects. It is all one object and needs to be presented in the dialog in a specific order, which is why they are hardcoded. When I type in a TextField, there is a long delay between the time I press a key on the keyboard and the time the character appears in the TextField. This delay gets longer when I type faster.
The return in IntakeDetails is here:
import Sizing from "./Sizing";
...
return (
<div class="aspectwrapper">
<div class="content">
<Container>
<Paper>
<Box sx={{ width: "100%" }}>
<Box sx={{ borderBottom: 1, borderColor: "divider" }}>
<Tabs value={value} onChange={handleChange}>
<Tab label="Intake Details" {...a11yProps(0)} />
<Tab label="Sizing" {...a11yProps(1)} />
</Tabs>
</Box>
<TabPanel value={value} index={0}>
** Intake Details Stuff **
</TabPanel>
<TabPanel value={value} index={1}>
<Sizing />
</TabPanel>
</Box>
</Paper>
</Container>
</div>
</div>
)
The return in Sizing. There are 19 TextFields, all structured as seen below. There are also buttons in a <DialogActions> tag which I have not included here.
const onTextChange = (e) => {
const id = e.target.id;
var value = e.target.value;
setSingleSizing({ ...singleSizing, [id]: value });
};
...
return(
<div id="sizing-container">
<Dialog open={open} onClose={handleClose} maxWidth={"xl"}>
<DialogTitle id="form-dialog-title">Edit estimation</DialogTitle>
<DialogContent>
<Box>
<TextField
id="SizingComments"
value={singleSizing?.SizingComments}
label={"Estimation Comments"}
onChange={onTextChange}
variant="outlined"
style={{ margin: "1em", minHeight: "1em", minWidth: "15em" }}
/>
</Box>
</Box>
</DialogContent>
</Dialog>
</div>
)
So I have the following problem: I have made a Material-UI DataGrid in React JS which I would like to use inside a Material-UI DialogContent. Everything in the table works correctly when put in a Dialog - ordering, renderCells, checkboxSelection, etc. except for using the default filtering. Here is a bare bones example which recreates the bug: https://codesandbox.io/s/relaxed-stallman-sev7x?file=/src/demo.js
Clicking on the column name/options then clicking on "filter" brings out the bug, which is that you can't type in the filter field. Does anyone know a solution to this?
Thanks in advance and sorry if question is phrased badly or a duplicate, first post here on SO
Add disableEnforceFocus to the Dialog component.
<Dialog disableEnforceFocus fullWidth maxWidth="xl" open={true} onClose={this.onClose}>
<DialogTitle>Test Dialog Grid</DialogTitle>
<DialogContent>t>
<div style={{ backgroundColor: "white" }}>
<DataGrid columns={columns} rows={rows} autoHeight />;
</div>
</DialogContent>
</Dialog>
<div style={{ backgroundColor: "white" }}>
<DataGrid columns={columns} rows={rows} autoHeight />;
</div>
</div>
I am trying to implement an autocomplete to show suggestions in an input field and save the selection in the state so I googled to look for an AutoComplete library and found one from MaterialUI but I can't seem to get it to work.
I get both an error and a warning and can't quite wrap my head around how to solve them.
here's my code
<div className="App">
<h1>Please Tell Diagnostica more medical info about you.</h1>
<Container className='Diagnosis'>
<Autocomplete
id="combo-box-demo"
options={this.state.uuidFeatures}
getOptionLabel={(feature) => feature.text}
value={this.state.inputValue}}
onChange={this.handleInputChange}
style={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="Combo box" variant="outlined" />}
/>
</Container>
</div >
I currently have a material ui grid system that looks like the following:
<>
<Typography gutterBottom variant='h6'>
Add New User{' '}
</Typography>
<Grid container spacing={3} alignItems='center' justify='center'>
<Grid item>
<Typography variant='body2'>Full name</Typography>
</Grid>
<Grid item>
<TextField
style={{ width: 400 }}
fullWidth
margin='dense'
id='outlined-basic'
label='Full name'
variant='outlined'
/>
</Grid>
</Grid>
<Grid container spacing={3} alignItems='center' justify='center'>
<Grid item>
<Typography variant='body2'>Email</Typography>
</Grid>
<Grid item>
<TextField
style={{ width: 400 }}
fullWidth
margin='dense'
id='outlined-basic'
label='Email'
variant='outlined'
/>
</Grid>
</Grid>
</>
I am noticing that because email and full name are different lengths, the grid items do not align in the way I would like them to. They currently look like the following:
I would like the grid to look like the following:
Is there a way to align the grid items like the bottom picture without needing to add a fixed width? that seems to be the only solution I have found but I feel like I'm missing something regarding the grid system.
attached is a code sandbox https://codesandbox.io/s/affectionate-bhabha-ur9nm?file=/src/App.js for debugging
I've added xs={9} for text-field and xs={3} for the label with style={{ textAlign: 'right' }}(not familiar with material-ui so don't know if there's a better way to apply this).
This is the result: https://codesandbox.io/s/hungry-euclid-n7y8f
you just need to add xs sm lg to your Grid component to take advantage of Auto layout. accoording to the doc:
The Auto-layout makes the items equitably share the available space.
after applying this change, your items will be aligned properly. you can also check the corrected version here in the sandbox.
I have this material-ui list:
<List dense>
{this.state.issues.map((item, i) => {
return <Link target="_blank" to={item.issue_url} key={i}>
<ListItem button>
<ListItemText primary={item.issue_state}/>
<ListItemSecondaryAction>
<IconButton>
<ArrowForward/>
</IconButton>
</ListItemSecondaryAction>
</ListItem>
</Link>
})
}
</List>
issue_state is obtained from MongoDB. Can I add another column to my list showing another field from the database? I tried:
<ListItemText primary={item.issue_state}/>
<ListItemText primary={item.issue_title}/>
This displays what I want but the issue_title test is centered. I'd like it left aligned. Can this be done?
ListItemText component renders with the following CSS style that allows it to be flexible to grow and shrink according as the width and height of its content.
flex: 1 1 auto;
Its ancestor ListItem component renders as an inline-flex.
AFAICT, the results you're looking to achieve can't be done without overriding these styles. Not to worry, there are other ways to go that uses available APIs exposed in the component.
Never mind that the name for the component seems to be misleading that its usage is specific for rendering text in the list item.
A closer look in the ListItemText component API documentation shows that the primary property is of the node type.
That implies that the ListItemText can be used to render string, function, and React.Element in a manner similar to the snippet below.
<ListItemText primary={<div>Foo<br/>Bar<br/>Baz</div>} />
There is also the secondary property that renders the elements with textual emphasis.
<ListItemText primary="Foo" secondary={<div>Bar<br/>Baz</div>} />
If you need more control over the children of the ListItemText, the API allows for the flexibility to write it this way
<ListItemText>
<Typography variant="subheading">Foo</Typography>
<Typography variant="body1" color="textSecondary">Bar</Typography>
<Typography variant="body1" color="textSecondary">Baz</Typography>
</ListItemText>