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
Developer
anphorea
Posts: 131
Registered: ‎11-27-2012
My Device: Z10 LE,Dev Alpha C
My Carrier: China Mobile

HELP!! Something strange on my action-bar items

This is the example of action-bar:

example.png

all things are fine,but when I tried ,it looks like :

mine.png

 

The Caption became small and the color isn't right too.

 

then I checked the code and found nothing different, here's my code(part):

 

the index:

<html>
<head>
<link href="bbui.css" rel="stylesheet" type="text/css" />
<script src="bbui.js" type="text/javascript"></script>
<script src="local:///chrome/webworks.js" type="text/javascript"></script>
<script type="text/javascript">
			var webworksreadyFired = false,
				darkColoring = false,
				darkScreenColor = 'black';
			
			window.addEventListener('load',function() {
				document.addEventListener('webworksready', function(e) {
					// This is code to ensure that if webworksready is fired multiple times we still only init() one time
					if (webworksreadyFired) return;
					webworksreadyFired = true;

					var config;
					// Toggle our coloring for testing 
					if (darkColoring) {
						config = {controlsDark: true,
								listsDark: true};
					} else {
						config = {controlsDark: false,
								listsDark: false,
								coloredTitleBar: true};
					}
					
					// Handle styling of the screen before it is displayed
					config.onscreenready = function(element, id) {
												if (darkColoring) {
													var screen = element.querySelector('[data-bb-type=screen]');
													if (screen) {
														screen.style['background-color'] = darkScreenColor;
													}
												}
												
											
											};
					// Handle styling of the screen after it is displayed
					config.ondomready = function(element, id, params) {
												};
					
					// You must call init on bbUI before any other code loads.  
					// If you want default functionality simply don't pass any parameters.. bb.init();
					bb.init(config);
					if (darkColoring) {
						document.body.style['background-color'] = darkScreenColor;
						document.body.style['color'] = 'white';
					}
					bb.pushScreen('main.html', 'main');
				}, false);
				}, false);
		</script></head>
</html>

 and my main.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

<div data-bb-type="screen">

  <div data-bb-type="action-bar">
      <div data-bb-type="action" data-bb-style="tab" data-bb-overflow="true" data-bb-img="icon/ic_home.png" data-bb-accent-text="Bar" >Home</div>
  </div>
</div>

 

I don't know why.

 

and I used web inspector to see if there's any difference between , I found my Caption matchs a table style ,which the example doesn't.

 

so, WHY ?

 

Thanks !

/*
WebWorks Developer
*/
Please use plain text.
Developer
anphorea
Posts: 131
Registered: ‎11-27-2012
My Device: Z10 LE,Dev Alpha C
My Carrier: China Mobile

Re: HELP!! Something strange on my action-bar items

No one can solve this ?
/*
WebWorks Developer
*/
Please use plain text.
BlackBerry Development Advisor
twindsor
Posts: 803
Registered: ‎07-15-2008
My Device: Z10
My Carrier: Bell

Re: HELP!! Something strange on my action-bar items

This is latest bbUI, on which version of OS?

 

You might also want to bring this up on the bbUI.js GitHub project.

Tim Windsor
Application Development Advisor II
Please use plain text.