1 ) I keep uploading my zipped up project into build.phonegap, but it keeps giving me back the initial phonegap build app? It doesn't give me my updated app back. It's also suddenly called "hello-world", which wasn't the name of my app.
2 ) I have an element that is 40px * 40px with a background image. The element is there, the image is there, but it's not 40*40px. If I force it to 40*40 with in-line css, it becomes 40*80px.
3 ) suddenly, underscores in jquery selectors are giving massive issues. I'm not getting *any* errors at all, but if I have an element, say $('.magic .image_1'), it will do nothing. If I change .image_1 to image1 (both the selector and the class), it will magically work.
- 22 Posts
- 0 Reply Likes
Posted 4 years ago
Petra V., Champion
- 7794 Posts
- 1391 Reply Likes
2. This is hardly a Phonegap Build issue. Also, a 'pixel' is not always a pixel on mobile devices.
3. What version of jQuery are you using?
Petra V., Champion
- 7794 Posts
- 1391 Reply Likes
A. Phonegap Build doesn't have a 'default template'. That's because PBG doesn't require _any_ directory structure. It has no idea about a "/www directory" or "roject folder". Those things are all just relevant for local builds, which expect a Cordova project.
B. The Phonegap Developer app prepares for local builds, not for PGB. On a daily basis, developers come to this forum and are confused, just like you. Go ahead and browse through a week's worth of posts at this forum, and you'll see what I mean.
C. You should NOT just place your config in "the www folder". The config and the index.html should be in the root directory, not in /www or any other directory.
D.
When I started out with phonegap, the docs said to install phonegap build (desktop) and combine it with the phonegap dev app for debugging. I've been using it since... forever?Exactly. There you go.
You believe "Phonegap" and "Phonegap Build" (which is what this forum is about) are one and the same thing.
Unfortunately, many newcomers believe the same thing. Until they find out the hard way, just like you right now.
E. If your CSS doesn't make the image element look as you expect, either your CSS or some viewport specifications are wrong.
Since you haven't posted either one, I'm not sure where the error is.
But....would you really think that Phonegap and/or Phonegap Build will cause your CSS or your vieport specification to go wrong?
F. I must admit that I have no idea why classnames with an underscore would suddenly not be recognized, unless there is something wrong with the file contents encoding.
- 22 Posts
- 0 Reply Likes
E. I'm starting to thing maybe E and F are connected. Do you know of any html changes that PGB might make? I'm starting to think that the HTML might be changed in such a way, that my nesting classes and jquery might get in trouble with it. I honestly don't know how to debug the built app, I only know how to alert javascript errors if they happen.
- 22 Posts
- 0 Reply Likes
Petra V., Champion
- 7794 Posts
- 1391 Reply Likes
Wouldn't you think that developers would massivly complain here if that was the case?
If your zip file is available online, somewhere, please post its url and I'll be happy to have a look.
In that case, please also describe where I can find the 40x40 image and an html document with the underscore problem.
- 22 Posts
- 0 Reply Likes
https://www.justbeamit.com/uf8uk
- you can find the zip file there. I will keep the link open for a while, I should be able to see when it's been downloaded. (This way, only you can reach it). Please don't mind the mess my code is in right now. I've rebuilt the app 304949 times and I still have to sort it out!
The place to be would be main.js
The html element not grabbing its css is in "renderShouts()" (line 476). Specifically, it gets rendered on line 504 ( style...)
- 22 Posts
- 0 Reply Likes
- as for the elements that appends don't work on, check function renderStorePopup() on line 995. On opening the app and clicking a store logo, it should open a pop-up with information. This information is received in JSON but not appended. This is on the lines containing " $('.storePopupWrap .popUpTab_1". (lines 1017 to 1037). - take away ".popUpTab_1" and boom, it works.
You can find the creation of these elements within the "storePopUpWrap" element in the index.html.
--- gosh, wouldn't it be funny if all this happened because I'm foolishly overlooking 1 simple html typo?
link (previous one expired and I can't edit the comment anymore: https://www.justbeamit.com/yse3j)
Petra V., Champion
- 7794 Posts
- 1391 Reply Likes
Could take a bit, though
- 22 Posts
- 0 Reply Likes
That's fine, I don't expect you to go through too much trouble for me. Please, take all the time you need :)
Petra V., Champion
- 7794 Posts
- 1391 Reply Likes
1. You are pinning almost all plugins to older versions. Do you avoid using the latest versions on purpose?
2. Your icons and splashes won't show, because:
- you specify a /www directory, which doesn't exist (anymore)
- you are using compound qualifiers in the density attribute, which PGB will not recognize.
see the Icons and Splashscreens section of the PGB Docs
3. I noticed that a part of index.html is invalid html. You have
<div class="storeHoursWrap">
<table>
<div class="day">
<div>Ma:</div>
<div></div>
<div></div>
</div>
[...etc...]
</table>
No idea if this can cause trouble with your CSS nesting.
I'll leave it at that for now. You've quite a bunch of javascript to read through, which is a bit more than I can find time for, right now.
I liked "Er werkt een heel slimme aap aan om dit op te lossen!", though.
(Ik ben kennelijk niet slim genoeg om eventjes vlot de oorzaak van de perikelen te vinden.)
- 22 Posts
- 0 Reply Likes
2. Totally right about this, too, though I don't use the pgonegap splash screen. I forgot to update them to the new location.
3. Fixed. Unfortunately, that did not change a thing. Nice one, though. Can't believe I overlooked it.
yep, I do have a lot of js :') Probably only 30% of it is actually being used right now, though, as the app has been 'reformed' to be a lot less than originally intended. As I'd said before, I really need to do a cleanup!
Thanks, I stole that monkey thing from google hehe. Are you dutch? O.o
-- I used the debugger to find the element I was speaking of. I actually used it to make the element 40*40px again, and again, it became ~ 80px wide. Not the element itself, but there's an equally wide whitespace besides it. It seems I am unable to 'find' the whitespace in the debugger. The debugger shows that the logos are indeed 40*40...
- 22 Posts
- 0 Reply Likes
Petra V., Champion
- 7794 Posts
- 1391 Reply Likes
However, I really can't imagine this to be a PGB problem.
If you're in a hurry, you may want to remove the underscores...which would not be very satisfying.
And well, I'm European. If necessary, I reply in english, german, dutch or french.
- 22 Posts
- 0 Reply Likes
I want to blame my coding more than I want to blame PGB (my coding would be quite easy to solve) but I cannot recreate it in any browser environment... :(
Petra V., Champion
- 7794 Posts
- 1391 Reply Likes
You are building with cli-6.1.0 and probably testing with a pretty new Android version.
You have quite a bit of inline CSS....and you don't have a CSP. That might cause the trouble.
Please see the whitelist plugin documentation and read about CSP. Add a rule for inline CSS, and you might solve the problem.
- 22 Posts
- 0 Reply Likes
- unfortunately, it didn't help. If inline styling wasn't working, a lot of stuff shouldn't have worked in the first place, though...
I have also taken away the versions from my plugins, so as to update them automatically. This also, unfortunately, did not make a difference. I'm starting to think it'd be a safer option to just rebuild everything and clean up my code while at it... Who knows, maybe there actually is a problem in validity somewhere? I have no idea, but I don't have much time left. I guess I'll just have to do without underscores and such...? I'll just have to hope a 'reboot' will fix things.
- 22 Posts
- 0 Reply Likes
- right now, I only have a few very small files working, and although the storelogo thing is fixed, I have just now encountered the exact same issue (css not applying) on another element. I'm now trying to pinpoint where it's going wrong EXACTLY, but the debugger for some reason won't connect anymore, so.... I'm completely guessing stuff right now and building->rebuidling... it's extremely time consuming.
- 22 Posts
- 0 Reply Likes
for some reason PHPSTORM thinks it's ok to auto-complete my classnames and actually IGNORING CAMELCASE!!! I just don't understand WHY they work in all browsers then??? I'm SO confused right now! -- (I checked back on the old app, and indeed, the css selectors had wrong camelcasing! thanks, phpstorm! it completely lowercased all my camelcased classes when I copy-pasted it over!)
- This still doesn't really explain the jQuery issue, though so far I haven't had any (completely avoided underscores this time around, and I checked whether the camelcase was correct. It was)
Petra V., Champion
- 7794 Posts
- 1391 Reply Likes
- use nothing but the simplest editor (so, no Phpstorm)
- create a one-page app with just one class (with underscore) on one element
- use one line of jQM code
...just to isolate the underscore problem, and see if that acts as expected?
If it does, use your original tools and environment on that simplest app to edit and play around, then rebuild and see if anything changed.
- 22 Posts
- 0 Reply Likes
While rebuilding it, I saw I was looking at the wrong elements earlier. in jQuery, it was ALSO camelcasing. PHPstorm really screwed me on this one. I've just tested it in every possible way, and although 'clicking' on the autocomplete does provide the correct camelcased class, pressing enter will for some reason print it without CamelCasing.
-- funny thing, though, that regular browsers don't seem to care about this! That's absolutely terrible! Also the reason why I completely overlooked it, obviously...
Thank you for all your help, Petra. I can see why you're a champ!
Petra V., Champion
- 7794 Posts
- 1391 Reply Likes
Glad you have it solved, now.
This would be 'exit PHPstorm', right?
- 22 Posts
- 0 Reply Likes
- 22 Posts
- 0 Reply Likes
Did you know that the security meta-tag breaks debugging?
Do you know of a way to solve this without removing the security meta-tag?
JesseMonroy650 (Volunteer), Champion
- 3325 Posts
- 122 Reply Likes
what part is not working? Can you be more specific? CSP is a major PITA. Do you have any Javascript on the webpage that is breaking?
Jesse
- 22 Posts
- 0 Reply Likes
No, the app is working perfectly fine. (though at the moment I'm having a "won't scroll inside an element" issue, but that's not important)
I've looked it up, and I'm not the only one having this issue. A lot of people don't get a "target" when they're using the PGB debugger. I mentioned earlier in this post that the debugger wasn't working anymore. I just commented out the CSP and the debugger works now.
I have these options in my csp: default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval
JesseMonroy650 (Volunteer), Champion
- 3325 Posts
- 122 Reply Likes
your comments are in conflict. You say the app is working perfectly fine. Then why are you in the debugger?
FWIW, your CSP line is generic and troublesome. It is the setting in many templates/boilerplates (except mine) so I a not surprise it is not working.
Jesse
- 22 Posts
- 0 Reply Likes
2 ) You're not being very helpful. You say my CSP line is generic and troublesome, but you do not explain why, nor do you give me any suggestion as to how I could improve it. Please explain this in more detail.
JesseMonroy650 (Volunteer), Champion
- 3325 Posts
- 122 Reply Likes
Here is your answer: an all inclusive CSS is not allowed without a written CSP exception. You have written 'unsafe-inline' and 'unsafe-eval'. You can fix this issue by placing all your CSS in a separate file; this especially includes style= and <style>. This means that only 'self' is available - which means the CSS file can only be in the App bundle, else it is ignored. The alternative is to add a start (*) - just like with default-src
FWIW: default-src, style-src, and script-src require restrictive exceptions, all other security filters default to default-src.
You can read details here: Whitelist Worksheet (Matrix)
Any Questions?
Jesse
- 22 Posts
- 0 Reply Likes
This doesn't exactly explain why the debugger stops working when I add the CSP tag, though... That's what's getting me curious.
I have an external css file, but I need inline-css for jquery. making 300 pre-set classes is just too much of a hassle and too hard to maintain. Besides, any jquery manipulation (say, animations) use inline-styling, so it has to work.
-- do note, that even without the CSP having 'unsafe-inline' enabled, it still works. Does this mean the CSP doesn't even work?
I guess I could remove stuff like 'unsafe-eval'. The only thing that matters to me is that unsafe-inline is allowed.
--thing is, I'm not dependant on such protections at all. People can hack around in my app all they want, their own waste of time. My app is nothing other than a client-side thing. From my programming experience I've already learned to split off client-side from server-side. I could give people my app's entire source code with full access, and they still won't get into any important data. Everything is validated server-side. All data on my app itself is public.
- 22 Posts
- 0 Reply Likes
^ Check the image to see what I mean about the 40x40 thing. The logo (red block on the left) is supposed to be 40*40px, but it's not responding to its css. (Can't see it in the debugger, either). Manually making it 40*40 (with javascript) results in a weird whitespace. These are the only 2 elements in that table row.
JesseMonroy650 (Volunteer), Champion
- 3325 Posts
- 122 Reply Likes
Wow, this link is seriously helpful, thanks!
::::SNIP::::
-- do note, that even without the CSP having 'unsafe-inline' enabled, it still works. Does this mean the CSP doesn't even work?
CSP is still going through a transition period. This means that within webbrowsers you can disable it - because the server is supposed to turn on CSP using http-headers. However, within webview libraries like those that Phonegap, it is not clear how that works. I have not had time to look at the source code.
However, given all the security failings by all parties, it is best to turn it on - even if you are running loose security. For instance, most developers don't know about the MPEG security bug that allows 'root' user access to Android devices, just by looking at the MPEG file!
I guess I could remove stuff like 'unsafe-eval'. The only thing that matters to me is that unsafe-inline is allowed.
--thing is, I'm not dependant on such protections at all. People can hack around in my app all they want, their own waste of time. My app is nothing other than a client-side thing. From my programming experience I've already learned to split off client-side from server-side. I could give people my app's entire source code with full access, and they still won't get into any important data. Everything is validated server-side. All data on my app itself is public.
I can't say much because my position is and will always be that -- the security of your app is your business - not mine.
I can offer suggestions, fixes and even point toward possible issues, but building the "security wall" is your business and always will be - as far as I'm concerned.
Jesse
Related Categories
-
PhoneGap Build
- 15111 Conversations
- 275 Followers



NoobishPro
2. It only happens in phonegap developer (app) though. I can't test it as an actual app because it won't build. The rest is also working fine. It's this one very specific element (which happens to have a background image). I actually reset the mobile pixels, like you would with a responsive website.
3. I was using 2.1.4, now I updated to 2.2.3. The issue persists.
Petra V., Champion
Phonegap Build doesn't have terms like "the project folder". There is no such thing.
PGB expects you to have both index.html and config.xml in the root directory ("/") of your zip file. Not in any named directory (such as /www or otherwise).
2. You can't combine the Phonegap Dev app and Phonegap Build. The Phonegap Dev app prepares for local builds, not for PGB. In PGB both your directory structure and your config are different.
3. OK. I would suggest you correct the first points, first.
Could it be that you are also using other js frameworks, in which the underscore has a special meaning?
NoobishPro
2. Phonegap developer as in the app made to be combined with phonegap build? The thing that creates the template and everything? When I started out with phonegap, the docs said to install phonegap build (desktop) and combine it with the phonegap dev app for debugging. I've been using it since... forever? Anyway, with the actuall app, I can now confirm that the element is still not listening.
3. Nope, just Jquery. I have 1 self-made plugin and photoswipe, but those are plugins and shouldn't affect the overall workings of jQuery.
sidenote: This is all very confusing to me, because for the past year I've never had any issues at all! Especially not with jquery or css!
another sidenote: again, I'm getting NO issues at all! That's what confuses me the most. The app keeps on working even if I put the stuff that doesn't happen on top.
NoobishPro
I am really confused right now.