I am using select from material UI but the issue I'm facing the dropdown does not be in one position.
How I want it:
How it's showing in mine:
when opening the dropdown
So basically the dropdown showing in the center of it's field rather than showing below it. I did my research and seen it is know to be default setting (to dropdown be below it's field) but not happening in my case.
Code fo the dropdown
<div className="row-5" style={{ marginTop: "21px" }}>
<div className="repeat">
<FormControl variant="standard" sx={{ m: 1, minWidth: 120 }}>
<InputLabel id="repeat-id">Repeat</InputLabel>
<Select
style={{ width: '420px' }}
labelId="repeat-id"
id="demo-simple-select-standard"
// value={age}
// onChange={handleChange}
label="Repeat"
defaultValue="Never"
>
<MenuItem value="Never">
Never
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</div>
</div>
you must import the Select component from here :
import FormControl from '#mui/material/FormControl';
import Select from '#mui/material/Select';
that works for me very well.
Related
I used react admin's data grid to show my data from api and put functionField with Delete mui on it. I would like to exempt one column like to toggle DeleteButton to render modal but in datagrid I always forwarded to another view, here's my sample component
<List
actions={<ListActions />}
bulkActionButtons={false}
{...props}
sort={{
field: 'name',
order: 'DESC'
}}
empty={true}
>
<Datagrid rowClick="edit" >
<TextField label="Account No." source="account_number" emptyText="-" />
<TextField label="Account ID" source="accountId" emptyText="-" />
<TextField label="Balance" source="balance" emptyText="-" />
<FunctionField label="Action" render={ (rec: any) => <Delete onClick={() => handleDelete(rec)} /> } />
</Datagrid>
</List>
but each time I click the delete button it redirect to edit view thanks
Because you specified <Datagrid rowClick="edit">, any click on a row redirects the user to the corresponding edit view. If that's not what you want, you have two options:
remove the rowClick="edit" bit, and add an <EditButton> on every row instead.
in your click event handler, cancel event propagation to avoid that it's handled by DatagridRow after you handle it.
<Delete onClick={(event) => {
handleDelete(rec);
event.stopPropagation();
}} />
I am using mui date picker and i want to customize it but css is not working on it i tried inline style as well as external styling by giving className but it dosent work
I want to change its height
<DatePicker
sx={{height:'35px'}} //its not working!!
label="Due Date"
className="DatePicker"
renderInput={(params) => <TextField {...params} />}
value={selectedDate}
onChange={(newValue) => setSelectedDate(newValue)}
/>
You have to apply the style by using the sx property in the <TextField> component and target the element with class .MuiInputBase-input.
Below is the code you need and here is the codesandbox to play with.
<DateTimePicker
label="Due Date"
className="DatePicker"
renderInput={(params) => (
<TextField
sx={{
"& .MuiInputBase-input": {
height: "80px" // Set your height here.
}
}}
{...params}
/>
)}
value={selectedDate}
onChange={(newValue) => setSelectedDate(newValue)}
/>
use an other type of date picker instead. for example StaticDatePicker for large height data picker
<StaticDatePicker
value={selectedDate}
onChange={(newValue) => {
setSelectedDate(newValue);
}}
renderInput={(params) => <TextField {...params} />}
/>
How to keep a label position like T.M.T SKEP, if the default value is not set? I am using material UI.
import TextField from '#material-ui/core/TextField';
<TextField
fullWidth
label="T.M.T"
id="tmt"
name="tmt"
type="date"
value=""
variant="outlined"
/>
Add this property in the TextField.
InputLabelProps={{
shrink: true
}}
<TextField
fullWidth
label="T.M.T"
id="tmt"
name="tmt"
type="date"
value=""
variant="outlined"
InputLabelProps={{
shrink: true
}}
/>
https://codesandbox.io/s/material-demo-forked-swew3?file=/demo.js
I'm new to Material Ui, currently trying to implement their SELECT component, but it is opening in row instead of column. Do I miss something?
const SelectDropDownComponent = ({ options }) => {
const classes = useStyles();
const [age, setAge] = React.useState("");
const handleChange = (event) => {
setAge(event.target.value);
};
return (
<div>
<FormControl className={classes.formControl}>
<Select
value={age}
onChange={handleChange}
displayEmpty
className={classes.selectEmpty}
inputProps={{ "aria-label": "Without label" }}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</div>
);
};
Select on close
Select on open
In the next listbox I load elements with template:
<listbox model="#load(vm.resAccepted)" selectedItem="#bind(vm.selResAccepted)">
<template name="model">
<listitem>
<listcell label="#load(each.eventName)" />
<listcell label="#load(each.userName)" />
<listcell>
<button image="/img/button_mail.png"/>
</listcell>
</listitem>
</template>
</listbox>
My goal is to enable the button of the listitem ONLY for the row the user selects.
To do this, I try
<button disabled="#load(vm.selResAccepted.id=each.id?'false':'true')" />
checking if the unique field id is the same of the selected element, but it fails.
Any help will be appreciated.
You can use eq for equals comparison:
<button disabled="#load(vm.selResAccepted.id eq each.id?'false':'true')" />
or maybe even better: disabled when selected item is not the current item
<button disabled="#load(vm.selResAccepted ne each)" />
here ne is not equal