Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
New Contributor
Iyashu
Posts: 5
Registered: ‎05-17-2013
My Device: Blackberry Bold 9900

Strange CSS behaviour with webworks and Blackberry Bold 9900

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.

Please use plain text.
Developer
peardox
Posts: 1,229
Registered: ‎03-20-2011
My Device: Playbook, Z10 LE, Dev Alpha B, 2x Dev Alpha C

Re: Strange CSS behaviour with webworks and Blackberry Bold 9900

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)




Click the like button if you find my posts useful!
Please use plain text.
New Contributor
Iyashu
Posts: 5
Registered: ‎05-17-2013
My Device: Blackberry Bold 9900

Re: Strange CSS behaviour with webworks and Blackberry Bold 9900

Hi Peardox

Thank you for your suggestion. I have inspected everything in Ripple as much as I can, working around and solving any JS, jQM and CSS problems.
My problem still persists though. It seems something such as the jQM CSS is overriding all my CSS on the device. I've tried looking through the device logs set to debug so I can see what's going on, but to no avail.
I set sizes in CSS with the simple width and height attributes, but they are being ignored. Corners that I've set with a radius of 0 also appear rounded on a device but appear as intended in Ripple.
Please use plain text.
Developer
peardox
Posts: 1,229
Registered: ‎03-20-2011
My Device: Playbook, Z10 LE, Dev Alpha B, 2x Dev Alpha C

Re: Strange CSS behaviour with webworks and Blackberry Bold 9900

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




Click the like button if you find my posts useful!
Please use plain text.
New Contributor
Iyashu
Posts: 5
Registered: ‎05-17-2013
My Device: Blackberry Bold 9900

Re: Strange CSS behaviour with webworks and Blackberry Bold 9900

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.

Please use plain text.