05-17-2013 11:16 AM
I'm working on developing a BlackBerry WebWorks application for BlackBerry 6 and 7. I'm using theme roller to apply a general theme to the application but I'm also using CSS and media queries to resize certain UI elements depending on screen size. Everything sizes correctly in the Ripple Emulator in Chrome. When I deploy the app to the device things become less straightforward. The screens render and the correctly formatted elements are very briefly visible, then it looks like the CSS is removed and the elements ignore all formatting specified in CSS (not just formatting dependent on media queries). This only happens to CSS applied through the class attribute, any in-ine CSS specified with the style attribute works fine.
If anyone needs code samples I'd be happy to supply them.
05-19-2013 03:12 PM
From what you say it sounds like the JS is at issue somewhere
You say ThemeRoller so I'm assuming JQ Mobile
Something you can try yourself is try it in Ripple then Right Click anywhere in the app-view then click Inspect Element
If you see a Red marker in the lower right of that bit - somethings wrong (ignore anything Ripple-related)
05-20-2013 09:28 AM
05-20-2013 03:20 PM
JQM over-rides and amazing amount of CSS
Bootstrap is worse
If you want control - ditch everything and write it yourself
Personally I never use any of the 3rd party things apart from JQ - not mobile
05-21-2013 04:00 AM
I've solved the problem I was having, it was mostly caused by inexperience on my part. I had the media queries set up with specific height and width restrictions, and didn't set the viewport height equal to the device height in my HTML. Also, some devices report their height and width differently than their actual spec, such as the 9900. I've solved it by adding the height specification to the viewport, I've also almost completely removed my dependency on width and height media queries. Thank you all for your assistance and advice.