CODEWITHSUNDEEP
javascriptjqueryjquery-uidatepicker
Jay
Jay

Reputation: 3082

jQuery datepicker prev and next buttons not showing, how to point at theme folder images in css

I have used the jQuery ui datepicker to successfully add a calendar control to my textbox, but the previous and next buttons are not visible although the containing tag works functionally when clicking

The how can I modify this to show the icons shown on the http://jqueryui.com/datepicker/ when these images are found within my web package at ..\Content\theme\base\images and not the locations shown below

.ui-widget-content .ui-icon {
background-image: url(images/ui-icons_222222_256x240.png);
}
.ui-widget-header .ui-icon {
background-image: url(images/ui-icons_222222_256x240.png);
}

Do I need to call the image within css in a similar fashion to how images are called from within my c# code? As in:

"@Url.Content("~/Content/theme/base/images/ui-icons_222222_256x240.png")"

Upvotes: 23

Views: 80142

Answers (6)

Jeanine Lindsay
Jeanine Lindsay

Reputation: 21

I had this same issue. I tried changing the relative urls in the jquery-ui files but the images still weren't showing. Instead I had to put the directives in my site.css file. My files are loaded by the BundleConfig.cs file.

I put relative path in my site.css file and the images started work.

.ui-icon,
.ui-widget-content .ui-icon {
    background-image: url("../../Scripts/lib/jquery-ui/images/ui-icons_444444_256x240.png");
}

Upvotes: 1

Underwaters
Underwaters

Reputation: 1

For anyone looking for the most simple answer,

  1. Go to the site JQuery UI and download the file with default settings.
  2. Extract the file.
  3. Copy the "images" folder and put it in you project in the same folder where the jQuery ui css resides and that will take care the problem.

Credits to Gullele's Corner, I just simply updated the procedure since the folder structure change (May 2019).

Upvotes: 0

Cipher
Cipher

Reputation: 2122

This is because you are mission ui-icons_444444_256x240.png image. You can Download that image from here link.

Now create a folder named - images and add that folder image inside that folder.

Example 

http://example.com/css/jquery-ui.min.css
http://example.com/css/images/ui-icons_444444_256x240.png

Upvotes: 1

Bassie
Bassie

Reputation: 10390

I noticed from the error message that the site was looking in:

http://site/Content/images/image.png

I'm not quite sure why, as from Mooseman's answer:

The link in the CSS file is relative to the CSS file, not the HTML file loading it.

It seems that the link was relative from site.css (which is contained in Content) rather than Jquery-ui.mincss, and so it obviously could not find the png.

After changing the paths in JQuery-ui.min.css to

themes/base/images/image.png

It now works perfectly.

Upvotes: 0

Francois Muller
Francois Muller

Reputation: 566

You are almost there.

Just ensure you change your url and add the "!important" at the end of the line.

This will allow you to add any image you wish.

    .ui-widget-content .ui-icon {
    background-image: url("../../images/ui-icons_222222_256x240.png")      
    !important;}
    .ui-widget-header .ui-icon {
    background-image: url("../../images/ui-icons_222222_256x240.png")   
    !important;}

Hope this works for you.

Upvotes: 3

Mooseman
Mooseman

Reputation: 18891

Make sure your jquery-ui.min.css is pointing to the correct file for the images. The console should show an error when you are attempting to load the icons.

For example, If this is the location of your CSS file: http://example.com/css/jquery-ui.min.css, then the icon file should be in http://example.com/css/images/ui-icons_222222_256x240.png. The link in the CSS file is relative to the CSS file, not the HTML file loading it.

Upvotes: 41

Related Questions