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.