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
billfoust
Posts: 382
Registered: ‎05-19-2008
My Device: BlackBerry Torch
Accepted Solution

How to fill the whole screen with background color?

This doesn't seem like it should be hard, but it sure seems to be. I set the background color on the <body> of my page, but it only fills half the screen in the simulator. It's a small page.

 

OK, so I went to some styles. I set the body style to height:100%;min-height:100%. That didn't work either. Then I added a <div> which wrapped the rest of the content in my page, and set the style to the same height:100%;min-height:100%. Still nothing. 

 

What gives? The simulator sure seems to ignore them all.

 

I'm using the VS plugin and simulating with the Storm simulator.

 

Thanks,

Bill

 

Bill
-------------------------------------------
Check out my book on BlackBerry Development for Java.
And my other really really old book
My Apps: FlashKids
Please use plain text.
Developer
ProfHawking
Posts: 46
Registered: ‎02-16-2011
My Device: 8300>9000>9700>9900>Z10

Re: How to fill the whole screen with background color?

Have you tried setting the viewport meta tag?

This works for me:

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
	<head>
		<meta name="viewport" content="width=device-width,height=device-height"/>
		<meta id="touch-event-mode" content="native"/>
		<title>Test</title>
		<style type="text/css">
			body {
				background-color: #ff0000;
			}
		</style>		
	</head>	
	<body>
		Your Content goes here
	</body>
</html>

 

 

Please use plain text.
BlackBerry Development Advisor
tneil
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: How to fill the whole screen with background color?

in the onload of the body you can also perform this line of code:

 

document.body.style.height = screen.height + 'px';
Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Please use plain text.
Developer
billfoust
Posts: 382
Registered: ‎05-19-2008
My Device: BlackBerry Torch

Re: How to fill the whole screen with background color?

Thanks to you both! I had no clue about the meta-data trick, but chose to go the javascript way since I already use it.

 

Bill

 

Bill
-------------------------------------------
Check out my book on BlackBerry Development for Java.
And my other really really old book
My Apps: FlashKids
Please use plain text.
Developer
bnolan001
Posts: 130
Registered: ‎02-19-2011
My Device: Bold 9930 and PlayBook

Re: How to fill the whole screen with background color?

In case you wanted to try doing a gradient you could do the following with CSS:

 

 

body{
  background: -webkit-gradient(linear, left top, right bottom, from(#0FF), to(#000));	
}

 

 

"Not to know what happened before you were born is to be forever a child." Marcus Tullius Cicero
Please use plain text.