search

appsmithorg / appsmith

Platform to build admin panels, internal tools, and dashboards. Integrates with 25+ databases and any API.
https://www.appsmith.com
Apache License 2.0
33.79k stars 3.64k forks source link

[Bug] Group Option Popup zindex (hides inside the Form Widget container) #7358

Closed rishabhrathod01 closed 6 months ago

rishabhrathod01 commented 3 years ago

Description

[What happened]

Screenshot 2021-09-10 at 9 40 24 PM

Steps to reproduce the behaviour:

Add steps to reproduce this behaviour, include console / network logs & screenshots

  1. Go to New Application and Go to any Empty Page
  2. Add a form widget and decrease its size as shown in image.
  3. Try to group the buttons
  4. See error

Important Details

Sarthakagarwal22 commented 2 years ago

I would like to pick up this issue

somangshu commented 2 years ago

Greetings @Sarthakagarwal22, thanks for showing interest 🎉 , This is all your. Assigning this to you now.

Please don't forget to read the Contribution Guidelines. Would appreciate if you can open a PR within the next 2 days.

Also, please don't forget to register with Appsmith's Hacktoberfest Community in order to be eligible for Appsmith swag.

Sarthakagarwal22 commented 2 years ago

@somangshu

Screenshot 2021-10-05 at 9 56 41 AM

Does this look like a valid solution

somangshu commented 2 years ago

@jsartisan need you to check this out

jsartisan commented 2 years ago

@Sarthakagarwal22 the valid solution for this is to use the portal to render the context menu. The reason why this is happening is that the context menu is rendering in the same container.

Sarthakagarwal22 commented 2 years ago

@jsartisan I would need some help here. I tried using the portal, but I couldn't understand the flow to be honest. A basic approach that I took was, added a css property, which made it work in form. Can we pair up somehow to solve this?

jsartisan commented 2 years ago

Yes. Let's have a call tomorrow? Anytime between 10-7.

Sarthakagarwal22 commented 2 years ago

11am would be fine by me.

jsartisan commented 2 years ago

@Sarthakagarwal22 Can you come on discord?

Sarthakagarwal22 commented 2 years ago

Hey @somangshu I am sorry, I dont think, I would be able to give time to this. I thought it was easier, hence I picked it, but looks like its a bigger task.

vividh commented 2 years ago

@jsartisan @Rishabh-Rathod I'd like to take this up! Should be fun working with React Portals for once. 😏

rishabhrathod01 commented 2 years ago

Greetings @vividh , thanks for showing interest 🎉 , This is all yours. Assigning this to you now.

Please don't forget to read the Contribution Guidelines. Would appreciate it if you can open a PR within the next 4 days.

digant2482 commented 10 months ago

Hi, I would like to work on this issue @somangshu ? @jsartisan just to be clear what do you mean by portal is it the portion shown in image

Screenshot 2023-10-26 145213
somangshu commented 10 months ago

Greetings @digant2482, thanks for showing interest 🎉 , This is all your. Assigning this to you now.

Please don't forget to read the Contribution Guidelines. Would appreciate it if you can open a PR within the next 2 days and LMK here.

digant2482 commented 10 months ago

@jsartisan, hi just wanted to clarify if

278282336-f2feb044-ba36-4be4-bc33-473b6fc97262

If this is the area, shown in image where we want context menu ?

jsartisan commented 10 months ago

@digant2482 No no, sorry. You misunderstood the solution. Currently the context menu is rendering in a container that has overflow hidden. We need to use portal ( https://react.dev/reference/react-dom/createPortal / https://www.radix-ui.com/primitives/docs/utilities/portal ) to make sure the context menu is rendered outside of it with proper position.

Nikhil-Nandagopal commented 6 months ago

Seems to be working