New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dialog: missing round corners #4277

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

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

This comment has been minimized.

Show comment
Hide comment
@MauriceG

MauriceG May 3, 2012

Contributor

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.

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

This comment has been minimized.

Show comment
Hide comment
@chrisben

chrisben 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 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

This comment has been minimized.

Show comment
Hide comment
@chrisben

chrisben 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-

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

This comment has been minimized.

Show comment
Hide comment
@MauriceG

MauriceG May 3, 2012

Contributor

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

Contributor

MauriceG commented May 3, 2012

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

@MauriceG

This comment has been minimized.

Show comment
Hide comment
@MauriceG

MauriceG May 3, 2012

Contributor

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

Contributor

MauriceG commented May 3, 2012

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

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker May 13, 2012

Contributor

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

Contributor

toddparker commented May 13, 2012

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