Dialog: missing round corners #4277

Closed
chrisben opened this Issue May 3, 2012 · 6 comments

Projects

None yet

4 participants

@chrisben
chrisben commented May 3, 2012

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
Contributor
MauriceG commented May 3, 2012

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
chrisben commented May 3, 2012

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
chrisben commented May 3, 2012

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
Contributor
MauriceG commented May 3, 2012

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

@MauriceG
Contributor
MauriceG commented May 3, 2012

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

@toddparker
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment