Having just started with material-ui, I'm having trouble figuring out the margins of the Autocomplete. My form includes both Autocomplete and TextInput elements, but their positioning seems off to me. Is there some predefined margin box around Autocomplete that TextInput lacks? I had to adjust margin on the TextInput to align them, but now I have extra marginLeft on the Autocomplete that I don't want. I could add specific styling for it, but that messes up the sizing when zooming in.
The image clearly shows how the Autocomplete margin doesn't match the TextInput:
Any guidance on this matter would be greatly appreciated.
Below is the code snippet:
import React, { useState, useEffect } from 'react';
import Autocomplete from '@material-ui/lab/Autocomplete';
import TextField from '@material-ui/core/TextField';
import Grid from '@material-ui/core/Grid';
export default function AddPurchase() {
const [coinList, setCoinList] = useState([]);
const [name, setName] = useState('');
const [symbol, setSymbol] = useState('');
const [date, setDate] = useState('');
const [price, setPrice] = useState('');
const [amount, setAmount] = useState('');
const data = {
name: name,
symbol: symbol,
date: date,
price: price,
amount: amount
}
const handleName = (e, value) => {
if (value !== null) {
setName(value.substring(0, value.lastIndexOf('-') - 1));
}
else {
setName('')
}
}
const handleSymbol = (e, value) => {
if (value !== null) {
setSymbol(value.substring(value.lastIndexOf('-') + 2));
}
else {
setSymbol('');
}
console.log(value);
}
const handleDate = (e) => {
setDate(e.target.value);
}
const handlePrice = (e) => {
setPrice(e.target.value);
}
const handleAmount = (e) => {
setAmount(e.target.value);
}
const getCoins = useEffect(() => {
let mounted = true;
fetch('http://127.0.0.1:5000/api/v1/coins/list')
.then(res => res.json())
.then(items => {
if (mounted) {
setCoinList(items)
}
})
return () => mounted = false;
}, [])
console.log(data)
return (
<form>
<Grid container >
<Grid item xs={12} md={3}>
<Autocomplete
id="get-coin"
noOptionsText={'Coin not found...'}
options={coinList.map(item => (`${item.name} - ${item.symbol.toUpperCase()}`))}
onChange={(e, value) => { handleName(e, value); handleSymbol(e, value) }}
renderInput={(params) => (
<TextField {...params} label="Add coin" margin="normal" variant="outlined" />
)}
/>
</Grid>
<Grid item xs={12} md={3}>
<TextField
onChange={handleDate}
label="Date"
variant="outlined"
style={{ width: 250 }}
margin="normal"
>
</TextField>
</Grid>
<Grid item xs={12} md={3}>
<TextField
onChange={handlePrice}
label="Price"
variant="outlined"
style={{ width: 250 }}
margin="normal"
>
</TextField>
</Grid>
<Grid item xs={12} md={3}>
<TextField
onChange={handleAmount}
label="Amount"
variant="outlined"
style={{ width: 250 }}
margin="normal"
>
</TextField>
</Grid>
</Grid>
</form>
);
}