Show Close Button in Right side of jQuery Dialog

Question

I have created a jQuery Dialog as in this Demo. It is working properly. close button is display in right side in there. but on my site, running on localhost, close button is display in left side as in below image.

How can i solve this ?

Close Button Style

<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" role="button" aria-disabled="false" title="close">
<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
<span class="ui-button-text">close</span>
</button>

Answer 1

The difference between your example files and the jsFiddle demo is the the jsFiddle includes a jQueryUI theme which is adding some CSS rules to the <button>.

By adding any jQueryUI theme to your demo, it corrects the problem. For example, including:

<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel='stylesheet' />

adds the style:

.ui-dialog .ui-dialog-titlebar-close {
    position: absolute;
    right: .3em;
    top: 50%;
    width: 21px;
    margin: -10px 0 0 0;
    padding: 1px;
    height: 20px;
}

which includes position: absolute. Without position, the right: 0 that I added in the other question Hide Title bar and Show Close Button in jQuery Dialog has no effect, which explains why the button appears on the left, since that is where it would naturally appear in normal flow.

So if you are not using a jQueryUI theme, then you need to add position: absolute to the close button's rules, like this:

.ui-dialog .ui-dialog-titlebar-close {
    position: absolute;
    right: 0;
}