www.wysiwygwebbuilder.com

This is code for a Mortgage Calculator from http://usmortgagecalculator.org/mortgag ... or-widget/
I copied the HTML code per the creator's instructions, and click Insert>HTML, then expanded and place the box where I wanted it to appear in my page (an empty area). I double clicked the HTML frame, typed a Description and pasted the code in the HTML area in the HTML Properties window. To view the result, I Previewed (is there another way to view it without Previewing?). Only the bottom third of the calculator appeared and it was toward the top of the page right under the banner. The CSS tabs were pushed down to the middle of the page along with the Calculator title text box I created, but the horizontal black background strip that the CSS tabs were placed on remained at the top under the banner.

I tried removing the <!DOCTYPE>, etc., as you suggested in the documentation, but that didn't help. I also experimented with the Type settings in the HTML Properties box, but nothing changed. Can you suggest a cure? Thanks for your help. FYI - Below is the calculator code.

<!-- Amortization Calculator Widget START -->
<script src="http://usmortgagecalculator.org/widget/ ... der.min.js" type="text/javascript"></script>
<div id="acww-widgetwrapper" style="min-width:250px;width:100%;"><div id="acww-widget" style="position:relative;padding-top:0;padding-bottom:280px;height:0;overflow:hidden;"></div><div id="acww-more" style="background:#333;font:normal 13px/1 Helvetica, Arial, Verdana, Sans-serif;padding:10px 0;color:#FFF;text-align:center;width:100%;clear:both;margin:0;clear:both;float:left;"><a style="background:#333;color:#FFF;text-decoration:none;border-bottom:1px dotted #ccc;" href="http://usmortgagecalculator.org/" title="Mortgage Calculator" rel="nofollow" target="_blank">usmortgagecalculator.org</a></div></div><!-- Amortization Calculator Widget END -->

You can insert the code/script using the HTML Object see the following URL below and also using the Page HTML. Please also note it is out with the help offered to assist with external code/scripts if you wish to use please ensure the code is valid and that you understand how to use. No there is no other way to preview.
https://www.wysiwygwebbuilder.com/add_html.html

Basically, your calculator has a min width of 250px but can go as wide as you need it (it's responsive). I simply entered the code into an html box and previewed and it looked fine. At it's smallest width (250px) it is approximately 872px tall but the wider you make the html box it collapses to a horizontal layout.

If you are having issues seeing it, there could be a conflict on your page. Do you have any other scripts/extensions running on the page? If so, you may need to remove 1 script/extension at a time to determine which one is causing a conflict.

Have you tried simply starting with a blank project and inserting the code to see how it looks/works? Also, double check to make sure you copied and pasted the whole entire code correctly. It's very common to find that when you copy code you inadvertently chop it off at one end or another and simply missing and end tag or bracket.

OK, started new with a blank project/page and inserted a text box and text at top and a color filled shape, then placed an HTML box below it and previewed. It displayed perfectly with the calculator below the text box.

I went back to my original 8 page project and inserted a new blank page and did the same as above and previewed, and the calculator nailed itself to the top of the page again with my newly created text box, etc. covering the top half of it . . . same as before.

I'm not sure if I have other scripts are running, and if so, don' know where to look for them. Note, these are simple pages with a few images, CSS tabs, text boxes with some color backgrounds, and top and bottom banners. I think my calculator would be the only "script", correct? Sorry to be so dense about this. WYSIWYG has been so easy to use and this issue is the first time I've really had to get techical. Any other suggestions? I really appreciate the help.

It's pretty hard to know exactly what the culprit is and I'd only be guessing without seeing your project file. How are the other objects placed on the page? Are they on layers? Are you using layout grids? If you want, you can send your project file to me and I will be happy to take a look at it. My email is ron at wizbangwebdesign dot com.

Thanks Ron. I emailed the file. FYI - I just noticed that the cut half covered calculator nailed to the top of the screen on preview is on all my pages, and that's even after I deleted the code in the HTML box and the box itself (and deleted my browser cookies). Yike, I hope you can figure out what's going on. Thanks again.

figured it out. check your email

FYI - Ron got me the solution offline. here was my problem, and honestly, I don't know how or when I messed it up, but at least now I know what to look for if it happens again.

"The reason why the calculator is showing at the top of the page and on all your pages is that you have pasted the code under the ‘site html’ on the ‘After <body> tag’ tab. Deleting this will fix your problem." -Ron