Show Close Button in Right side of jQuery Dialog

Asked 17/7, 2013 at 4:24 Answered 18/7, 2013 at 20:41

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>

Peepul answered 17/7, 2013 at 4:24 Comment(11)

In your PC? Or on your site? – Wanigan 17/7, 2013 at 4:27

on my site, running on localhost :) – Peepul 17/7, 2013 at 4:30

@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, – Nel 17/7, 2013 at 4:30

the problem could be from your css... – Wanigan 17/7, 2013 at 4:30

yes, .. abs.. it's the case of conflicting styles.. – Fishnet 17/7, 2013 at 4:32

.ui-dialog .ui-dialog-titlebar-close { left:0; } not working. – Peepul 17/7, 2013 at 4:39

Can you Right click -> Inspect the close button and then find the <a> 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

<a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button"><span class="ui-icon ui-icon-closethick">close</span></a>

. – Convalescence 17/7, 2013 at 7:49

@Convalescence Updated post with style. there is no <a> tag. there is a button tag. – Peepul 17/7, 2013 at 8: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 <button> and check the Computed Style in the Chrome DevTools. In particular I'd like to see the writing-mode CSS property. Also, which browser and version are you using? – Convalescence 17/7, 2013 at 9:1

@Convalescence I have uploaded a html file with dialog. download it from here. – Peepul 18/7, 2013 at 3: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 :-) – Convalescence 18/7, 2013 at 20:11

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

Convalescence answered 18/7, 2013 at 20:41 Comment(2)

Can you check my new question about get values from GridView in jQuery Dialog in C#. now i'm in a trouble since this question. – Peepul 23/7, 2013 at 7: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. – Convalescence 23/7, 2013 at 7:27

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>

Fishnet answered 17/7, 2013 at 4:34 Comment(3)

.ui-dialog .ui-dialog-titlebar-close { left:0; } not working. – Peepul 17/7, 2013 at 4:40

What is result-light.css ? – Peepul 17/7, 2013 at 5:36

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. – Peepul 17/7, 2013 at 6:55

this is css that u need change :)

http://prntscr.com/1fwgfz

Tropism answered 17/7, 2013 at 8:35 Comment(0)

Recommended topics

Hot tags