Bootstrap embedded cutting off top 'New Discussion' button

showstuff

Vanilla 2.1.3 with Bootstrap Simplex Child Theme

I noticed this earlier once when I changed the number of discussions per page down to below 30. At that time, I set the number back to 30 and I didn't notice it again until a few minutes ago.

• To note, if I refresh the embedded page, it displays properly. This problem does NOT occur on dedicated vanilla page.

peregrine

I think this was answered before very recently. search for response by @vrijvlinder

vrijvlinder

Yes this problem has to do with the fact that your theme for where you embedded needs to be adjusted to hold the size of the embedded object in this case the forum.

Give me a link to the embedded forum and I can help you further.

showstuff

http://www.showstuff.org/forum.html#/discussion/4/looking-for-an-invention-cart-for-beauty-and-the-beast

showstuff

I found this in another discussion but my problem is not knowing how to code! I don't how to write CSS to solve this...

@x00 said:
This can be fixed by sorting out the css. You need to understand the css box model and how then look what is it using for height which looks to be offsetHeight

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.offsetHeight

note margin is not included.

vrijvlinder

yea forget that for a moment and use this in your theme for the site you embedded into and adjust as necessary

.vs-mainbox-body .wysiwyg-content iframe{
width:100%;
height:100%;
min-height:1000px;
margin-top:20px!important;
}

To see the other parts not as guest I need you to make a test account for me and pm the info so I can see more if the above does not solve the issue.

showstuff

@vrijvlinder‌ - thx... I may have to do that... this is being embedded in a CS-Cart ecommerce site using a block layout system. I tried to add you css into a 'user defined css' area for both the grid area and the specific block where I've added the iFrame code but no change in the result.

vrijvlinder

This is the file it needs to go in.

http://www.showstuff.org/var/cache/misc/statics/design/themes/vivashop/css/standalone.c524768e248e4680e7b58915bab60fa91412989431.css

That is a long file name looks like pagespeed or something else ?
You may need to add !important to the values...

showstuff

thanks... I opened the file to find this:

/*
ATTENTION! Please do not modify this file, it's auto-generated and all your changes will be lost.
The complete list of files it's generated from:
design/themes/vivashop/css/reset.css
design/themes/vivashop/css/scheme.less
design/themes/vivashop/css/base.css
design/themes/vivashop/css/styles.css
*/

showstuff

easier to read version:

/*
ATTENTION! Please do not modify this file, it's auto-generated and all your changes will be lost.
The complete list of files it's generated from:

design/themes/vivashop/css/reset.css

design/themes/vivashop/css/scheme.less

design/themes/vivashop/css/base.css

design/themes/vivashop/css/styles.css
*/

vrijvlinder

This is the content of the script you embedded. as you can see it is an iframe of you forum and has inline style which is affecting how it looks. There is an error in this inline style. The height is wrong.

<iframe id="vanilla61516" name="vanilla61516" src="//forum.showstuff.org/index.php?p=/discussion/4/looking-for-an-invention-cart-for-beauty-and-the-beast&amp;remote=http%3A%2F%2Fwww.showstuff.org%2Fforum.html&amp;locale=" scrolling="no" frameborder="0" width="100%" style="width: 100%; border: 0px; display: block; height: 954px; " height="0"></iframe>

This is generated by the embed.js

 var vanillaIframe = document.createElement('iframe');
   vanillaIframe.id = "vanilla"+id;
   vanillaIframe.name = "vanilla"+id;
   vanillaIframe.src = vanillaUrl(currentPath);
   vanillaIframe.scrolling = "no";
   vanillaIframe.frameBorder = "0";
   vanillaIframe.allowTransparency = true;
   vanillaIframe.border = "0";
   vanillaIframe.width = "100%";
   vanillaIframe.style.width = "100%";
   vanillaIframe.style.border = "0";
   vanillaIframe.style.display = "block"; // must be block

   if (window.postMessage) {
      vanillaIframe.height = "0";
      vanillaIframe.style.height = "0";
   } else {
      vanillaIframe.height = "300";
      vanillaIframe.style.height = "300px";
   }

I would change those values to 100% as far as height

peregrine

try

adding it to design/themes/vivashop/css/styles.css

showstuff

@vrijvlinder‌ - now is the moment when I show the full brunt of my ignorance... (unless I already have)

how/where can I change the iframe inline style error to reflect 100% height?

@peregrine‌ I'll try that

vrijvlinder

Ok , would not want to erase your content. It should work with the custom css interface they give you unless they block some css code but that is doubtful.

Remember that css changes don't show up instantly unless you are using something to reload a fresh style sheet.

If you can't add that code to the place it's embedded then change the code in the embed.js of the forum and see if that will fix it.

I would also add this to the vars

vanillaIframe.style.margin-top = "20px";

peregrine

I was referring to the css change that vrijvlinder said

http://vanillaforums.org/discussion/comment/217160/#Comment_217160

try

adding it to design/themes/vivashop/css/styles.css

not the js changes that was something else.

vrijvlinder

@showstuff said:
vrijvlinder‌ - now is the moment when I show the full brunt of my ignorance... (unless I already have)

how/where can I change the iframe inline style error to reflect 100% height?

Look for line number 245 and below and find the parts that say height 0 and change to 100% in the embed.js file of the forum inside the js folder

showstuff

@peregrine‌ - that was the code I thought you were referring to... thanks; I tried it and refreshed site cache with no change.

@vrijvlinder‌ - I changed the two heights to 100% - refreshed but no change unless you see something different on your end. Should I also change the 300 px heights?

showstuff

peregrine

you should ask your host how turn off caching and minification pagespeed supercache. etc.

you will always have a nightmare testing or changing things until you know how.

showstuff

would I need to copy the iframe code after making that change and add it to my site to see the changes?

vrijvlinder

no the 300 is the minimum height if not 100%

add this after the line that says //must be block

vanillaIframe.style.margin-top = "20px";
vanillaIframe.style.height = "100%";