Jquery ui dialog buttons missing on first display of dialog

Question

I am displaying a modal dialog to get "delete this service" or "cancel" options. When I first click on the button that opens the dialog the two buttons are missing. The red x is icon is displayed in the upper right corner and displays the help text without having to hover over the icon.

If I close it and reopen the dialog both buttons appear as they should. I'm not seeing any errors in the console.

I'm using jquery 3.1.1 and jquery ui 1.12.1. I'm calling the dialog out of a toolbar built in paramquery grid.

$("#dialog-confirm").dialog({
    resizable: false,
    height: "auto",
    width: 400,
    modal: true,
    buttons: {
        "Delete this service": function () {
            var serviceid = grid.getRecId({rowIndx: rowIndx});
            $.ajax($.extend({}, ajaxObj, {
                context: grid,
                dataType: 'text',
                url: "/utilities/ajax_delete_service.php",
                data: {serviceid: serviceid},
                success: function () {
                    $("#services_grid").pqGrid("refreshDataAndView");
                },
                error: function () {
                    this.removeClass({rowIndx: rowIndx, cls: 'pq-row-delete'});
                }
            }));
            $(this).dialog("close");
        },
        Cancel: function () {
            grid.removeClass({rowIndx: rowIndx, cls: 'pq-row-delete'});
            $(this).dialog("close");
        }
    }
});

UPDATED: I've created a fiddle that shows the problem. Run the fiddle, click on the top row of the grid and select "Delete Service" The buttons don't show. close the dialog. Click on "Delete Service" again and the buttons show.

The function for displaying the dialog is at the top of the fiddle.

JSFiddle