Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
155
rated 0 times [  160] [ 5]  / answers: 1 / hits: 29683  / 12 Years ago, thu, november 8, 2012, 12:00:00

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?


More From » jquery

 Answers
12

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.


[#82113] Wednesday, November 7, 2012, 12 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
longd

Total Points: 616
Total Questions: 110
Total Answers: 101

Location: Andorra
Member since Sat, May 27, 2023
1 Year ago
;