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
Contributor
Posts: 27
Registered: ‎03-24-2011
My Device: Playbook, Developer
My Carrier: --
Accepted Solution

Playbook layout design

I'm developing a playbook application using WebWorks. The html and css files look good in landscape mode but they shrink in the portrait mode(both images and text shrink). I tried font sizes of 12, 14  and 16 but still the text gets shrunk in the portrait mode. How do we avoid this ?

 

My html code is as follows:

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body{
 margin:0;
 padding:0;
 width:100%;
 height:100%;
 background:#09F;
 border:solid 1px #3FF;
}
</style>
</head>
<body>
<div style="width:100%; height:100%; background:#3CF"><FONT SIZE=+10% COLOR="purple"> Hello How you doing </FONT></div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><style type="text/css">body{ margin:0; padding:0; width:100%; height:100%; background:#09F; border:solid 1px #3FF;}</style></head><body><div style="width:100%; height:100%; background:#3CF"><FONT SIZE=+10% COLOR="purple"> Hello How you doing </FONT></div></body></html>

 

Retired
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: Playbook layout design

Have you tried the following meta tag?  Also, depeding on what build of the browser was on the 0.9.4 Beta simulator, there may be bugs with switching between portrait/landscape

 

<meta name="viewport" content= "width=device-width, height=device-height, initial-scale=1.0">
Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Posts: 94,685
Likes: 24,430
Solutions: 6,357
Registered: ‎04-01-2008
My Device: Passport • Z30 • Z10 • Torch9850 • Playbook
My Carrier: Verizon

Re: Playbook layout design

You're double and triple posting in the forum in many different sections. People frown on that.

 

if you find you've initially posted in the wrong section, please use the "report inappropriate content" link below your name to ask a moderator to mover your thread to the desired section, rather than posting it again and again.

 

http://supportforums.blackberry.com/t5/BlackBerry-WebWorks/Playbook-layout-design/m-p/965415

 

Good luck.

>> NEW! 10% discount on BlackBerry devices from ShopBlackBerry.com, including PRIV


1. If any post helps you please click the Like Button below the post(s) that helped you.
2. Please resolve your thread by marking the post "Solution?" which solved it for you!
3. Install free BlackBerry Protect today for backups of contacts and data.
4. Guide to Unlocking your BlackBerry & Unlock Codes
Join our BBM Channels (Beta)
BlackBerry Support Forums Channel
PIN: C0001B7B4   Display/Scan Bar Code
Knowledge Base Updates
PIN: C0005A9AA   Display/Scan Bar Code
Contributor
Posts: 27
Registered: ‎03-24-2011
My Device: Playbook, Developer
My Carrier: --

Re: Playbook layout design

I'm using 0.9.3 simulator

 

These are the screen shots after adding below line in html

<meta name="viewport" content= "width=device-width, height=device-height, initial-scale=1.0">

 

the quality of the text reduces and images shrink too. Please give me some solution.

Do i need to create two layouts for landscape and portrait, if so how do i detect change in screen orientation.

 

Portrait

 

landscape.png

 

 

 

 



Contributor
Posts: 27
Registered: ‎03-24-2011
My Device: Playbook, Developer
My Carrier: --

Re: Playbook layout design

sorry about multiple postings i did not know how to delete them. Hope i have corrected it now.

 

Retired
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: Playbook layout design

I would recommend recompiling your App with with WebWorks Beta 3.  Code compiled with Beta 2 is not binary compatible with the latest operating system that will be released on the device.

 

Make sure you backup your code signing keys before uninstalling Beta 2 and installing Beta 3

 

You will also want to download the 0.9.4 simulator and test on it.  

 

See how it looks on 0.9.4 to see if it has corrected your portrait issue.

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Contributor
Posts: 27
Registered: ‎03-24-2011
My Device: Playbook, Developer
My Carrier: --

Re: Playbook layout design

hi,

 

i tried it with webworks beta 3 and simulator 0.9.4 but still the text is getting shrunk as shown in the previous image.

 

I tried installing weather demo app and same thing happens. 

 

How should i position components like buttons, text field etc., should i use px, em or %.

 

It will be helpful if you can point me some demo 

Retired
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: Playbook layout design

many people use css media queries to load different css automatically when the orientation changes

 

 

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Contributor
Posts: 27
Registered: ‎03-24-2011
My Device: Playbook, Developer
My Carrier: --

Re: Playbook layout design

It's not the issue with the css.

 

Here is my code and screen shot of how it looks on the simulator:

In portrait mode the text is shrunk vertically and expanded horizontally.

 

 

<head>
<meta name="viewport" content= "width=device-width, height=device-height, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body{
 margin:0;
 padding:0;
 width:100%;
 height:100%;
 background:#09F;
 border:solid 1px #3FF;
}
</style>
</head>
<body>
<div style="width:100%; height:100%; background:#3CF"><FONT SIZE=13px COLOR="purple"> Hello How you doing </FONT></div>
</body>
</html>

 

 

image2.PNG

Retired
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: Playbook layout design

This could simply be an issue in the simulator.  With my PlayBook it has no issues with going from landscape to portrait for sizing/squishing fonts.  It will adjust the user scale if it hasn't been specified in meta tags.

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter