CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-ui-dialog
Naftali
Naftali

Reputation: 146302

jQuery UI dialog title area gets stretched out

In the fiddle here: http://jsfiddle.net/maniator/8Lhns/ if you click on any of the links (like View Uploads) the title bar of the jQuery dialog gets stretched.

BUT when you look at the same page in regular view http://jsfiddle.net/maniator/8Lhns/show/ and then click on a link, the dialog box looks normal (if the browser is maximized, if the browser is not maximized, you have the same issue).

How do I fix it so that the dialog box looks normal no matter what?

Upvotes: 0

Views: 370

Answers (3)

Yossi Shasho
Yossi Shasho

Reputation: 3640

Just add this CSS style to your stylesheet: 

.ui-dialog { clear: both; }

Upvotes: 1

Naftali
Naftali

Reputation: 146302

The issue was as @Interstellar_Coder stated about float: left

I solved by adding to the div after it is a dialog:

        var widg = div.dialog('widget');
        widg.css('clear','both');

This solved the issue, but it is really a hack. The css of the page should have been made better in general.

Fiddle: http://jsfiddle.net/maniator/8Lhns/15/

Upvotes: 0

aziz punjani
aziz punjani

Reputation: 25766

It's the float: left; on your #content

Upvotes: 1

Related Questions