jQuery UI Dialog - Cannot see the closeText

Question

Hi chaps,

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.

I'm not very good with CSS to a cut and paste example would be very helpful.

Cheers,

Duncan Spence

Answer 1

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

Jitter nailed it, perfect, other solutions only provide a means to hide the 'X', but not actually set the text (I was wondering why closeText attrib was not doing anything)

Thanks!

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