Custom visuals issue: React component z-index.

duongdo_df — Fri, 08 Apr 2022 07:32:44 GMT

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!!

Re: Custom visuals issue: React component z-index.

dm-p — Tue, 12 Apr 2022 01:35:37 GMT

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

topic Re: Custom visuals issue: React component z-index. in Custom Visuals Development Discussion

Custom visuals issue: React component z-index.

Re: Custom visuals issue: React component z-index.