I have an MUI DatePicker component that is inside of an MUI drawer component. When you click on the date picker to pull up the calendar popup, it is rendering beneath the drawer.
I have tried to set the zIndex of the popper component through PopperProps but have had no luck.
In order to have the Popper show above the drawer component you need to supply to PopperProps an object with style property set to a high zIndex value. This value seemed to work perfectly fine for me.
<DatePicker
{...props}
PopperProps={{
style: { zIndex: 1000000}}}
/>
Related
I am following Sastaticket you can also check from there in different screen sizes I need to show the datepicker according to screen size if on a desktop window the datepicker will show normally that is already showing but when on a mobile screen i need to open a drawer and then the datepicker should show inside the drawer with inline style i have created the datepicker field outside the drawer .is there a way to do this i am using antd datepicker
I have tried to create the custom drawer and when on mobile screen only the drawer is showing and not the datepicker because i do not know how to call the respective datepicker in a onclick function like in the jquery we have .datepicker() for custom styling and other stuff
<DatePicker placeholder='EndDate'onClick={ShowWithPopOver} onChange={onChange} name='EndDatePicker' id='EndDatePicker' style={{ border: "transparent", boxShadow: "none" }} />
and here is my function code
function ShowWithPopOver()
{
if(window.innerWidth>700)
{
}
else
{
debugger
const el = document.getElementById('MobileDatePickerOverlay');
el.classList.add('mlk-drawer-open');
}
}
if mobile view then add class to this view MobileDatePickerOverly to show the view and after that the datepicker will show in that view as inline
Is there a way to style an MUI React component using it's own sx property, for hover on parent component?
For example, I have a Box child component within a Fab parent component. I want to use the sx prop of Box such that if the Fab is hovered over, the Box styling is changed. I don't want to change the sx prop of Fab for this purpose.
The material-UI react stepper control steps do not receive the tab focus. Is there a way to enable tabFocus on the steps?
https://material-ui.com/components/steppers/
Already I see tabFocus is exist on the steps but the styles are not show. I think if you add focusRipple props attribute
<StepButton focusRipple onClick={handleStep(index)} completed={isStepComplete(index)} {...buttonProps}>
{label}
</StepButton>
true on the StepButton component you might be able to see the tab focus
https://codesandbox.io/s/material-demo-4m4si
I am trying to add labels to nested <SpeedDialAction /> components, and have button text displayed next to icons like so:
but it seems like children do not get rendered:
...
<SpeedDialAction
key={action.name}
icon={action.icon}
tooltipTitle={action.name}
onClick={this.handleClick}
>
Foo
</SpeedDialAction>
...
I also tried using the ButtonProps prop as listed in the docs but that did not do the trick either.
I take a look at the SpeedDialAction source code https://github.com/mui-org/material-ui/blob/6f9eecf48baca339a6b15c5fcfb683cba11e4871/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.js
The title of Tooltip only shows on hover, but it can be easily done by changing default state to true, eg: state={ tooltipOpen: true } in SpeedDialAction.js file.
However, Tooltip component in SpeedDialAction has no reference, so there is no easy way to setState from outside.
The easiest solution is to create a custom SpeedDialAction component.
SpeedDialAction component contents only Tooltip and Button, which it's hard to modify.
There is the codesandbox https://codesandbox.io/s/9zpyj4o0zo
You can simply add SpeedDialAction.js file to your project.
Update:
Removed onClose event in Tooltip in codesandobox. Fixed the problem where title disappear after click.
https://codesandbox.io/s/6lol2kz3v3
When the modal is scrolled, the timepicker just stays on the same position instead of getting scrolled together with the other components.
What would be the correct way to fix this?
Solved with adding the prop getPopupContainer={triggerNode => triggerNode.parentNode} to the component.