[Dialog] how do I render dialog close to the element where the trigger is ?

[yuvigrg]

Hi,

I am following the pattern here where I have the dialog to appear inside a containing div. The example for Custom portal container works and dialog is contained inside the parent component. I would like to add another effect like this i.e. display where the trigger was.

Is there a native functionality ?

[benoitgrelard]

Hey @yuvigrg,

You are talking about Dialog but the screenshot shows DropdownMenu so it's a little confusing.
However, if what you are after is for the content not to be portalled away from its natural location in the DOM, simply don't use the Portal part and it will be rendered right next to the trigger in the DOM.

However, that will have an impact on visual layering. You may come across z-index issues that are difficult to get out of.
But otherwise that's completely possible this way.

[yuvigrg]

@benoitgrelard i am sorry about the confusion. What I am after is having the dialog next to the trigger button hence i showed the example of the dropdown. A better example might be this one where add from url is a trigger button and the dialog appear just underneath.

With the custom portal, the portal appear within the div but covers the trigger button. I have tried without the suggested method of not using Portal and the result was the same.

PS. it might be a react problem to solve but thought i would ask before investigating it further.

[benoitgrelard]

Are you after Popover rather than Dialog then?

[yuvigrg]

ah looks like, Popover is a better fit than Dialog. Thank you for pointing it out to me. I will give it a try now