using Viewport Units (vh) in Legacy module does not work in 8.6.2

👨‍💻 Development Help
1

We spent a bit of time finding out why using vh to determine height in legacy modules did not work properly. So just wanted to share with the rest of the development community. And invite Suite to see if they want to solve this…

So, the issue was that with any action that resulted in changing the CSS dynamically, the screen height just got bigger. This happened with a Legacy module. We tracked this down to the fact that the frames were constantly checked for potential resizing and… a formula just added some extra pixels (50) unnecessarily each time.

So the issue is in public\dist\dist_core_fesm2022_core_mjs-_4dac1.f864533fa242990d.js specifically in " addBodyResizeListener", “getHeight”: return n > 0 ? n : s.element.scrollHeight + 50

So… we assume that this is used to adjust Angular rendered modules, but we think that these 50 px should not be added for Legacy.

Workaround: you can use the media settings in CSS as SuiteCRM does, or something more simpler.

If Suite confirms our suspicion, maybe they can put some check on Legacy rendering ? (possibly based on module_routing-yaml settings ?

Cheers,

2

Hi

how exactly can we reproduce this problem?

Can you see it happening also in the live demo?

3

Hi,

Thank you for coming back.

BTW: in my original post I pointed at " return n > 0 ? n : s.element.scrollHeight + 50", however, it should have been const e = s.document.getElementById(“bootstrap-container”)
, n = e && e.scrollHeight + 150 || -1;

OK, to reproduce it, we can “hack” a bit the live demo.

Go to Reports, create a report, and then with Chrome, in the div with classes “aor-tab-content panel panel-default”, add an inline style:

height: calc(100vh - 400px);

This will supersede the fix height defined.

If you now click on any of the fields or module tree elements, you will see that the height of that div just keeps increasing.

Is this a bug, or are we overlooking something ?

Thanks !