Skip to content
This repository

Inconsistent background on themeless dialogs #2881

Closed
agcolom opened this Issue · 10 comments

4 participants

Anne-Gaelle Colom Mat Marquis Maurice Gottlieb Todd Parker
Anne-Gaelle Colom
Collaborator

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 :-) )

Maurice Gottlieb MauriceG referenced this issue from a commit in MauriceG/jquery-mobile
Maurice Gottlieb 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.
aec206b
Maurice Gottlieb

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

Anne-Gaelle Colom
Collaborator

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 :-)

Maurice Gottlieb

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.

Anne-Gaelle Colom
Collaborator

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 :-)

Todd Parker

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

Anne-Gaelle Colom
Collaborator

@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...

Todd Parker

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.

Anne-Gaelle Colom
Collaborator

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).

Todd Parker

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

Timmy Willison timmywil referenced this issue from a commit in timmywil/jquery-mobile
Maurice Gottlieb 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.
921d598
Mat Marquis Wilto closed this
Mat Marquis

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.