How to remove jQuery-ui dialog title bar?

Question

I am trying to hide jQuery-ui dialog's title bar but keep the close button in the title bar visible. I have searched lots of post on stackoverflow like this one. In each post the title bar is hidden but the space taken by the bar is still there. I want to remove that space also but without removing the close button.

How can i do this?

Dander

What if you hide the whole title bar and add a custom close button? – Fossick

Answer 1

Based on this answer:

Use .dialog("widget") option to locate the div wrapper for the dialog. The wrapper contains all the markup used for the dialog including header, title bar and close button; and the dialog content itself. Here is one way to invoke the method and hide the title bar:

$("#id").dialog({
    autoOpen: false
}).dialog("widget").find(".ui-dialog-title").hide();​

You can then use CSS to eliminate unnecessary margin, border and padding. For example:

.ui-dialog-titlebar {
    float: right;
    border: 0;
    padding: 0;
}
.ui-dialog-titlebar-close {
    top: 0;
    right: 0;
    margin: 0;
    z-index: 999;
}

Here is a demo based on above code plus it adds the necessary styles using jQuery.

Misti

I guess you meant ``find(".ui-dialog-titlebar") – Zorn

@MikeJM .ui-dialog-titlebar contains (i) .ui-dialog-title (ii) .ui-dialog-titlebar-close. OP wants to keep the close button so .ui-dialog-title is correct. – Misti

Yeah, I see, sorry for that. – Zorn

Answer 2

If you want to remove the titelbar and keep the close icon using styles only, use the styles below. It shrinks the title bar to the size of the close icon and hides it behind. ui-icons_6e6e6e_256x240.png i created by lightening the ui-icons_222222_256x240.png image that jqueryui comes with.

.ui-dialog .ui-dialog-titlebar.ui-widget-header{background: none; border: none; height: 20px; width: 20px; padding: 0px; position: static; float: right; margin: 0px 2px 0px 0px;}

.ui-dialog-titlebar.ui-widget-header .ui-dialog-title{display: none;}

.ui-dialog-titlebar.ui-widget-header .ui-button{background: none; border: 1px solid #CCCCCC;}

.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close{margin: 0px; position: static;}

.ui-dialog .dialog.ui-dialog-content{padding: 0px 10px 10px 10px;}

.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close .ui-icon{position: relative; margin-top: 0px; margin-left: 0px; top: 0px; left: 0px;}

.ui-dialog .ui-dialog-titlebar .ui-state-default .ui-icon {background-image: url("/css/ui-lightness/images/ui-icons_6e6e6e_256x240.png");}

.ui-dialog .ui-dialog-titlebar .ui-state-hover .ui-icon {background-image: url("/css/ui-lightness/images/ui-icons_222222_256x240.png");}

Dilantin

If you want to make the entire dialog draggable, use this: $("#yourdialog").parent().draggable(); (after you create the dialog) – Dilantin

Answer 3

The way I see it, you have 3 options.

1. Yes, eliminate the titlebar completely and add a custom one that you can style to match the default one, using absolute positioning should be the key.
2. If you have the time, extend (not overwrite) the _create method of the dialog https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.dialog.js#L74 to do what you need
3. Work with CSS hackery to keep the titlebar there with a height of 0 for all elements but the close button.

Either one has their cons and pros, I would recommend #2 the best if you can, here's some info on how to work with widgets http://api.jqueryui.com/jQuery.widget/

Balch

Answer 4

This is How it can be done.

Go to themes folder--> base--> open jquery.ui.dialog.css

Find

Followings

if you don't want to display titleBar then simply set display:none as i did in the following.

.ui dialog.ui-dialog .ui-dialog-titlebar 
{
    padding: .4em 1em;
    position: relative;
        display:none;
}

Samilarly for title as well.

.ui-dialog .ui-dialog-title {
    float: left;
    margin: .1em 0;
    white-space: nowrap;
    width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    display:none; 
}

Now comes close button you can also set it none or you can set its

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

   display:none;

}

I did lots of search but nothing then i got this idea in my mind. However this will effect entire application to don't have close button,title bar for dialog but you can overcome this as well by using jquery and adding and setting css via jquery

here is syntax for this

$(".specificclass").css({display:normal})

Crosspollinate