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.

jQuery Dialog

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>

@bishan, on changing this .ui-dialog .ui-dialog-titlebar-close from right:0; to left:0;, solved the problem in fiddle, so it may that, some other css/style is overwritting this style, — RONE, Jul 17 '13 at 04:30
`.ui-dialog .ui-dialog-titlebar-close { left:0; }` not working. — Bishan, Jul 17 '13 at 04:39
Can you _Right click_ -> _Inspect_ the close button and then find the `` parent element of the button in Chrome. Could you copy the _Computed Style_ in the Chrome Console and paste the output into the question? The element should look something like `close`. — andyb, Jul 17 '13 at 07:49
@andyb Updated post with style. there is no `` tag. there is a `button` tag. — Bishan, Jul 17 '13 at 08:31
Ah, you must be using a newer version of jQuery and/or jQueryUI - as the markup for the close button changed somewhere between v1.9.2 -> v1.10.3. It still doesn't explain why the button is on the left. Can you please _Inspect_ the ` — andyb, Jul 17 '13 at 09:01
@andyb I have uploaded a `html` file with dialog. download it from [here](http://goo.gl/2mydi). — Bishan, Jul 18 '13 at 03:48
That's great - I can reproduce the problem here. Sorry I couldn't look at it earlier, I can't access dropbox from work :-) — andyb, Jul 18 '13 at 20:11

score 11 · Accepted Answer · edited May 23 '17 at 11:48

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

Can you check my new question about [get values from GridView in jQuery Dialog in C#](http://stackoverflow.com/questions/17803400/how-to-get-values-from-gridview-in-jquery-dialog-in-c-sharp). now i'm in a trouble since this question. — Bishan, Jul 23 '13 at 07:20
I haven't coded in `C#` for a long time but I will have a look at your question and help if I can. — andyb, Jul 23 '13 at 07:27

Patt Mehta · Answer 2 · 2013-07-17T05:10:48.283

One possibility - The styles are conflicting. Check for the left: (or right:) CSS attributes in your html and CSS files. I think the styles for the class -

.ui-dialog .ui-dialog-titlebar-close

are conflicting.

Edit:

<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>      
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type="text/css">
.ui-dialog {
    position: absolute;
    top: 0;
    left: 0;
    padding: .2em;
    outline: 0;
    overflow:visible;
}
.ui-dialog .ui-dialog-titlebar {
    background:transparent;
    border:none;
}
.ui-dialog .ui-dialog-title {
    display:none;
}
.ui-dialog .ui-dialog-titlebar-close {
    left:0;
}
.ui-dialog .ui-dialog-content {
    position: relative;
    border: 0;
    padding: .5em 1em;
    background: none;
    overflow: auto;
}
.ui-dialog .ui-dialog-buttonpane { border-width: 0 !important; }
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    float: right;
}
.ui-dialog .ui-dialog-buttonpane button {
    margin: .5em .4em .5em 0;
    cursor: pointer;
}
.ui-dialog .ui-resizable-se {
    width: 12px;
    height: 12px;
    right: -5px;
    bottom: -5px;
    background-position: 16px 16px;
}
.ui-draggable .ui-dialog-titlebar {
    cursor: move;
}
.ui-resizable-handle.ui-resizable-s::before, .ui-resizable-handle.ui-resizable-s::after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    left: 150px;
    border-style: solid;
    border-width: 10px;
}
.ui-resizable-handle.ui-resizable-s::before {
    border-color: #aaa transparent transparent transparent;
    top: 2px;
}
.ui-resizable-handle.ui-resizable-s::after {
    border-color: #fff transparent transparent transparent;
    top: 1px;
}
</style>
<script type="text/javascript">//<![CDATA[ 
$(window).load(function(){
$('#open').click(function() {
    $('#dialog').dialog('open');
});
$(document).ready(function () {
    $('#dialog').dialog({
        autoOpen: false,
        resizable: true,
        width: 300,
        height: 'auto',
        buttons: {
            "Save": function () {

            }
        }
    });
}); 
});//]]>  
</script>
</head>

`.ui-dialog .ui-dialog-titlebar-close { left:0; }` not working. — Bishan, Jul 17 '13 at 04:40
I copied your code to a `html` page and comment line for `result-light.css` style sheet and run. but still close button is in left side. — Bishan, Jul 17 '13 at 06:55

score 0 · Answer 3 · answered Jul 17 '13 at 08:35

0

this is css that u need change :)

http://prntscr.com/1fwgfz

answered Jul 17 '13 at 08:35

Žarko Selak

1,073
12
19

Show Close Button in Right side of jQuery Dialog

3 Answers3

Linked