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

Inconsistent background on themeless dialogs #2881

Closed
agcolom opened this Issue Oct 28, 2011 · 10 comments

Comments

Projects
None yet
4 participants
@agcolom
Member

agcolom commented Oct 28, 2011

Hi,

if you do not give a theme to any of the dialog element, the header and footer are as expected, but the content has no background at all. If you remove the footer, then the dialog content gets a background. See http://jsfiddle.net/agcolom/AYZNd/12/ dialog1 with a footer, dialog 2 with no footer.

(please note, I had a long debate with myself whether I should say themeless or unthemed dialog to describe a dialog with no theme. so I am sorry if I got that wrong, and would love to know which should be the correct word :-) )

@ghost ghost assigned Wilto Oct 28, 2011

Wilto added a commit that referenced this issue Oct 31, 2011

Merge pull request #2883 from MauriceG/patch-2
Fix for #2881 - Inconsistent background (box-shadow) on themeless dialogs.
@MauriceG

This comment has been minimized.

Show comment
Hide comment
@MauriceG

MauriceG Nov 1, 2011

Contributor

Hi Anne :-)
Where are you? Missing your verbose remarks already since three days ;-)
I think, this issue is fixed, but we can't test it with your fiddle cause it seems commits
are not published at latest since RC2.
Compliments from CET to GMT

Contributor

MauriceG commented Nov 1, 2011

Hi Anne :-)
Where are you? Missing your verbose remarks already since three days ;-)
I think, this issue is fixed, but we can't test it with your fiddle cause it seems commits
are not published at latest since RC2.
Compliments from CET to GMT

@agcolom

This comment has been minimized.

Show comment
Hide comment
@agcolom

agcolom Nov 1, 2011

Member

Hi Maurice :-)

Well, I'm still here :-) Just been busy with work stuff! I thought of 2 or 3 things to test, so there may be more coming from me soon ;-) In the mean time, thanks a lot for sorting out this issue. Does this mean that we need to wait a few days to test this fully?

Also, I am getting 80 3rd year students to develop mobile web apps for museum exhibitions as their coursework in JQM, (due mid December). They will be working in groups of 4, 2 targeting the iPhone/iPod Touch, and 2 targeting the iPad. They are starting next week. I'll get them to test their on their mobile devices as well. I hope this will also lead to some interesting findings.

best wishes from GMT to CET :-)

Member

agcolom commented Nov 1, 2011

Hi Maurice :-)

Well, I'm still here :-) Just been busy with work stuff! I thought of 2 or 3 things to test, so there may be more coming from me soon ;-) In the mean time, thanks a lot for sorting out this issue. Does this mean that we need to wait a few days to test this fully?

Also, I am getting 80 3rd year students to develop mobile web apps for museum exhibitions as their coursework in JQM, (due mid December). They will be working in groups of 4, 2 targeting the iPhone/iPod Touch, and 2 targeting the iPad. They are starting next week. I'll get them to test their on their mobile devices as well. I hope this will also lead to some interesting findings.

best wishes from GMT to CET :-)

@MauriceG

This comment has been minimized.

Show comment
Hide comment
@MauriceG

MauriceG Nov 1, 2011

Contributor

Hi Anne :-)

For fully testing you can edit your jsfiddle and change the source of lastest
from <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
to <script src="http://jquerymobile.com/test/js/"></script>
The themeless dialog seems to work fine.

Did you saw the new ThemeRoller for JQuery Mobile? Just hot !
If not, may take a look at http://jquerymobile.com/blog/. It's may interesting for the coursework too.

Contributor

MauriceG commented Nov 1, 2011

Hi Anne :-)

For fully testing you can edit your jsfiddle and change the source of lastest
from <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
to <script src="http://jquerymobile.com/test/js/"></script>
The themeless dialog seems to work fine.

Did you saw the new ThemeRoller for JQuery Mobile? Just hot !
If not, may take a look at http://jquerymobile.com/blog/. It's may interesting for the coursework too.

@agcolom

This comment has been minimized.

Show comment
Hide comment
@agcolom

agcolom Nov 1, 2011

Member

Hi Maurice,

That works very nicely :-) Thank you :-)
ThemeRoller is a brilliant idea, and I guess I have to learn how to use it now as this would definitely be very useful for my students!

Thanks again :-)

Member

agcolom commented Nov 1, 2011

Hi Maurice,

That works very nicely :-) Thank you :-)
ThemeRoller is a brilliant idea, and I guess I have to learn how to use it now as this would definitely be very useful for my students!

Thanks again :-)

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Nov 1, 2011

Contributor

I made a bunch of examples to show the issue more clearly:
http://jsfiddle.net/AYZNd/16/

If no footer is present, we're not applying the shadow class to the content container which is incorrect. The amount of shadow on the footer feel odd when if falls on the content block, but I'm not sure how fixable this is.

Note that the overlay swatch is going to be configurable: See issue #2871

Contributor

toddparker commented Nov 1, 2011

I made a bunch of examples to show the issue more clearly:
http://jsfiddle.net/AYZNd/16/

If no footer is present, we're not applying the shadow class to the content container which is incorrect. The amount of shadow on the footer feel odd when if falls on the content block, but I'm not sure how fixable this is.

Note that the overlay swatch is going to be configurable: See issue #2871

@agcolom

This comment has been minimized.

Show comment
Hide comment
@agcolom

agcolom Nov 1, 2011

Member

@toddparker I am wondering whether the shadow should actually fall on the content at all (from header and footer). I think the shadow around the dialog as a whole giving a floating view is good. I will try to give screen shots or examples of what I mean...

Member

agcolom commented Nov 1, 2011

@toddparker I am wondering whether the shadow should actually fall on the content at all (from header and footer). I think the shadow around the dialog as a whole giving a floating view is good. I will try to give screen shots or examples of what I mean...

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Nov 1, 2011

Contributor

No, I understand what you're seeing. We need to re-engineer the dialogs post-1.0 because there isn't a wrapper around them to add the shadow so it's added to the header, content and footer so we can't fix this right now because it could break a lot of people's styles but this needs to happen for the next release.

The shadow ont eh header looks ok, but with a footer, it's odd for sure.

Contributor

toddparker commented Nov 1, 2011

No, I understand what you're seeing. We need to re-engineer the dialogs post-1.0 because there isn't a wrapper around them to add the shadow so it's added to the header, content and footer so we can't fix this right now because it could break a lot of people's styles but this needs to happen for the next release.

The shadow ont eh header looks ok, but with a footer, it's odd for sure.

@agcolom

This comment has been minimized.

Show comment
Hide comment
@agcolom

agcolom Nov 1, 2011

Member

Yes, I was getting to that conclusion as well :-)

In the mean time, a way around could be to avoid using gradient for dialog content as this emphasize the shadow issue of the footer on the content (see http://users.cscs.wmin.ac.uk/~coloma/jqm/dialog3.tiff compared to http://users.cscs.wmin.ac.uk/~coloma/jqm/dialog2.tiff) (note for some reason FF will not always display these images, but they are ok in Safari! ). The fiddle with @MauriceG additions: http://jsfiddle.net/agcolom/AYZNd/18/ (the content for no theme for dialog content doesn't have a gradient, and looks as good as possible with the box shadow issue).

Member

agcolom commented Nov 1, 2011

Yes, I was getting to that conclusion as well :-)

In the mean time, a way around could be to avoid using gradient for dialog content as this emphasize the shadow issue of the footer on the content (see http://users.cscs.wmin.ac.uk/~coloma/jqm/dialog3.tiff compared to http://users.cscs.wmin.ac.uk/~coloma/jqm/dialog2.tiff) (note for some reason FF will not always display these images, but they are ok in Safari! ). The fiddle with @MauriceG additions: http://jsfiddle.net/agcolom/AYZNd/18/ (the content for no theme for dialog content doesn't have a gradient, and looks as good as possible with the box shadow issue).

@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Nov 2, 2011

Contributor

All good suggestions. We'll have to tinker with this soon.

Contributor

toddparker commented Nov 2, 2011

All good suggestions. We'll have to tinker with this soon.

timmywil pushed a commit to timmywil/jquery-mobile that referenced this issue Nov 5, 2011

Fix for #2881 - @Wilto Could you please review this:
Add the ui-overlay-shadow class to both, content and, if there, to the footer.
Then add the ui-corner-bottom-class to the last one.

timmywil pushed a commit to timmywil/jquery-mobile that referenced this issue Nov 5, 2011

Merge pull request #2883 from MauriceG/patch-2
Fix for #2881 - Inconsistent background (box-shadow) on themeless dialogs.
@Wilto

This comment has been minimized.

Show comment
Hide comment
@Wilto

Wilto Nov 8, 2011

Contributor

I’m gonna close this out for the time being, as #921d598 addressed the underlying issue—shadows are now applied consistently whether or not a dialog has a header/footer/theme. Like Todd said, though, we definitely intend to overhaul the dialogs post-1.0. I’ll create a new issue for that, referencing this thread. Thanks, guys!

Contributor

Wilto commented Nov 8, 2011

I’m gonna close this out for the time being, as #921d598 addressed the underlying issue—shadows are now applied consistently whether or not a dialog has a header/footer/theme. Like Todd said, though, we definitely intend to overhaul the dialogs post-1.0. I’ll create a new issue for that, referencing this thread. Thanks, guys!

@Wilto Wilto closed this Nov 8, 2011

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