Section with hidden Html web resource / IFrame overlapping other section
Views (24)
Charles Abi Khirs
3,569
Like
Share
Report
Last day, I was working with D365 V9 on-premise and I have encountered a weird issue where a section was overlapping on another section side by side. 
It was very strange since all the fields in this section are having the same behavior.
The special thing about this section is, that it contains many html web resources and other fields that are being hidden using JavaScript, and the issue occurs in the edit form.
When the web resources are displayed on the create form, the issue is not there and everything seems normal.
After some digging in the html to see what might be the issue, I noticed that the section (table in the generated html) with the erroneous behavior has a style table-layout : auto, if I set it to fixed (in the developer tool - F12), the section is normally displayed and the overlapping is gone even when I resize the window.
However, this solution is not supported since we will access the DOM element of the form to do the change on the section style using JavaScript. Therefore, another supported solution must be done in order to fix this issue.
I tried to change some properties of the web resources hoping that it might help solving this issue, but in vain.
I changed the components in the section to an IFrames and setting the URL to the needed web resources, but the same behavior has occurred when hiding the IFrame.
Finally, I decided to put the web resources in a separate section without any other field that should be displayed on the edit form and after publishing the changes and opening the edit form, the behavior is as expected and the issue is solved.
I opened the create form which was initially not having any issue and the web resources are properly and nicely displayed together.
Feel free to add your comments if you think it helps you or if there is another solution.
Hope this Helps!
This was originally posted here.
*This post is locked for comments