How to make embed use full height (100%)?

General
,
1

I have set the height of my embed to 100% and when it is embedded, it does not honor that height. Here is the actual embed code.

I added a div around it to try to force the height and I removed the unique ID of the bot from the code, but the rest is as provided by Pickaxe (“Customize your embed”).

Any suggestions?

<div id="iframe-container" style="height: 100%;" height="100%">
<iframe id=VLFEXWUXSW loading="eager" src="https://embed.pickaxeproject.com/axe?id=XXX&mode=embed_gold&host=beta&theme=custom&opacity=100&font_header=Real+Head+Pro&size_header=30&font_body=Real+Head+Pro&size_body=16&font_labels=Real+Head+Pro&size_labels=14&font_button=Real+Head+Pro&size_button=16&c_fb=F3F4F6&c_ff=FFFFFF&c_fbd=888888&c_rb=FFFFFF&c_bb=D1D5DB&c_bt=FFFFFF&c_t=000000&s_ffo=100&s_rbo=100&s_bbo=100&s_f=minimalist&s_b=filled&s_t=0.5&s_to=1&s_r=4" width="100%" height="100%" onMouseOver="this.style.boxShadow='0px 6px 20px 0px rgba(0,0,0,0.15)'; this.style.transform = 'translateY(-2px)'; this.style.transition = 'transform 300ms ease'" onMouseOut="this.style.boxShadow='none'; this.style.transform = 'translateY(0px)';" style="border:1px solid rgba(0, 0, 0, 1);transition:.3s;border-radius:6px;  width: 100%; height: 100%; overflow: hidden;" frameBorder="0"></iframe>
</div>
1 Like
2

Do you have a link to the webpage where you are trying to embed this AI chatbot? That would help us troubleshoot the issue.

3

Hi Mike. Sorry, forgot to check up on this. It’s an internal client site, so there is no way to provide access. But I think I figured it out. It’s a workaround, but I put a min-height attribute on the container, and that did the trick.

1 Like
4

Glad you found a solution. Often < div > containers are the culprit. They are responsible for much mischief.