Question

I’ve been struggling with this form for a while now: http://www.thebeardmore.com/booking-mask/

I’m using Google Chrome for debugging.

When I click the ‘Calendar’ icon, the dates box appears, covering the input fields (nights/adults/children) underneath.

However, this also makes these fields completely invisible (visibility:hidden) from then on.

Can someone explain why this is happening and how I can stop it?

Thank you.

Answer 1

Basically the script hides any element (by setting visibility: hidden) which the calendar cover. This was, I believe, because of rendering problems in IE6. However, it causes problems in Chrome and IE8, so it’s worth probably disabling this behavior.

A couple of ways to do it:

1) Set visibility: visible inline:

<select id="nights" name="Length" style="visibility: visible">

2) (Preferable) Override the Calendar’s hideShowCovered method:

// At the top of your script
Calendar.prototype.hideShowCovered = function() {};