- geekwithalifeAsked on June 03, 2011 at 01:09 PM
These forms have a tendancy of adjusting their height to being much larger than needed. I use Chrome as a browser and I'm trying to embed in a tumblr page. It's especially obvious when using the show/hide options because the height still gets calculated for every hidden element!
An interesting detail to note is if you zoom all the way out to where you can see the whole form and then back in after the form has loaded, it will re-adjust the height to what appears to be correct.
Please help me out. The link I have included is a donate form with multiple options. Scroll down and you'll see what I mean.Page URL:
- JotForm SupportNeilVicenteAnswered on June 04, 2011 at 02:18 AM
Use iframe codes instead of Embed <> codes for your form.
To get your form's iframe embed codes
1. Go to Setup & Embed tab
2. Click Embed Form
3. Click iFrame
4. Copy the codes provided in the succeeding screen
Let me know how this works out for you. Feel free to ask around the forum if you have other questions in mind. Thank you.
- geekwithalifeAnswered on June 04, 2011 at 09:35 AM
Works a little better, but there still seems to be a little too much space on the bottom. Is there a way I can get rid of those extra 10 or 20 pixels hanging past the submit button?
- JotForm SupportNeilVicenteAnswered on June 04, 2011 at 11:28 AM
Unfortunately, that is an issue with the way Chrome interprets and displays iframes. After trying out various settings to make your form look uniform on both Chrome and Firefox, I have still failed. I tried adjusting the height of the iframe so the space is gone in Chrome but in FF and IE the form got cut off, effectively hiding the submit button.
It looks like a minor issue though so I don't think it would affect the performance of your form with regards to getting submissions/leads.
The good thing is that we were able to reduce a significant amount of white space under your form using the iframe codes.
EDIT: Looks like our colleague, Wayne, found a solution for you.
- JotForm SupportabajanAnswered on June 04, 2011 at 11:40 AM
There are three style declarations causing this extra space: The paragraph within which the embedded form is wrapped and the empty paragraph immediately following that one both have bottom margins measuring 14 pixels in height, and the division on Line 403 within which both paragraphs reside has a bottom padding of 10 pixels.
As far as the empty paragraph is concerned, unless you intend to fill it with content, simply removing it will solve part of the problem.
Adding style="margin-bottom:0;" to the paragraph containing the embedded form will solve another part of the problem.
Lastly, adding style="padding:0;" to the division will get rid of that element's bottom padding.
Hopefully these adjustments remove the unwanted extra space under your form. If not please let us know and we'll see what other solutions we can cook up for you.
UPDATE: After just comparing the original and updated versions of the page on my browsers: IE 8, Chrome 11, Firefox 4, Opera 11 and Safari 5, I discovered that although the unwanted space appears to be reduced by a similar amount in each browser, it's still too much in IE and Opera.
- flydiscountAnswered on November 15, 2011 at 05:55 AM
I have problems similar with your forms, does not look good in explorer but in chrome, i use a frame does not help me, when i put two fields next to each other look bad, and not in the order in which I can put how fix this?
this is my web page:http://flydiscount.biz/
- JotForm SupportabajanAnswered on November 15, 2011 at 07:00 AM
In which version of Internet Explorer are you seeing the problem? For some reason, I'm not seeing any difference between how the form at the link appears in Chrome 15 and IE 6 to 9, all on Windows. The only difference I noticed was that the entire content of the page was centered in IE while it was on the left in Chrome.
- flydiscountAnswered on November 15, 2011 at 07:15 AM
Hello, thanks for replying, the problem exists in that the 3 drop down boxesdo not line up alongside each other in explorer, I use the explorer version 8
- JotForm SupportidarktechAnswered on November 15, 2011 at 08:46 AM
I have checked your website on the said browser version and wasn't able to replicate the issue just like what my colleague, Abajan, has explained. But, when I tried switching the browser into Compatibility View, by clicking on the compatibility view button it aligned the dropdown boxes vertically. Can you try switching/unswitching your browser into compatibility view mode if that makes any differences for you? Please checked my screen below:
We'll await for your feedback. Thank you so much!
- flydiscountAnswered on November 16, 2011 at 07:55 AM[image: FLYDDISCOUNT.png]
Hello, thanks for replying, the problem exists in that the 3 drop down
boxesdo not line up alongside each other in explorer, I use the
Flydiscount.biz una filiale di FlyDiscount.Corporation e opera nel
settore del turismo dal 2006 , sostenuto da fornitori di viaggi top e
allegata alle norme IATA e le compagnie aeree
Registro FlyDiscount Corporation public number 6623 MF 73194 Doc.1951874
2011/11/15 JotForm Support Forum
- JotForm SupportabajanAnswered on November 16, 2011 at 08:36 AM
If you mean the non-linear and "stair stepping" appearance, this is caused by IE being in Compatibility mode. Please click the button indicated by my colleague to return to normal mode.