What's the best practices to prevent web panel scroll?

Jira Development Jira Cloud
, ,
1

I want to apologize for such a question, but how do you resolve height issues in web-panel? Let’s say like that:

image
image

Does it mean that developers should work with a fixed height of the iframe in order to prevent such UI behavior? Is it possible to do something else? Please, help.

Additional information:

I’m using basic react-select:

<Select options={[{ 
  label: 1, value: 1
}, { 
  label:2, value: 2
}, { 
  label: 3, value: 3
}]} 
menuPortalTarget={document.body}
styles={{ menuPortal: base => ({ ...base, zIndex: 9999 }) }}
/>

Layout settings:

"layout": {
  "height": "100%"
},

Kindest regards,
Igor Piskunov

Note:
Right now we’re using fixed div and fixed drop-down size.

1 Like
2

Hi @piskunovigorm,

We are resizing the iframe every time the select opens and closes using the Javascript API:

AP.resize('100%', windowSize);

The windowSize is calculated based on the number of options available on the select.

*I’m not sure if there’s a better way to do this on web-panels.

Kind regards,
Paulo Alves.

1 Like
3

Design your web-panels so you never hit the boundaries of any “popup” elements. Best way is to open up a dialog as soon as you need interactivity (more space to control).

4

@paulo.alves @danielwester, thank you for the answers! I appreciate it.