Jquery UI datepicker ugly when used from google CDN

Question

Hi all,

I am using Jquery for the first time. It is exciting, but I got some layout problems.

First things first, here is the site I am developing: http://davedev.com.br/projects/jdc/v1/pt/reserva.php (it is on brazilian portuguese, but the field I refer to is labeled "Data").

OK, so I am using Jquery and Jquery UI, as well as Le Frog theme from google CDN as you can see from site's source code.

It works well, with a few layout problems:

1 - Just entering the site, makes the page footer to be padded. This padding disappears when field "data" is clicked and the datepicker shows up. This means... while the client does not click that field, we get an ugly padded footer.

2 - the datepicker itself does not display well, with some dates on right side of the datepicker floating out.

Both statements are true for Firefox 3.6.7 and Opera 10.60. On Chrome it displays just fine.

Any ideas on how fix those problems?

Answer 1

I got the problem. Some CSS rules from Jquery UI theme got simple overriden by my stylesheet rules. I mean, for example color property. I have a declaration on top of my CSS file. Some rules inside CSS theme has that property set, but all other elements which does not have it, got affected by my stylesheet rules.

Whatever, I just set some rules on my stylesheet (width and color), and got it working fine.

The other problem, the padded footer, was solved as well. It was the datepicker from jquery ui. As it starts, it appends a void div into the document. I just made the initialization different. Instead of just calling directly the datepicker function, I added an event listener to Data field, so datepicker is initiated just when it is clicked, and the layout isn't broken anymore when the page loads.

And, yes, I am using some HTML5, as well as CSS3. These stuff rocks.