Hello. I will try to make myself clear, but I am not a native speaker, so please bear with me.
1- On a single page app, which I have been developing for the last several week, I have a login dialog, as a div with data-role="dialog". I open using js and a call to changePage. All has been working wonderfully so far.
2- I use the swatch "a"
Since 2 days when I open the dialog with changePage, the overlay is completely white. (instead of dark)
What I have done
A: I narrowed it down to the CSS ui-dialog which specifies background: none !important. If I remove it, everything is fine.
B: I have tried specifying the theme on the dialog div ... , on the changePage call .... to no avail.
C: I have checked my markup and the HTML goes through htmlLint ... I am at loss.
If I update the original CSS (which I am trying to avoid at all costs) to remove the background rule on ui-dialog it sort of works: there must be NO transition otherwise the white background flashes.
Question: how can I get the background to be and stay dark ?
I must admit that I am running out of ideas, so any fresh input will be appreciated.
Is it possible you are linking to a jquery.mobile-latest css file which is changing all the time? If so, consider having a local copy with appropriate image files or use a 'static' version of the file.
@godsbest: thank you for answering; but I am already using a local copy of the 1.2.0 css file, from the original 1.2.0 release; I also took care of making sure I did not accidentally alter it by copying again the original css.
1- in my main html file I added tjhe following css to overwrite the existing one
background: rgb(34,34,34) !important ;
I also had to change to border radius as the background has the class ui-corner-all so small spots of white were visible
but the real problem is that is that the dialog background is set to none regardless of the color swatch selected and the overlay color swatch selected, so it in fact shows the body background, which is not styled by JQM.. So styling the body was enough
Tried what you suggested and the following happens
the dialog displays fine BUT not styled and since ui-dialog has no background (ui-dialog has background: none !important) the the underlying elements of the page are still visible.
For the time being I'll stick with leaving the dialog inside the page (so that it gets styled) and live with setting the background of the page to rgb(34,34,34) it is not too much of a pain and does not seem to be too much against JQM phylosophy; Thanks for your help, mate, this is much appreciated.
it helps in a sense that it puts the issue squarely back in my camp; which is good; but I have not managed to integrate succesfully what you did with my code. I guess I need an evening away from the keyboard and good night sleep and that tomorrow looking at your code I'll just slap my head and see what I am missing right now.
Fortunately for me, I didn't have to slap my head :)
looking carefully at what you did and at my code, I found one extra </div> which was not the best of ideas.
So I now have the dialog div outside the page; which is good. I still need the body to have a background, otherwise opening the dialog it gets a white background. And I must say it makes sense. excetp that the data-overlay-theme seems inactive as ui-dialog has "background none !important"
and I have something weird but I managed to workaround it.
As mentioned earlier, I have 5 pages all loaded in the same html and I navigate between the pages using
if (page.length > 0)
and on the page just before the dialog, this prev test fails (ie nothing is found) not too sure why; but to be honest, it does not bother me too much in the end.
Thanks a lot for your time, much appreciated
Leave a comment on didiergm's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic