Rip's Domain

JQuery: datePicker Plugin bug with IE and table cells *Solution*

Posted in Jquery by rip747 on November 3, 2006

I submitted the following code to the JQuery discussion list claiming that there was a problem with the datePicker plugin and using it in a table cell with IE. The code below will show the problem.

BIG Sorry for the hot linking in the code below but I wanted to make sure that I was using the exact same code the author of the plugin is using.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
http://www.w3.org/TR/html4/loose.dtd“>
<html>
<head>
<title>test</title>
<link href=”http://kelvinluck.com/assets/jquery/datePicker/styles.css” rel=”stylesheet” rev=”stylesheet”/>
<script type=”text/javascript” src=”http://kelvinluck.com/assets/jquery/datePicker/jquery.js”></script>
<script type=”text/javascript” src=”http://kelvinluck.com/assets/jquery/datePicker/dom_creator.js”></script>
<script type=”text/javascript” src=”http://kelvinluck.com/assets/jquery/datePicker/datePicker.js”></script>
<script type=”text/javascript”>
$.datePicker.setDateFormat(‘mm/dd/yyyy’);
$(function(){
// bind datePicker
$(“.jquery-datePicker”).datePicker();
});
</script>
</head>
<body>
<h1>Date Picker test</h1>
<form action=”#”>
<fieldset>
<legend><strong>Table Cell Test:</strong></legend>
<table>
<tr><td>From: <input class=”jquery-datePicker” name=”fromdate” type=”text” size=”10″ maxlength=”10″/></td></tr>
<tr><td>To: <input class=”jquery-datePicker” name=”todate” type=”text” size=”10″ maxlength=”10″/></td></tr>
</table>
</fieldset>
<br>
<fieldset>
<legend><strong>Table Cell with inner DIV Test:</strong></legend>
<table>
<tr><td>From: <div style=”position:fixed;”><input class=”jquery-datePicker” name=”fromdate” type=”text” size=”10″ maxlength=”10″/></div></td></tr>
<tr><td>To: <div><input class=”jquery-datePicker” name=”todate” type=”text” size=”10″ maxlength=”10″/></div></td></tr>
</table>
</fieldset>
<br>
<fieldset>
<legend><strong>Div Test:</strong></legend>
<div>From: <input class=”jquery-datePicker” name=”fromdate” type=”text” size=”10″ maxlength=”10″/></div>
<br style=”clear:both;”>
<div>To: <input class=”jquery-datePicker” name=”todate” type=”text” size=”10″ maxlength=”10″/></div>
</fieldset>
</form>
</body>
</html>

Trying to code above, you will see that when you click on the calendar icons, the pop-up calendar will not display in IE in the first two examples.
For some reason this didn’t sit right with me because I kept browsing the internet and found that the author of the plugin was following the solution into getting absolute position divs working in a table cell with IE. Basically this involves having a wrapper div with a position:relative around the div with the position:absolute (shown below).

<div style=”position:relative”><div style=”position:absolute”></div></div>

So since he was using this, I knew that there had to be something else I was missing and the internet was telling me. After jerking around I found the problem.

Turns out that in order to actually get this trick to work (WHICH NO ONE MENTIONS) in IE, any tables that are parents of the div need to have a the WIDTH defined. So using the code above, all I had to do is add a width:”100%” to the tables and the plugin worked.

After I found this out, I quickly canceled my posting to the JQuery discussion list. This will teach me to jump to conclusions and the rest of the world to document fully any work arounds or fixes they come up with.

7 Responses

Subscribe to comments with RSS.

  1. Rey Bango said, on November 5, 2006 at 2:49 pm

    haha. Dude, the jQuery guys are cool so either way, they would’ve hooked up. BTW, what email do you post under on the jQuery list?

  2. rip747 said, on November 5, 2006 at 3:00 pm

    @rey

    Unfortunatly I’m not on the Jquery mailing list as I can’t stand mailing list. To be honest I don’t understand why they just don’t use google groups and post all the stuff there. The biggest problem that I have with mailing list is that you can’t search through past posts unless you create your own interface to them.

  3. Rey Bango said, on November 5, 2006 at 8:33 pm

    Have you checked out the Nabble forum?

    http://www.nabble.com/JQuery-f15494.html

    Rey…

  4. Kelvin Luck said, on November 6, 2006 at 10:43 am

    Hi,

    I’m the author of the date picker plugin. I’m really busy at the moment so haven’t been able to keep up with the traffic on the mailing list so didn’t see your post there… Just saw this post on fullasagoog now…

    Thanks for the headsup on problems using the date picker in a table cell – that’s obviously something I haven’t tried doing yet. When I get a chance I’ll look into the problem and see if there is a more elegant solution and will provide a note to warn people about the problem.

    Any other issues feel free to contact me through the comments or feedback form on my site which I can keep on top of easier than the jQuery mailing list,

    Cheers,

    Kelvin🙂

    p.s. since we are talking abuot the date picker plugin we may as well link to it!

  5. rip747 said, on November 6, 2006 at 12:11 pm

    @Ray,

    I’ve seen the links to Nabble around in the mailing list. I need to check out further.

  6. rip747 said, on November 6, 2006 at 12:14 pm

    @Kelvin,

    I can’t believe that I didn’t even put a link to your plugin in my post. I feel like such a moron. I’ve updated the post with a link.

  7. rip747 said, on November 7, 2006 at 9:58 am

    @Rey,

    I’m on Nabble.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: