Form space not resizing on mobile

[LoisEClarke]

Hey guys,

I am using Pardot form on the site via iframes and in a lot of cases the space Dante reserves for these forms are problematic.
Let’s have an example.

http://www.idioplatform.com/use-cases/
Open up any of the modals and you will see a form which looks alright. But if you shrink the window to check the mobile version you will see that the space for the form is unchanged. The form became a 1 column structure thus would need a much higher height, but Dante keeps the same space for it. (right now the height it hardcoded to be 300px but feel free to change it to make it work. if I delete the height the WordPress automatically puts in 150px as a value for some reason.)

Is there any way avoid this problem so the form does not need scrolling and it shows with full height?

So this is really about making the space allocated for iframes dynamic.
I can manually assign a height to the form but of course there will be a lot of empty space on desktop view because I need to think of how much height the form will need for mobile.

Please let me know if am I unclear.

Thanks in advance!

Balint

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

iframe{
min-height:450px !important;
}

Thanks
Mohammad

[LoisEClarke]

Hey Mohammad,

Thanks I have put this in a Raw HTML box (with <style>) and it made some difference.
But it created some also.
Now on desktop view there is a massive gap below the form because it is set to min 450px height: http://prntscr.com/753nne
And on mobile there is still scrolling needed: http://prntscr.com/753o1y

I can set the iframe height to 550px so it would look ok on mobile but there would be even a larger gap on desktop.
Additionally the amount of form fields appearing is based on how much we already know about the person. For example if their first name and company is in the database those fields will not appear thus making the form smaller.

This is why I the best would be some sort of dynamic solution. Meaning the iframe height is set by the height requirement of the element inside it.
Or am I interpreting things incorrectly? Am I even making sense? 🙂

[Mohammad – SUPPORT]

Hi,
Please remove my last css code and use this css code:-

@media only screen and (max-width: 767px) {
iframe{
min-height:550px !important;
}
}

Thanks
Mohammad

[LoisEClarke]

Thanks a lot Mohammad. This is a good solution for now.

Although I am still looking for a way to enable the dynamic iframe height.
As you see if the (Pardot) form recognizes me it will only show me one field to fill in: http://prntscr.com/7544gv
Leaving a large gap below as the iframe reserves the spaces when all form fields are visible. This is probably outside of Dante support and might not even fixable via just HTML, but if you have any ideas about it I would appreciate it.

In any case great support and thanks again.

Balint

[Mohammad – SUPPORT]

Hi,
Please attach screenshot within this site.
Thanks
Mohammad

[LoisEClarke]

Here is one about the form I was talking about: http://prntscr.com/7544gv

[Kyle – SUPPORT]

It looks fine to me? Do you want to increase the height?

– Kyle

[LoisEClarke]

No I want the iframe height to adjust to the height of the content in the iframe.

In this instance (on desktop view) the height should be 175px, but if the form is different and shows more fields the height should adjust to that, dynamically!

So what I would like to achieve is not setting a height, the height would be determined by the amount of stuff displayed in the iframe. If the content is 500px high, the iframe would be 500px also, if its 175px then the iframe height is 175px. So essentially solving the issue to have additional empty spaces below the iframe if the content of the iframe is lower in height than the iframe height.

[Kyle – SUPPORT]

Ahh unfortunately that’s not something that can be controlled by the theme, sorry
– Kyle

[LoisEClarke]

Suspected so. Don’t worry I’ll try to find a solution for it.

Maybe this is something you might want to consider putting in. It could be used in all of the themes.

In any case, thanks for the support and have a great weekend!
B.

[Kyle – SUPPORT]

No problem