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>
Related
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 material select component in my react application. Can i specify the layout of menu items to next to each other and wrap to new line ? Desired componnent should look like this:
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
Is there any component similar to ext.window in react?
I checked bootstrap/material ui and the closest thing to a window are modals, but I would like to find something resizable and draggable.
You can try specific components that do this, like react-rnd.
See the demo, you can both resize and drag the created component.
Here, you have a live example in codesandbox.
What you need is a draggable modal with React implementation:
Bootstrap draggable modal
https://gist.github.com/burgalon/870a68de68c5ed15c416fab63589d503
Material UI draggable modal
https://codesandbox.io/s/nnq98zlrrl
I've been using Material-Ui for a while.
There's a standard modal and dialog (like a modal but with default template for easier customization)
Isn't modal (dialog) sufficient for the job that you want?
I am looking at the material-ui website and trying to achevie the following functionality - show a menu when an IconButton is clicked ?
As per the example it seems there is a lot of code involved? What is the purpose of anchorEl in the example shown https://material-ui.com/demos/menus/
From the MaterialUI Menu API page:
anchorEl: The DOM element used to set the position of the menu.