Forum Discussion
Custom visuals issue: React component z-index.
Hello, I am developing a custom date picker with React and I have an issue:
I'm using a third-party library called "Ant Design" (https://www.npmjs.com/package/antd)
This is a date picker:
After I click on it:
So I need to resize the custom visual to a bigger size to see the calendar clearly.
Is there an approach to fix this without resizing the custom visual but still can see the calendar like the default HTML input date picker like this?
Thank you!!
Hi duongdo_df - unfortunately not. This is a limitation of the sandbox for custom visuals, and HTML elements are not permitted to exceed its borders. There are two potential options here (although both of them may not suitable for the library you are using):
- Use standard HML <input> elements. These can overflow the conents, but ae not very customisable (and what can be customised is sometimes browser-specific). This was my preference when building my own slicers previously.
- Use the dialog box API, which is the MS-supported way of creating content that overflows the visual boundaries. This could potentially support your library if it allows you to manage the display of the picker when the dropdown is clicked.
Regards,
Daniel
1 Reply
Hi duongdo_df - unfortunately not. This is a limitation of the sandbox for custom visuals, and HTML elements are not permitted to exceed its borders. There are two potential options here (although both of them may not suitable for the library you are using):
- Use standard HML <input> elements. These can overflow the conents, but ae not very customisable (and what can be customised is sometimes browser-specific). This was my preference when building my own slicers previously.
- Use the dialog box API, which is the MS-supported way of creating content that overflows the visual boundaries. This could potentially support your library if it allows you to manage the display of the picker when the dropdown is clicked.
Regards,
Daniel