marychew
Canvas Initiate

Classic form does not display properly when embedded in iframe

Hi all, 

I want to hide the navigation bar and suitebar to show the form only. Hence, here is what I did. I am using Bootstrap modal to embed the classic form inside. And I navigated to:

1. Settings (gear icon) 

2. Edit Page

3. Insert Web Part > Media and Content > Script Editor > Edit snippet

 

Here is the code: 

<style type="text/css">

    #s4-ribbonrow, .ms-cui-topBar2, .s4-notdlg, .s4-pr s4-ribbonrowhidetitle, .s4-notdlg noindex, #ms-cui-ribbonTopBars, #s4-titlerow, #s4-pr s4-notdlg s4-titlerowhidetitle, #s4-leftpanel-content {display:none !important;}

    #sideNavBox { display: none }

    #contentBox { display: table; margin: 0 auto; }

    #suiteBar { display: none }

</style>

 

However, the form does not display properly as attached. I have to refresh it in order to make the form more readable and properly displayed. The solution that I seek for is to make the form displayed properly without the need to refresh. 

 

Please help. 

0 Kudos
Reply
2 Replies
Warwick
Workflow Veteran

Re: Classic form does not display properly when embedded in iframe

you can just place the custom css in the form settings > Custom CSS section (rather than a seperate web part)

I would say implement css change one by one and see which one is messing with the page, and then either try hiding it's parent or child to see if that makes a difference, or try visibility:hidden so it keeps it's size which may be messing with the form

0 Kudos
Reply
marychew
Canvas Initiate

Re: Classic form does not display properly when embedded in iframe

Thank you for your reply. I have tried your way to do it, but the display of form is still the same as attached above. In order for the form to display properly, I need to reload it. How to make sure the form displays properly without reloading?
0 Kudos
Reply