Hello,
I'm trying to create a simple jquery dialog and it's cropping my OK button. Please see the attached image as an example:
You will see that the left side of the OK button is cropped by 1 or 2 pixels.
This only happens in Chrome.
Here is my code for setting up the dialog:
showInfoDialog: function (errorMessage, title, okCallback, cancelCallback, okButtonText, cancelButtonText)
{
var body = $("<body>");
var infoDialog = $("<div id='infoDialog' class='ahsDlg' style='height: auto'></div>").appendTo(body);
$("<img id='infoDialogIcon' style='padding-right: 10px' src='images/info.jpg'></img>").appendTo(infoDialog);
$("<label id='infoDialogText'></label>").html(errorMessage).appendTo(infoDialog);
if (typeof (title) == "undefined"
|| title == null
|| title == "")
{
title = "Information";
}
if (typeof (okButtonText) == "undefined"
|| okButtonText == null
|| okButtonText == "")
{
okButtonText = "OK";
}
var ButtonArray = [
{
text: okButtonText,
click: function ()
{
$(this).dialog("close");
if (okCallback != null)
{
okCallback();
}
}
}];
if (typeof (cancelButtonText) != "undefined"
&& cancelButtonText != null
&& cancelButtonText != "")
{
ButtonArray.push(
{
text: cancelButtonText,
click: function ()
{
$(this).dialog("close");
if (cancelCallback != null)
{
cancelCallback();
}
}
});
}
infoDialog.dialog({
"title": title,
"resizable": false,
"height": "auto",
"modal": true,
"width": "600px",
"open": function(event, ui) { $(".ui-dialog-titlebar-close").hide(); },
"close": function ()
{
infoDialog.remove();
delete infoDialog;
},
"buttons": ButtonArray
});
}