Develop Reference

MUI How to output text with Break Lines?

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

Align Material UI Grid Items of different length

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.

Making a react component clickable

I have a functional REACT component, code is as follows
const MobileListing = (props) => {
function handleClick() {
console.log('in cardClick');
}
return (
<div>
<Row>
<Card onClick={() => handleClick()} style={{cursor : 'pointer'}} >
<Card.Img variant="top" src="holder.js/100px180" />
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the bulk of
the card's content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
</Row>
</div>
);
}
export default MobileListing;
I want to make the entire card clickable. I read through a post on stack overflow Making whole card clickable in Reactstrap which talks about using an anchor tag, but that doesn't work for me.
Can someone help me understand what I am doing wrong?
A card looks like this on my site and I want to make the whole card clickable.

You can use the onClick either on the top-level div element for this, or, in case there would be more cards inside the Row you can wrap each with a div and give it the onClick, property.
such like:
<div>
<Row>
<div onClick={handleClick}>
<Card style={{ width: '18rem', cursor : 'pointer' }} >
<Card.Img variant="top" src="holder.js/100px180" />
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the bulk of
the card's content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
</div>
</Row>
</div>

It is better to wrap it around with an anchor tag because clickable things should be links if they go to places, and should be buttons if they do things.
Using click handlers with other things just make things inaccessible.

Material-UI: How to make aligned form

I'm new to Material-UI. How does one typically build a form, where some fields are grouped horizontally while others are stacked vertically and all the fields aligns nicely both vertically and horizontally? See the following example picture:
I know how to build this kind of form with plain HTML tables, but what is the "correct" Material-UI way? Example code would be nice.

Here you have a sample for the first two rows:
<form>
<Grid container>
<Grid item xs="12">
<TextField id="standard-basic" label="Standard"/>
</Grid>
</Grid>
<Grid container>
<Grid item xs="8">
<TextField id="standard-basic" label="Standard"/>
</Grid>
<Grid item xs="4">
<TextField id="standard-basic" label="Standard"/>
</Grid>
</Grid>
</form>

Loading Jquery tab UI dynamically in angular

I am using jquery-ui tabs plugin .
The trouble I am having is I load the tabs on a row click(table in html) and thus the tabs length can be dynamic on every row user clicks and also I built the tabs in HTML using angular directives
This is how I am create the tabs in angular
<div class="modal-body">
<div id='tabs'>
<ul >
<li ng-repeat="row in tabs.row">
{{row.Tab}}
</li>
</ul>
<div ng-repeat="row in tabs.row" id="tabs-{{$index + 2}}">
{{row.Tab}}
</div>
</div>
</div>
Also I am a modal window , the trouble is the $( "#tabs" ).tabs(); function doesn't sync with ng-repeat I wait it some time when my model is loaded and then call it ,like so
jsonData (In XML form for simplicity) :
<data>
<row>
<Tab>General</Tab>
</row>
<row>
<Tab>Locations</Tab>
</row>
<row>
<Tab>Treatment</Tab>
</row>
<row>
<Tab>Training</Tab>
</row>
<row>
<Tab>Facilities</Tab>
</row>
<row>
<Tab>Equipment</Tab>
</row>
<row>
<Tab>Physicians</Tab>
</row>
<row>
<Tab>People</Tab>
</row>
</data>
Saving data:
$scope.tabs=jsonData;//save to model
r =setTimeout(initTabs,500); //give some time to modal to save data
function initTabs(){
$( "#tabs" ).tabs();
console.log('timerCalled');
r=clearTimeout();
}
Now this works for the firs time , but any subsequent clicks to reset the tab results in the tabs having only one tab and are obscure .
Is there a way I can do this , I am thinking of someone resetting the classes added by #id.tabs() functionality but looking for a easier way .

I figured out I can revert changes done by #selector.tabs() by using #selector.destroy()
Only catch is I have find a way if I have used #selector.tabs or not ,one way is:
if(selector.data("ui-tabs"))
Here is my re initialization code again :
function initTabs(){
if ($( "#tabs2" ).data("ui-tabs")) {
$( "#tabs2" ).tabs( "destroy" );
}
$( "#tabs2" ).tabs();
console.log('timer');
r=clearTimeout();
}