Jquery items rendering improperly

Question

I am using jqueryui api's from google, but the items I am using are rendering improperly. Here is my referencing:

<script
    type="text/javascript"
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script
    type="text/javascript"
    src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script>

I literally just copy-pasted the code for the modal form dialogue, found here: http://jqueryui.com/demos/dialog/#modal-form

And my datepicker code is:

$(document).ready( function() {
    $( "#datepicker" ).datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat: "MM d, yy"
    }
    );
});

However, these items rending without any discernible background, as shown in the screenshots. I have been desperately trying to figure out why. Thanks. enter image description here

I think your css is getting conflict with your Jqueru ui.css — coolguy, Jun 06 '12 at 02:46

score 3 · Accepted Answer · answered Jun 06 '12 at 02:46

3

Are you using a jQuery theme CSS? The jQueryUI demo page is. It's located here: http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css

answered Jun 06 '12 at 02:46

Robert Harvey

178,213
47
333
501

Yep, you need to also include the CSS that goes along with the JS. If you are including it already, then it is not loading correctly. Check your browser console for information about files not being loaded correctly etc. – Blair McMillan Jun 06 '12 at 02:48
That was it. I feel derpy. Thanks. Now I just need to filter what is useful and what is not... – MirroredFate Jun 06 '12 at 02:48

score 0 · Answer 2 · edited May 23 '17 at 10:30

0

You need to reference the jquery UI CSS files, you can get them as a theme from the jquery UI website. You should also look at this and this.

edited May 23 '17 at 10:30

Community

1
1

answered Jun 06 '12 at 02:49

Dimitar Dimitrov

14,868
8
51
79

Jquery items rendering improperly

2 Answers2