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.
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.
<span></span> which contains your closeTextui-icon and ui-icon-closethick' on itThe 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
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.
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
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.
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;
}
