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   lt div class  quot ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix quot  gt       lt spanid  quot ui-id-2 quot  class  quot ui-dialog-title quot  gt Title lt  span gt       lt button class  quot ui-dialog-titlebar-close quot  gt  lt  button gt   lt  div gt   To the code generated on the Dialog Demo page   lt div class  quot ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix quot  gt       lt span id  quot ui-id-1 quot  class  quot ui-dialog-title quot  gt Basic dialog lt  span gt       lt button class  quot ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close quot  role  quot button quot  aria-disabled  quot false quot  title  quot close quot  gt           lt span class  quot ui-button-icon-primary ui-icon ui-icon-closethick quot  gt  lt  span gt           lt span class  quot ui-button-text quot  gt close lt  span gt       lt  button gt   lt  div gt   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   quot  summary container quot       title  this title        closeText   quot Close quot       width  this width      position            my   quot center top quot           at    quot center top  quot   window innerHeight  1            collision   quot none quot             modal  false      resizable  false      draggable  false      show   quot fold quot       hide   quot fold quot       close  function            if KOVM areaSummary isVisible                 KOVM areaSummary isVisible false                        I m at a loss and need help

User · Answer

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   lt span class  ui-button-icon-primary ui-icon ui-icon-closethick  gt  lt  span gt

User · Answer

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

User · Answer

I found three fixes    You can just load bootsrap first  And them load jquery-ui  But it is not good idea  Because you will see errors in console  This   var bootstrapButton     fn button noConflict      fn bootstrapBtn   bootstrapButton    helps  But other buttons look terrible  And now we don t have bootstrap buttons  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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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    lt script src  http   code jquery com ui 1 10 3 jquery-ui js  gt  lt  script gt   lt script src  js bootstrap min js  gt  lt  script gt    it becomes   lt script src  js bootstrap min js  gt  lt  script gt   lt script src  http   code jquery com ui 1 10 3 jquery-ui js  gt  lt  script gt           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

User · Answer

As a reference  this is how I extended the open method as per  john-macintyre s suggestion    x000D   x000D    widget   ui dialog     ui dialog    x000D   open  function     x000D      this uiDialogTitlebarClose  x000D      html   lt span class  ui-button-icon-primary ui-icon ui-icon-closethick  gt  lt  span gt  lt span class  ui-button-text  gt close lt  span gt     x000D       Invoke the parent widget s open    x000D    return this  super    x000D     x000D      x000D   x000D   x000D

User · Answer

just add in css   ui-icon-closethick   margin-top  -8px important  margin-left  -8px important

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Just add in the missing    lt span class  ui-button-icon-primary ui-icon ui-icon-closethick  gt  lt  span gt   lt span class  ui-button-text  gt close lt  span gt

User · Answer

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

User · Answer

If you are calling the dialog   inside the js function  you can use the below bootstrap button conflict codes    lt div class  row  gt      lt div class  col-md-12  gt          lt input type  button  onclick  ShowDialog     value  Open Dialog  id  btnDialog   gt      lt  div gt   lt  div gt    lt div style  display none   id  divMessage  gt       lt table class  table table-bordered  gt           lt tr gt               lt th gt Firstname lt  th gt               lt th gt Lastname lt  th gt               lt th gt Age lt  th gt           lt  tr gt           lt tr gt               lt td gt Giri lt  td gt               lt td gt Prasad lt  td gt               lt td gt 25 lt  td gt           lt  tr gt           lt tr gt               lt td gt Bala lt  td gt               lt td gt Kumar lt  td gt               lt td gt 24 lt  td gt           lt  tr gt       lt  table gt    lt  div gt      lt script type  text javascript  gt      function ShowDialog                 if  typeof   fn bootstrapBtn    undefined                   fn bootstrapBtn     fn button noConflict                           divMessage   dialog               title  Employee Info               modal true                        lt  script gt

[javascript] jQuery UI Dialog - missing close icon

Examples related to javascript

Examples related to jquery-ui

Examples related to jquery-ui-dialog

Examples related to imagebutton