Inconsistent background on themeless dialogs

[agcolom]

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

[MauriceG]

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]

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]

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]

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]

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]

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

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]

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]

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

[Wilto]

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!