I'm new to reactjs and material UI.
I have struck in Materia UI autocomplete https://codesandbox.io/s/material-demo-47kfg (without popper or 1st one).
Here I want to disable some country value based on some condition.
like if country is albania i want to disable the albania. user should able to select the country and the popper should not close on the click event.
i have tried like this
<Paper disabled={option.children=='Albania'?true:false} {...options.containerProps} square>
{options.children}
</Paper>
I have tried but nothing is working.
can anyone resolve this
Related
I am using Chakra UI's useDisclosure hook to toggle the dropdown of the nav bar item. The dropdown is toggled on click. I have multiple menu items in the nav bar with dropdowns. I would like to keep only the active dropdown open at a time, but I don't know how to close previous ones?
Here is the full working thing in Codesandbox to see what I have.
I'm using MUIv4 and built the following table component which show some actions on hover.
UI Before Hover
UI After Hover
Now I want to shift to MUI v5 Datagrid to replace this component. But could not find anything that could fulfill my design need i.e show actions on hover. Is there any way to do this on Datagrid component?
Link of MUI5 DataGrid with somehow desire result
Note: I want to show the action on one row at a time like in gmail
Just give me the code: https://codesandbox.io/s/datagridprodemo-material-demo-forked-63c9j?file=/demo.js:699-864
You can use renderCell with Chip like this:
renderCell: (params) => {
return (
<Chip variant="outlined" size="small" label={params.value} />
);
}
As you are requiring some GMail like interface try setting the icon property of Chip. Reference: https://github.com/mui-org/material-ui/blob/v5.3.0/docs/src/pages/components/chips/IconChips.js
And it looks something like this:
You could check this documentation about migration from v4 to v5 https://mui.com/components/data-grid/migration-v4/#removed-props.
There are some removed props related to hover event: onCellEnter, onCellLeave, onRowEnter, and onRowLeave. The developer said that they removed the props for better performance https://github.com/mui-org/material-ui-x/issues/3799.
You could also check this documentation https://mui.com/components/data-grid/components/#row for the implementation examples when the mouse cursor enters or leaves the row or this documentation https://mui.com/components/data-grid/components/#cell when the mouse cursor enters or leaves the cell.
How to show dropdown on button click using material ui?
Currently, I'm able to do so but extra select field is getting populated which is not required. I don't want to hide select field with css.
Also, How can I change width, height, position and other properties of generated popover using material ui?
codesandbox url: https://codesandbox.io/s/du8mr
current implementation
popover
You can use Menu component instead of a Select component.
You can change the Menu props using MenuProps which receives all Popover props.
From Menu documentation:
Any other props supplied will be provided to the root element (Popover).
I am using both materialui and antd as the ui component library in my react app. I have been using material ui's full screen dialog and tried to insert antd's select inside the dialog.
But looks like select list doesn't render correctly when placed inside material-ui's dialog component. I have tried to give antd select a very large zindex with absolute position but no luck.
Here's a the codesanbox link. You can the select work out the dialog but same select component doesn't render it's option list when placed inside the full screen dialog
https://codesandbox.io/s/1zvj51xmj
If I add dropdownStyle={{ zIndex: 2000 }} to the select it seems to work.
Add zIndex=20 to Dialog Component and zIndex=2000 to Select
<Dialog
open={openSetTagsDialog}
onClose={SetTagsDialoghandleClose}
aria-labelledby="form-dialog-setTags"
maxWidth={"md"}
style={{zIndex:20}}
>
<Select style={{zIndex:2000}}>{...options...}</Select>
<Dialog>
I'm attempting a simple redux form using Material UI component. Following the example on their page it's easy to get redux Field components rendering as material-ui fields ?
However I would like to use material-ui buttons as the Submit and Reset buttons for my form rather than just the standard HTML . Despite searching at length and trying a few things I cannot get this to work.
Any idea if it is possible to use material-ui buttons (e.g. FloatingActionButton) as my redux-form buttons ?
jsFiddle: https://jsfiddle.net/h6kvv8j0/3/
Just apply the "type" attribute:
<form ...>
<FloatingActionButton type="submit">...</FloatingActionButton>
<FloatingActionButton type="reset">...</FloatingActionButton>
</form>