Iframe and calender problem WordPress
- SOLVED
Hi,
I wonder how I can fix this iframe so the calender does not open in the iframe. I don´t want to have to increase the height of the iframe in order to view the calender.
<iframe style="height: 65px; width: 700px;" src="http://www.booking.com/general.html?tmpl=flexi_product;aid=371464&ss=Santa Monica" height="65" width="700" frameborder="0"></iframe>
http://www.santamonicahotelbooking.com/hotel/
Thanks!
Charlotte
Answers (4)
Eric P. answers:
I think most of your answers here aren't even trying to click in the date fields on the search.
With the iframe solution, you'll always risk getting scroll bar(s) on some browser platforms/window sizes.
Hardcoding the search form onto your site isn't a good option either. When the provider updates/upgrades their search form, your site could become broken, and it definitely won't implement the upgrades/updates.
I've sent you a PM with an alternative solution, and if you want, I can develop a plugin file to actually implement that solution for you. It's a bit beyond the scope of the reward offered for this question.
ADDED UPDATE:
Maybe there is a css solution to this. Try this, and try to get rid of the <p>...</p> around the search iframe.
<div style="position:relative;top:0;left:0;height:40px;width:900px !important;">
<iframe style="border:0px;overflow: hidden;position:absolute;top:0;left:0;width:900px !important;height:250px" src="http://www.booking.com/general.html?tmpl=flexi_product;aid=371464&ss=Santa Monica&wmode=transparent"></iframe>
</div>
I've attached a screenshot of the results of this:
Oh, and the height of the div is the space for the main line of the form. The height of the iframe must be tall enough for the calendar to drop down within that iframe.
Oh, and I removed a couple of redundant, deprecated attributes from the <iframe> tag. style and src are the only needed attributes.
Eric P. comments:
Maybe there is a css solution to this. Try this, and try to get rid of the <p>...</p> around the search iframe.
<div style="position:relative;top:0;left:0;height:40px;width:900px !important;">
<iframe style="border:0px;overflow: hidden;position:absolute;top:0;left:0;width:900px !important;height:250px;scroll:no" src="http://www.booking.com/general.html?tmpl=flexi_product;aid=371464&ss=Santa Monica&wmode=transparent" height="auto" width="700"></iframe>
</div>
Eric P. comments:
I can't edit the follow up. Use the code in my first answer, with the attached image. The code in the followup has some deprecated (and redundant, conflicting) attributes on the <iframe> tag. The main answer has the correct, valid code.
Charlotte Raboff comments:
Yes. Thanks. This is working :)
Sachindra Narayan answers:
why use iframe for the entire search part??? remove the iframe, get the entire block on the same page and I guess it would work fine...else the height has to be equal to the height of the calendar when opened, i.e. 272px...it also gives you a horizontal scroller though this horizontal scroller can be done away with..
Charlotte Raboff comments:
But what shall I exactly write use in order to display the search box on my blog?
If I remove the iframe I have just an link...
Sachindra Narayan comments:
hey this one will do good...
<iframe width="700" height="272px" frameborder="0" src="http://www.booking.com/general.html?tmpl=flexi_product;aid=371464&ss=Santa Monica" style="width: 700px; overflow-x: hidden;"></iframe>
but the thing is, as the entire calendar is in iframe, it would have some space below the horizontal search bar inside..