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).
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 want to change accordion content on clicking the navdropdown menu items using react .i have tried using react-modal . but it didnt work . i dont want the popup . just want to change the accordion content on dropdown menu item click.
have the content of the accordion inside the state
when clicking on navdropdown menu you can update the state
I use React and Material-UI. I use huge Popover with the Tooltip behaviour. The goal is to display data when the user hover some links. It's working well but i have a problem about scrolling.
I want to be able to scroll INSIDE the popover when the Mouse is inside it. The default behaviour is to let the user scroll the entire page instead of focus on the popover.
I have set a CodeSansBox to show you.
Material UI gives us a prop to replace the default dropdown icon on the MuiSelect component. However, a custom icon isn't automatically given the same functionality as the default of rotating 180 degrees to visually show when menu is open/closed.
I'm wondering if there is any way to easily add this. I want to globally replace all of the Dropdown icons.
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>