Dialog: missing round corners

[chrisben]

When the following page is opened as a dialog (data-rel="dialog"):

<div data-role="page">
   <script><!-- some javascript template code there--></script>

   <div data-role="header"><h1>title</h1></div>

   <div data-role="content">content</div>
</div>

the header box is missing its rounded corners at the top.

This is due to the ui-corner-top class being set on the script tag instead of the header.

The code responsible for this is there:
https://github.com/jquery/jquery-mobile/blob/master/js/jquery.mobile.dialog.js#L36

I'm not sure that the class should be set on the first-child element of the dialog..
Shouldn't it be set on the data-role="header" instead or to the data-role="content" itself if no header ?
Same problem with the the bottom and ui-corner-bottom.

This is not a huge problem as I can always move my script code down in the DOM, though it's a strange behaviour.

[MauriceG]

Hi!
I could not recognize that issue: http://jsfiddle.net/MauriceG/jKnFQ/
May I've got you wrong. I've put a script tag into a dialog page between the page- and - header tag.
No issue.

[chrisben]

Thanks for setting up this example!

You're right in that case it shows correctly. I checked my code to see the difference, and found that I have:

<script type="text/template">

-this is underscore js template code-.
With that small difference (type attribute), the problem can then be seen. I guess because then the script element stays in the DOM (check chrome inspector to see it there)

The updated jsfiddle:
http://jsfiddle.net/jKnFQ/1/

[chrisben]

The problem I want to point out is not so much that this happens with a script element there, it could be any other element: div, span... -surely even hidden element-

[MauriceG]

Yes! Now I can see it: http://jsfiddle.net/MauriceG/jKnFQ/2/

[MauriceG]

... and we can do it with the bottom-corners too: http://jsfiddle.net/MauriceG/jKnFQ/5/

[toddparker]

Thanks @MauriceG, you're a huge help here with triage and fixes.