CODEWITHSUNDEEP
jqueryjquery-ui
Praful Bagai
Praful Bagai

Reputation: 17412

Icons missing in jQuery UI

I'm using Modal Form and Widgets from jQuery, but the icons does not appear. for eg the Cross (X) and Plus-Minus (+-) Icons.

When I load the page I et these errors.

"NetworkError: 404 NOT FOUND - http://127.0.0.1:8000/static/css/images/ui-bg_flat_75_ffffff_40x100.png"
ui-bg_...100.png

"NetworkError: 404 NOT FOUND - http://127.0.0.1:8000/static/css/images/ui-icons_222222_256x240.png"
ui-ico...240.png

"NetworkError: 404 NOT FOUND - http://127.0.0.1:8000/static/css/images/ui-bg_highlight-soft_75_cccccc_1x100.png"
ui-bg_...100.png

So, I downloaded the images, put it into the path specified, but then the +- icons appear twice at the extreme right and moreover only the column1 widgets are minimized. The Close X icon still not appears. Where I'm going wrong?

I would also like to know how to add remove widgets functionality?

Upvotes: 58

Views: 137366

Answers (11)

Steve Whitby
Steve Whitby

Reputation: 403

Having the right CSS and JS libraries helps, this solved it for me

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Upvotes: 1

BenW
BenW

Reputation: 1443

Just download it and save in your network location.

You can get it form the below.

https://code.google.com/p/vallalarblogs/downloads/detail?name=ui-bg_flat_75_ffffff_40x100.png&can=2&q=

reference: www.thedeveloperblog.com

Upvotes: 45

CrsCaballero
CrsCaballero

Reputation: 2348

You need downbload the jQueryUI, this contains de images that you need

enter link description here

Upvotes: 0

Alexei - check Codidact
Alexei - check Codidact

Reputation: 23108

I met a similar error after adding jQuery-ui-tooltip component using bower. It downloads js + css files only, so I had to manually add images.

A good source to find all the images (for all standard themes) is this CDN.

Upvotes: 0

Ishwar Lal
Ishwar Lal

Reputation: 654

I also got missing error image in JQUERY-UI. You can download images from https://github.com/sehmaschine/django-grappelli/tree/grappelli_2_4/grappelli/static/grappelli/jquery/ui/css/custom-theme/images

Upvotes: 5

Lucky
Lucky

Reputation: 17365

I saw in console that whenever I open my datepicker that I get 404 Not found error for this image file ui-bg_glass_75_e6e6e6_1x400.png

I downloaded the image from github and put it in my local under jquery-ui folder. Now the problem is solved.

Other image files found here:

https://github.com/julienw/jquery-trap-input/tree/master/lib/jquery/themes/base/images

Upvotes: 0

Zuks
Zuks

Reputation: 1307

I have put the images in a convenient zip file: http://zlab.co.za/lib_help/jquery-ui.css.images.zip

As the readme.txt file in the zip file reads: Place the "images" folder in the same folder where your "jquery-ui.css" file is located.

I hope this helps :)

Upvotes: 36

dra_red
dra_red

Reputation: 442

I found icons were not displaying due to a difference in the casing (ie upper case vs lower case). The CSS file was using "FFFFFF" while the actual file was using "ffffff". Icons displayed for me once I changed the case to match.

Upvotes: 0

Anoj
Anoj

Reputation: 945

you have workaround by setting background color instead of this missing icon. Here are the steps to follow:

  • open relevant 'jquery-ui-x.-.x.css' file
  • search for the missing file name in css file(eg: ui-bg_flat_75_ffffff_40x100.png")
  • Remove/comment the line that calls this background image
  • instead add the following line to replace the background color 'background-color: #ffffff'

That will probably work

Upvotes: 0

ekerner
ekerner

Reputation: 5848

They arent missing, the path is wrong. Its looking in non-existent dir 'img' for a file that is in dir 'images'.

To fix either edit the file that declares the wrong path or as I did just make a softlink like

ln -s images img

Upvotes: 2

klewis
klewis

Reputation: 8389

Yeah I had the same problem and it was driving me crazy because I couldn't find the image.

This may help you out...

  1. Look for a CSS file in your directories called jquery-ui.css
  2. Open it up and search for ui-bg_flat_75_ffffff_40x100.png.

You will then see something like this...

.ui-widget-content {
    border: 1px solid #aaaaaa;
    background: #ffffff url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x;
    color: #222222;
}

And comment out the background and save the CSS document. Or you can set an absolute path to that background property and see if that works for you. (i.e. background: #ffffff url(http://.../image.png);

Hope this helps

Upvotes: 14

Related Questions