Multiselect/Dropdown in Forge Dashboard Edit behaves wrong

Hi,

I am trying to use a multiselect inside a DasboardEdit form. For testing purposes I used the select example from here:
https://atlassian.design/components/form/examples

But as you can see, the multiselect is always behind the body of the iframe

There is an “overflow-y: hidden” css property that seemingly gets added to the html tag automatically that causes this behavior. If I disable it using

document.documentElement.style.overflowY = 'visible'

the drop down works as I assumed.
Is this a bug or intentional?

Regards,
Daniel

Hi @DanielKleissl
The overflow is to prevent Forge apps from modifying or hiding elements outside of the app. Although not ideal, a workaround for the time being is to include a minimum height or static height css style on the container of your app to increase the size of the view so that the rest of the menu can be displayed

Hi @QuocLieu,

thanks for the swift reply, but I find that answer strange. I’ll be the first to admit that I am still a beginner in understanding all the caveats of CSS and HTML, but here’s my reasoning:

  1. The pipeline adds “height: auto” and “overflow-y: hidden”:

The result looks like this:

Do you see what I mean? The container already grows to fit the multiselect options, even though they are hidden! Or do you mean something different by “container”? Because the html tag that is contained in the iframe has these properties:

image

  1. If I “hack” the html-tag to remove the hidden overflow property, all works as I expect it to:

Using this in my App.js

document.documentElement.style.overflowY = 'visible';

Edit: forgot I already mentioned the hack above :wink: But I’ll leave this here for completeness’ sake

I get this result:

image

Again, the multiselect options are contained inside the dashboard edit container, as far as I can tell.

So, what is happening here?
I mean, I don’t mind using the one line to remove the overflow property - but it still feels like a hack, and I would love for this issue being adressed “serverside”, so to speak. Or if you could share what exactly could get broken by doing this hack.

1 Like

I have the same problem and this is the problem.

Thanks @DanielKleissl ,
I’ve just tested this myself and can see the issue you’re having now. Confirmed with the team that it is a bug. I’ve just created a public ticket here you can follow: [FRGE-1121] - Ecosystem Jira . For the time being, feel free to continue using your work around or alternatively setting the height of the component to a fixed height to accomodate the dropdown height

1 Like

For what it’s worth… and in case someone lands up here needing it, I ended up using Candid’s solution here:
Dropdowns, select boxes and inline dialogs in iframes with limited height

2 Likes