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
Highlighted
Developer
Posts: 25
Registered: ‎12-09-2012
My Device: Z10
My Carrier: Congstar Germany

BBJQM issue with actionbar / tab overflow menu

Hey,

I have an issue with the BB JQuery Mobile theme. The actionbar is behaving odd.

I used the kitchen sink example to do this (and just update to the latest CSS and js files).

 

The left/right tab overflow menu looks like that on Ripple:

issueBBJQM.jpg

 

 

 The second issue is, that clicking on the items works fine and function are triggered as supposed to be, but

the left/right Tab overflow menu are not sliding in. I have to click outside of the area to make them move in!

 

 

My code for left side menu:

 

<!-- This is how you set up your tab overflow menu (left side panel) -->
<div data-role="panel" id="left" data-dark-modal="true" data-position="left" data-display="reveal" data-theme="a" class="bb10-panel">
<ul data-role="listview" data-theme="a">
<li id="aldi" class="inBar"><a href="#">Aldi</a></li>
<li id="asda" class="inBar"><a href="#">Asda</a></li>
<li id="boots" class="inBar"><a href="#">Boots</a></li>
</ul>

</div>

 

 

Any suggestions?

 

Regards,

Felix

 

Developer
Posts: 213
Registered: ‎10-02-2010
My Device: Z10 and Z30
My Carrier: Play and Plus

Re: BBJQM issue with actionbar / tab overflow menu

I just checked our sample available on github and I don't see this isse. Could you open this address in Ripple and check if everything is working ok?:

 

http://blackberry.github.io/jQueryMobile-BB10-Theme/kitchenSink/

 

Developer
Posts: 25
Registered: ‎12-09-2012
My Device: Z10
My Carrier: Congstar Germany

Re: BBJQM issue with actionbar / tab overflow menu

I don't know what went wrong here! I installed a compare software and compared the kitchen sink example with mine and I was missing 

<!DOCTYPE HTML>

and

<!--<meta name="viewport" content="width=device-width, initial-scale=1">-->

 

at the top!

Now working fine!

 

Thanks for your help!