JQuery UI Datepicker css looks very buggy

Question

I'm using the JQuery UI Datepicker from here: https://jqueryui.com/datepicker/. This is what my implementation looks like:

Includes. In my header:

<!-- JQuery -->
<script src="http://cdn.jsdelivr.net/webjars/jquery/2.1.4/jquery.min.js"></script>

<!-- Bootstrap CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<!-- Include Single Date Picker -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css" />
<script src="http://cdn.rawgit.com/jquery/jquery-ui/1.10.4/ui/jquery.ui.datepicker.js"></script>
<script id="mobile-datepicker" src="http://cdn.rawgit.com/arschmitz/jquery-mobile-datepicker-wrapper/v0.1.1/jquery.mobile.datepicker.js"></script>

HTML. I've got two date pickers up at the same time:

<!-- Include Single Date Picker -->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<td><input th:field="*{dateFrom}" style="border-radius: 4px; padding: 11px 11px 11px 11px; width: 100%;" type="text" class="datepicker" /></td>
 <td><input th:field="*{dateTo}" style="border-radius: 4px; padding: 11px 11px 11px 11px; width: 100%;" type="text" class="datepicker" /></td>

Javascript. At the bottom of my page:

<!-- Initialize Date Picker -->
<script type="text/javascript">
$( function() {
    $( ".datepicker" ).datepicker();
});
</script>

Why does my calendar look so messed up?

It's some css. Could you provide a jsfiddle ? I'll correct it. — Sandwell
– Sandwell, Commented Apr 20, 2017 at 12:31
@Sandwell I began one here: jsfiddle.net/#&togetherjs=mmRTK5zow3 — Martin Erlic
– Martin Erlic, Commented Apr 20, 2017 at 12:36

Daniel · Accepted Answer · 2017-04-20 12:40:40Z

1

Looks like you have padding-right on your td somewhere in the code, try to inspect in your developer tools and see where the .ui-datepicker td {border: 0; padding:1px } is overridden

answered Apr 20, 2017 at 12:40

Daniel

4916 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Martin Erlic Over a year ago

I've tried looking everywhere. Can't even override the padding on the class. Must be some kind of bootstrap/jquery-ui.css incompatability...

Daniel Over a year ago

what does your inspector look like when you right click and press inspect on one of your td:s? is the .ui-datepicker td{padding:1px} crossed out?

Martin Erlic Over a year ago

The problem was that in my main style.css I had a right margin on EVERY anchor a. Small mistake that wouldn't have ever shown up in the jquery-ui css.

Collectives™ on Stack Overflow

JQuery UI Datepicker css looks very buggy

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related