CODEWITHSUNDEEP
javascriptjquerycssjquery-ui
user2879704
user2879704

Reputation:

Jquery-ui dialog box 'x' button image is not visible

I am doing a simple jquery-ui dialog application with my js,css code as,

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="jquery-ui.css">
  </head>
  <body>
    <div id="dialog">this is a dialog box</div>
    <script src="jquery.js"></script>
    <script src="jquery-ui.js"></script>
    this jquery ui is added.....
    <script>     
      $("#dialog").dialog() 
    </script>
  </body>
</html>

When i add a simple dialog box, the x mark inside the dialog's close button is not visible.

Am i missing inclusion of any image sprite file?enter image description here

Upvotes: 0

Views: 7513

Answers (4)

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

Alternatively, I think you have the bootstrap library. Some version of bootstrap and jquery-ui have conflict with the .button() method, and if your bootstrap.js is placed after jquery-ui.js, the bootstrap .button() overrides your jquery button and the jquery-ui 'X' image would then not show up.

This issue here might be helpful to know more!!

The below order works to showup your close button

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

The below causes issue

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

You can also run $.fn.button.noConflict() just before you call your dialog and everything should work fine!

Upvotes: 2

Deenadhayalan Manoharan
Deenadhayalan Manoharan

Reputation: 5444

Try this..

Include "sprite image" and if you put css file in project css folder means put image in image folder and add following changes

.ui-state-default .ui-icon {
    background-image: url("images/ui-icons_888888_256x240.png");//change path of image in css(jquery-ui.css)
}

Upvotes: 2

vdudouyt
vdudouyt

Reputation: 936

It looks very much like it wasn't able to load image resources for some reasons. Try to open your browser's network console and check it for any errors.

Perhaps it's trying to load the images from css/images/* rather than from the place that you're expecting for.

Upvotes: 0

stanze
stanze

Reputation: 2480

Might be you have forget to include the sprite image

Upvotes: 1

Related Questions