CODEWITHSUNDEEP
javascriptjqueryjquery-ui
Michael Lindahl
Michael Lindahl

Reputation: 169

JqueryUI icon show up on new line

I am tring do add a jqueryui dialog to my webpage, but when it shows up the close icon come on a new line instead of being on the same line as the title. Its the same problem in both Chrome, IE and Firefox. I have tried to remove my custom css to make sure that it wasnt that which messed it up.

Screenshot can be seen here: http://dl.dropbox.com/u/653527/screenshtodialog.png

The code can be seen on the frontpage of this site: http://www.hvemskylderhvem.dk/

Click on the picture. It can also be seen on the button with the icon.

Thanks.

(I have the some problem with jqueryui buttons where the text and the icon also shows up on different lines)

Upvotes: 1

Views: 683

Answers (1)

Reto Aebersold
Reto Aebersold

Reputation: 16624

It seems you are missing some styles form the jQuery UI stylesheet. In the demo I found this style declaration:

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

Try to add the original jQuery UI stylesheets. Maybe you can use ThemeRoller to adopt your styles.

Upvotes: 1

Related Questions