jQuery UI Dialog - Cannot see the closeText

Question

I'm trying to make a simple Dialog - no title just the word 'Close' and the X in the top right hand corner. My text etc. will then go underneath.

However I fiddle with it I can't ever get the closeText attribute to display - I can see it in FireBug but it either doesn't appear, or a couple of characters appear under the X graphic.

Answer 1

Just do this (type it as it is, wherever you want to create a dialog),

$('.my-selector').dialog({closeText: 'Close'});
$('span.ui-icon').css({'text-indent': '20px','overflow': 'visible', 'line-height': '16px'});
$('.ui-dialog-titlebar-close').css({'text-decoration':'none', 'right':'45px', 'height':'21px', 'width': '20px'});
$('.ui-widget').css({'font-size': '12px'});

Here I am editing the API's CSS properties through jQuery.

Answer 2

Actually the problem is the jQuery UI CSS and jQuery Dialog itself.

The jQuery UI Dialog does the following with whatever you pass in as closeText.

• it creates a <span></span> which contains your closeText
• sets the styles ui-icon and ui-icon-closethick' on it

The span is actually always created, no matter if you pass in closeText or not. It is used to display the x-closing-image.

Now looking into the default jQuery UI CSS we find for ui-icon

...
text-indent: -99999px;
width: 16px;
height: 16px;
...

Thus jQuery sets the text but the browser will never show it (text-indent: -99999px) and region too small for any text.

So what I did is

//open dialog
$("#dialog").dialog({ closeText: 'Close me' });

//get the automagically created div which represents the dialog
//then get the span which has `ui-icon-closethick` class set (== contains closeText)
var closeSpan = $("div[role='dialog'] span.ui-icon-closethick");

//prepend a span with closeText to the closing-image
closeSpan.parent().before(
    '<span style="float:right;margin-right:25px">'+
    closeSpan.text()+
    '</span>'
);

Check this http://jsbin.com/ibibe/ for a working example

Answer 3

It sounds like you have not included the necessary jQuery UI CSS files, or there are some paths set incorrectly. Take a look at a working example using firebug and check to make sure all of the required files are being downloaded properly and that your paths are correct.

Answer 4

this thread is a bit old... found via Google while searching for a solution to this problem.

like jitter explained, the problem is in how jQuery UI CSS handles the closeText option.

this from from jQueryUI @ jqueryui.com/demos/dialog/#option-closeText

(closeText) Specifies the text for the close button. Note that the close text is visibly hidden when using a standard theme.

What I did is the following:

// added a class to the dialog
$('.my-selector').dialog({dialogClass:'myclass'});

// jQuery UI CSS sets span.ui-icon to
// .ui-icon {display: block; text-indent:-99999px; overflow: hidden; background-repeat: no-repeat; }
// and .ui-icon { width: 16px; height:16px; background-image: url(....); }
// so unset default settings using the added class as selector:
$('div.myclass span.ui-icon').css({'display': 'inline', 'width': '100%', 'height':'100%', 'text-indent': 0,'overflow': 'visible'});

// now get the width of span.ui-icon
var uiIconSpanWidth = $('div.myclass span.ui-icon').width();

// calculate negative 'text-indent'
var offset = 5; // set offset
var textIndent = -(uiIconSpanWidth + offset);
textIndent = textIndent + 'px'; 

// reset css using textIndent as the value for the text-indent property
// (.. added 'line-height' and set its value to match the 'height' property so that the text is aligned in the middle..):
$('div.myclass span.ui-icon').css({'display': 'block', 'width': '16px', 'height': '16px', 'text-indent': textIndent, 'line-height': '16px',});

worked for me. hope this helps

example: http://jsbin.com/iyewa5

Answer 5

Just use this CSS to show the close icon:

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    position: relative;
    right: 6px;
    top: 4px;
}

.ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text {
    padding: 0px;
    text-indent: 4px;
    margin-left: 18px;
position: relative;
}