jQuery UI Dialog - missing close icon

Question

I'm using a custom jQuery 1.10.3 theme. I downloaded every straight from the theme roller and I have intentionally not changed anything.

I created a dialog box and I get an empty gray square where the close icon should be:

I compared the code that is generated on my page:

<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
    <spanid="ui-id-2" class="ui-dialog-title">Title</span>
    <button class="ui-dialog-titlebar-close"></button>
</div>

To the code generated on the Dialog Demo page:

<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
    <span id="ui-id-1" class="ui-dialog-title">Basic dialog</span>
    <button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" role="button" aria-disabled="false" title="close">
        <span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
        <span class="ui-button-text">close</span>
    </button>
</div>

EDIT

The different parts of the code are generated by jQueryUI, not me so I can't just add the span tags without editing the jqueryui js file which seems like a bad/unnecessary choice to achieve normal functionality.

Here is the JavaScript used that generates that part of the code:

this.element.dialog({
    appendTo: "#summary_container",
    title: this.title(),
    closeText: "Close",
    width: this.width,
    position: {
        my: "center top",
        at: ("center top+"+(window.innerHeight*.1)),
        collision: "none"
    },
    modal: false,
    resizable: false,
    draggable: false,
    show: "fold",
    hide: "fold",
    close: function(){
        if(KOVM.areaSummary.isVisible()){
            KOVM.areaSummary.isVisible(false);
        }
    }
});

I'm at a loss and need help.

Doughy

Have you checked if the image file for the icon exists in your file system? – Wales

Yes, the icon image sheet exists and is in the correct location. – Doughy

Answer 1

I am late to this one by a while, but I'm going to blow your mind, ready?

The reason this is happening, is because you are calling bootstrap in, after you are calling jquery-ui in.

Literally, swap the two so that instead of:

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="js/bootstrap.min.js"></script>

it becomes

<script src="js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

:)

Edit - 26/06/2015 - this keeps attracting interest months later so I thought it was worth an edit. I actually really like the noConflict solution offered in the comment underneath this answer and clarified by user Pretty Cool as a separate answer. As some have reported issues with the bootstrap tooltip when the scripts are swapped. I didn't experience that issue however because I downloaded jquery UI without the tooltip as I didn't need it because bootstrap. So this issue never came up for me.

Edit - 22/07/2015 - Don't confuse jquery-ui with jquery! While Bootstrap's JavaScript requires jQuery to be loaded before, it doesn't rely on jQuery-UI. So jquery-ui.js can be loaded after bootstrap.min.js, while jquery.js always needs to be loaded before Bootstrap.

Spagyric

This fixed my problem. I included the resources in this order: 1) JQuery core 2)bootstrap 3)JQueryUI. Thanks for your help; better late than never! PS - you did blow my mind. – Doughy

Even later... Can you explain WHY bootstrap ordering has anything to do with it? – Mantelpiece

If you swap order Bootstrap come before Jquery UI then The Bootstrap tooltips will not work. – Dripping

Are you sure you've correctly implemented tooltips? It works fine for me. However from another stack thread: "to prevent jQuery UI from overriding bootstrap's or your custom style, you need to create a custom download and select the no-theme theme. That will only include jQuery UI's resets, and not overload bootstrap's style for various elements. While we're at it, some jQuery UI components (such as datepicker) have a native bootstrap implementation." https://mcmap.net/q/128823/-can-i-use-twitter-bootstrap-and-jquery-ui-at-the-same-time – Spagyric

Excellent! I wonder how yo have realized that its happening because of order!! – Wilterdink

Excellent in that it saved me the headache, but disturbing in that the two major libraries collide so easily....portends future grief for sure. – Samira

Issue still persists. I think it is a bug. – Conquer

I'm having a problem similar to @Dripping in that Bootstrap toggle buttons don't work either. – Reamer

I don't know why you called this solution "mind-blowing". It is normal for bootstrap and jQuery UI to be in conflict since they are maintained by two different groups. However, thanks for sharing this solution. This is why experience is something you cannot simply replace with knowledge. – Moor

While this isn't actually a good solution, I upvoted it because it gives a quick way to verify that this is the problem. I personally will use Raul Riveros' solution in the end because simply swapping the two scripts cause a lot of other, bigger problems. BTW, I was a tad mind blown when I saw it. – Ingham

If you don't want to change the order of Bootstrap and jQuery UI you can also fix the button: $.fn.bootstrapBtn = $.fn.button.noConflict(); https://mcmap.net/q/128824/-bootstrap-and-jqueryui-conflict – Bedraggle

Bootstrap's JS requires jQuery (#22658515). Changing the order will lead to exceptions when the browser starts to interpret the Bootstrap JS. – Lotuseater

@Lotuseater - JQueryUI is not JQuery the core file. You've confused the two in your comment. In this answer jquery would still take precedence on the two files. – Spagyric

@DavidG You are absolutely right! I overlooked the "ui" part on almost every occasion. Thanks for the clarification. – Lotuseater

Good one! Mind blown! – Mb

At the time of writing, re-ordering the script order didn't work. I used the noConflict method which seemed more logical. – Etymology

You saved my guessing machine from stackoverflow. Thanks – Welch

It's not fixing problem for me. – Maida

Swapping the order completely broke our website. $.fn.bootstrapBtn = $.fn.button.noConflict(); fixed the issue for me. – Jenijenica

Answer 2

This is a comment on the top answer, but I felt it was worth its own answer because it helped me answer the problem.

If you want to keep Bootstrap declared after JQuery UI (I did because I wanted to use the Bootstrap tooltip), declaring the following (I declared it after $(document).ready) will allow the button to appear again (answer from https://mcmap.net/q/128824/-bootstrap-and-jqueryui-conflict)

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

Thomasson

This is a pretty slick way of doing things without disturbing the calls much. +1 for the same. – Fritts

interfere with Button classes – Weld

The problem with this solution is this will break code where you want to use bootstrap button functionality, like button('loading'). In order to make sure that existing bootstrap button functionality still works, replace all references of bootstrap "button()" function calls with "bootstrapBtn()". (Yes, I know the code comments kind of imply this, but I thought it was worth explicitly saying it.) – Pass

Doesn't your editor complain about missing semicolons? – Upcoming

Answer 3

This appears to be a bug in the way jQuery ships. You can fix it manually with some dom manipulation on the Dialog Open event:

$("#selector").dialog({
    open: function() {
        $(this).closest(".ui-dialog")
        .find(".ui-dialog-titlebar-close")
        .removeClass("ui-dialog-titlebar-close")
        .html("<span class='ui-button-icon-primary ui-icon ui-icon-closethick'></span>");
    }
});

Tilsit

FYI to future readers, you can extend ui.dialog (link) so you don't have to duplicate this open functionality in every call. – Reamer

This worked fairly well. The X was a little bit further left than normal though...not sure exactly why. – Heathendom

Great solution! However in my case the removeClass(...) was unnecessary and was causing the misplaced X button to the left of the dialog window. Simply chaining the html() method to the find() method did the job. Thank you. – Preciosa

Great , I must upvote you. – Cabinetmaker

I added an example of the approach recommended by John MacIntyre here: https://mcmap.net/q/126159/-jquery-ui-dialog-missing-close-icon – Vallie

Answer 4

I found three fixes:

1. You can just load bootsrap first. And them load jquery-ui. But it is not good idea. Because you will see errors in console.

2. This:

   var bootstrapButton = $.fn.button.noConflict();
   $.fn.bootstrapBtn = bootstrapButton;
   

   helps. But other buttons look terrible. And now we don't have bootstrap buttons.

3. I just want to use bootsrap styles and also I want to have close button with an icon. I've done following:

   How close button looks after fix

   .ui-dialog-titlebar-close {
       padding:0 !important;
   }
   
   .ui-dialog-titlebar-close:after {
       content: '';
       width: 20px;
       height: 20px;
       display: inline-block;
       /* Change path to image*/
       background-image: url(themes/base/images/ui-icons_777777_256x240.png);
       background-position: -96px -128px;
       background-repeat: no-repeat;
   }
   

Aflutter

Excelent! If you don't have the image file or any specific theme installed, you can get it here: jqueryui.com/themeroller. Download the theme and select the components you need (in this case, dialog). Then download, extract, open the theme or image folder and copy the image file that matches your theme into your project. Then change the reference in the css provided by Yauheni in his answer. – Lengthwise

Your point 3 solved the issue for me. I just have to make minor adjustment in the width, height and background-position to make the button look how I wanted. Thank you. – Sena

Answer 5

This is reported as broken in 1.10

http://blog.jqueryui.com/2013/01/jquery-ui-1-10-0/

phillip on January 29, 2013 at 7:36 am said: In the CDN versions, the dialog close button is missing. There’s only the button tag, the span ui-icon is missong.

I downloaded the previous version and the X for the close button shows back up.

Cyanocobalamin

I'm using 1.10.3 but at least I feel less crazy now. I've chosen to just ignore it for now. Thanks. – Doughy

I can confirm this is still an issue in 1.10.3 – Goodhumored

Same issue in 1.12.1 – Massproduce

Answer 6

I had the same exact issue, Maybe you already chececked this but got it solved just by placing the "images" folder in the same location as the jquery-ui.css

Randolf

Actually this is the response that solved the problem for me, or at least clarified it. I had a test page that was referencing the online (ie, code.jquery.com/...) copy of jquery-ui.css and in that case the "X" showed up. However in my actual project page, which had the .css file in a local css folder, the "X" was not showing. Copying the "images" folder to my local css folder, along side my .css file, fixed the issue. – Aphaeresis

Answer 7

I got stuck with the same problem and after read and try all the suggestions above I just tried to replace manually this image (which you can find it here) in the CSS after downloaded it and saved in the images folder on my app and voilá, problem solved!

here is the CSS:

.ui-state-default .ui-icon {
        background-image: url("../img/ui-icons_888888_256x240.png");
}

Eiger

Answer 8

Even loading bootstrap after jquery-ui, I was able to fix using this:

.ui-dialog-titlebar-close:after {
   content: 'X' !important;
   position: absolute;
   top: -2px;
   right: 3px;
}

Instinct

Answer 9

I know this question is old but I just had this issue with jquery-ui v1.12.0.

Short Answer Make sure you have a folder called Images in the same place you have jquery-ui.min.css. The images folder must contains the images found with a fresh download of the jquery-ui

Long answer

My issue is that I am using gulp to merge all of my css files into a single file. When I do that, I am changing the location of the jquery-ui.min.css. The css code for the dialog expects a folder called Images in the same directory and inside this folder it expects default icons. since gulp was not copying the images into the new destination it was not showing the x icon.

Spondee

Answer 10

I'm using jQuery UI 1.8.17 and I had this same issue, plus I had additional css stylesheets being applied to things on the page, including the titlebar color. So to avoid any other issues, I targeted the exact ui elements using the code below:

$("#mydialog").dialog('widget').find(".ui-dialog-titlebar-close").hide();    
$("#mydialog").dialog('widget').find('.ui-icon ui-icon-closethick').hide();

Then I added a close button in the properties of the dialog itself: ...

modal : true,
title: "My Dialog",
buttons: [{text: "Close", click: function() {$(this).dialog("close")}}],
...

For some reason I had to target both items, but it works!

Mccleary

Answer 11

A wise man once helped me.

In the folder where jquery-ui.css is located, create a folder named "images" and copy the below files into it:

ui-icons_444444_256x240.png

ui-icons_555555_256x240.png

ui-icons_777620_256x240.png

ui-icons_777777_256x240.png

ui-icons_cc0000_256x240.png

ui-icons_ffffff_256x240.png

and the close icon appears.

Presto

Answer 12

With jQuery UI - v1.13.2 - 2023-03-07

I solved the bad visualization about X with this script:

    open: function (event, ui) {
        $(this).closest(".ui-dialog")
        .find(".ui-dialog-titlebar-close")
        .removeClass("ui-dialog-titlebar-close")
        .html("<span class='ui-button-icon-primary ui-icon ui-icon-closethick'></span>")
        .attr("class","ui-button ui-corner-all ui-widget ui-button-icon-only ui-dialog-titlebar-close");
        }

Thank you @KyleMit (I upvote your answer)

Crossrefer

Answer 13

As a reference, this is how I extended the open method as per @john-macintyre's suggestion:

$.widget( "ui.dialog", $.ui.dialog, {
	open: function() {
		$(this.uiDialogTitlebarClose)
			.html("<span class='ui-button-icon-primary ui-icon ui-icon-closethick'></span><span class='ui-button-text'>close</span>");
		// Invoke the parent widget's open().
		return this._super();
	}
});

Sheet

Answer 14

  just add in css
 .ui-icon-closethick{
 margin-top: -8px!important;
margin-left: -8px!important;

}

Shearer

Answer 15

If you are calling the dialog() inside the js function, you can use the below bootstrap button conflict codes

 <div class="row">
   <div class="col-md-12">
       <input type="button" onclick="ShowDialog()"  value="Open Dialog" id="btnDialog"/>
   </div>
</div>

<div style="display:none;" id="divMessage">
    <table class="table table-bordered">
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Giri</td>
            <td>Prasad</td>
            <td>25</td>
        </tr>
        <tr>
            <td>Bala</td>
            <td>Kumar</td>
            <td>24</td>
        </tr>
    </table> 
</div>



<script type="text/javascript">
    function ShowDialog()
    {
        if (typeof $.fn.bootstrapBtn =='undefined') {
            $.fn.bootstrapBtn = $.fn.button.noConflict();
        }

        $('#divMessage').dialog({
            title:'Employee Info',
            modal:true
        });
    }
    </script>

Doggett

Answer 16

Just add in the missing:

<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
<span class="ui-button-text">close</span>

Override

I can't. I don't create that part of the html, jquery does. I added more information to my question to clarify this point. – Doughy

Answer 17

I am having this issue as well. Here is the code that is getting inserted for the close button:

When I turn off the style="display:none:" on the button, then the close button appears. So for some reason that display:none; is getting set, and I don't see how to control that. So another way to address this might be to simply override the display:none. Don't see how to do that though.

I note that the answer posted by KyleMit does work, but makes a different looking X button.

I also note that this issue does not affect all dialogs on my pages, but just some of them. Some dialogs work as expected; other have no title (ie, the span containing the title is empty) while the close button is present.

I am thinking something is seriously wrong and it might not the time for 1.10.x.

But after further work, I discovered that in some cases the titles were not getting set properly, and after fixing that, the X close button reappeared as it should be.

I used to set the titles like this:

('#ui-dialog-title-ac-popup').text('Add Admin Comments for #' + $ac_userid);

That id does not exist in my code, but is created apparently by jquery from ac-popup and ui-dialog-title. Kind of a kludge. But as I said that no longer works, and I have to use the following instead:

$('.ui-dialog-title').text('Add Admin Comments for #' + $ac_userid);

After doing that, the missing button issue seems to be better, although I am not sure if they are definitely related.

Elurd

Answer 18

Based on a previous answer and comment, this is how you can fix it for all instances of a jQuery UI Dialog by redefining the widget. This way you do not need to know the selector the dialog method was called on.

if (typeof $.ui.dialog !== 'undefined') {
  // Redefine UI Dialog widget.
  // See: https://learn.jquery.com/jquery-ui/widget- 
  factory/extending-widgets/#redefining-widgets
    $.widget( "ui.dialog", $.ui.dialog, {
      open: function() {
      // Call parent open() method
      // to open dialog.
      this._super();

       // Add missing markup and CSS.
       $(this.element[0]).closest(".ui-dialog")
         .find('.ui-dialog-titlebar')
         .css('display', 'flex')
         .find('.ui-dialog-title')
         .css('flex', 1)
         .siblings('.ui-dialog-titlebar-close')
         .removeClass('ui-dialog-titlebar-close')
         .css('border', 'none')
         .css('outline', 'none')
         .css('background-color', 'transparent')
         .html("<span class='ui-button-icon-primary ui-icon ui-icon-closethick'></span>");
    }
  });
}

You may be able to remove the calls to css(). I found that I needed a bit of styling help in Bootstrap 5.

Vallie

Answer 19

we fixed it this way:

.ui-dialog-titlebar-close:after {
   content: "\002715";
}

Secor

Answer 20

I was facing same issue , In my case JQuery-ui.js version was 1.10.3, After referring jquery-ui-1.12.1.min.js close button started to visible.

Tyrelltyrian