views:

24

answers:

1

Hi,

I have the following problem:

I made a form, wich extends from Zend_Form, where I added a ZendX_JQuery_Form_Element_Datepicker like you can see in this picture: http://i.imgur.com/uGFpH.png

But when I view that page in the browser, the datepicker seems to work, but the layout is messed up. See this picture: i.imgur.com/MuFSQ.png

You can see that the datepicker is too small and the prev/next buttons are not shown correctly. I've tried fixing this with css:

.ui-datepicker-div { width: 200px; } .ui-datepicker-calendar { width: 200px; }

This helps a little, as you can see in this picture:

i.imgur.com/v31Nw.png

But as you can see there's still a problem with the prev/next buttons. Anyone an idea how I could fix this?

Thank you very much in advance...

UPDATE:
I fixed my problem by including another css file. Because I was using the Google CDN for jquery and jqueryui, I had to use the CDN also for including the css. So by adding the following line, I solved my problem: $this->jQuery()->addStyleSheet('http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/themes/smoothness/jquery-ui.css');

A: 

You have some external CSS interfering, something affecting all table cells most likely, possibly <div> and <a> elements as well. Without a link to the actual page I can't say...but it's definitely a CSS issue, where your styles are overriding the padding/margins jQuery UI sets.

Nick Craver
Hi Nick, thank you for your response. I'm working with the 960 grid system and I think that caused the wrong width of the datepicker, because that part of the problem was solved when I changed the order of my css file includes (the jquery css last). However that didn't seem to solve the prev/next-button problem, so I left out any other css but still no luck. The buttons won't get on their right spot. This page is not online, so I can't show you live, but thanks again for your response. Greetz
Brecht
@Brecht - ah there you go...I haven't used 960 with jQuery UI but I can easily see how that styling wouldn't get along :)
Nick Craver