CODEWITHSUNDEEP
jqueryjquery-uidatepicker
Bkress
Bkress

Reputation: 332

Previous and Next buttons are displayed on new lines with jQuery UI datepicker

This is happening in Opera 11, Firefox 3.6.13, and IE 8. On all of the datepickers I create the previous and next buttons are being displayed on their own line above the month and year. This happens in both my custom rolled theme, and using UI Lightness which I downloaded fresh and has no custom CSS added. I am using jQuery UI version 1.8.9 and jQuery 1.4.3. I have reproduced it on jsFiddle using UI 1.8.7 and jQuery 1.4.4 as well.

JS Fiddle Example

My Code:

$(document).ready(function() {
    var dates = $('.date').datepicker();
});

Html:

<html>
    <head>
    </head>
    <body class="ui-widget">
        <div id='mainApplication' class="ui-widget">
            <div id="menuBar" class="ui-widget">
                <br />
                <span><strong>Start Date:</strong></span><br>
                <input type="text" id="start" class="date"><br>
                <span><strong>End Date:</strong></span><br>   
                <input type="text" id="end" class="date"><br>
            </div>
        </div>
    </body>
</html>

Upvotes: 3

Views: 2520

Answers (1)

Can&#39;t Tell
Can&#39;t Tell

Reputation: 194

Looks like a css problem. If you compare the css(using firebug) of the demo example and what you have written you will see that the css is different. If you add the css file "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/base/jquery-ui.css" by URL through "Add Resources" you will get the correct layout.

Upvotes: 2

Related Questions