jQuery UI Dialog – missing close icon

jQuery UI Dialog – missing close icon

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 create 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:

Title

to the code generated on the Dialog Demo page:

Basic dialog

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. Thanks in advance.

Related:  Backbone.js - id vs idAttribute vs cid

Solutions/Answers:

Solution 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.

Solution 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.

Related:  Where do global npm packages get installed on Ubuntu [closed]

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://stackoverflow.com/a/23428433/4660870)

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

Solution 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>");
    }
});

Solution 4:

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.

Solution 5:

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;
    }
    

Solution 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

Related:  Access last element of a TypeScript array