jquery-ui theme causes wrong positioning of Dialog layout (close button, size grip misplaced)

2
votes

In my rails 3.1 app I am displaying a simple jquery-ui dialog in which close button and size grip get misplaced (see screenshots below).

The code:

html:

<p id="dialog">Hello</p>

JS:

$(function() {
 $("#dialog").dialog();
});

Very basic thing :) And here are the results I get:

Screenshot1

Screenshot2 (with close button hovered)

Notice that on both of them close button has jumped to the line below, so did size grip.

I used ThemeRoller to generate me an Overcast theme. I downloaded only theme css+images, because rails already has recent jquery and jquery-ui libs bundled.

I checked versions and they are:

jQuery: 1.7.1

jQuery-UI: 1.8.16

jquery-ui-1.8.18.custom.css (theme css): 1.8.18

When downloading theme file I was given two choices: theme for jquery 1.3.2 and for 1.3.2+. I have 1.7.1, so I downloaded second one.

Also one interesting fact is that in my older project I have almost the same setup except that I use theme with css version 1.8.14 and buttons are in place!

I know I can switch to using that theme, but then I have no option of generating themes with ThemeRoller! Which I'd really like to. I did check some other themes, but result was the same - misplaced close and sizegrip buttons.

Any hint would be really cool! :)

1
ruby-on-railscssjquery-uithemesthemeroller
It's hard to fix some CSS issue without all the code. Maybe you need inspect it and find by yourself. – shingara
hm. okay. I just posted this in case someone already encountered such problem. I guess i'll have to compare the css of working older theme with new one... what actually bothered me is that it's a clean project with no css customizations applied. Theme is a stock one too. So I thought maybe this is some known jquery-ui/theme issue... – dimsuz

1 Answers

2
votes

I was having the same issue as you. I had to re-download the CSS to include the Dialog. Once I pointed to the updated CSS everything was working as expected.