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
o0
Contributor
o0
Posts: 26
Registered: ‎05-13-2010
My Device: developper...
My Carrier: developper...

How to prevent CSS resizing when Storm changes orientation?

[ Edited ]

Because my Web Widget needs to work on Bolds and Storm devices, I already take landscape and portrait mode into account. However when a Storm is tilted, it seems to magically change the way it displays text and images as if the resolution of the screen has changed.

 

If you start in portrait mode, and switch to landscape, everything is bigger than it should.

If you start n landscape mode, then switch to portrait, everything gets smaller.

 

 

This completely messes my layout and javascript code up. Is there a way to prevent this?

 

oO

Please use plain text.
Developer
jmace
Posts: 482
Registered: ‎10-24-2008
My Device: 9300
My Carrier: AT&T

Re: How to prevent CSS resizing when Storm changes orientation?

[ Edited ]

There is a window.onorientationchange  function you can capture where you can use javascript to correctly restyle your widget.

 

something like ...

 

 

<script type="text/javascript">

window.onorientationchange = function () {
   //your work here
   document.getElementById("dataDiv").style.width = screen.width+ "px";
} 

</script>

 

 

_________________________________________
www.jasonmace.com/blackberry
Please use plain text.
o0
Contributor
o0
Posts: 26
Registered: ‎05-13-2010
My Device: developper...
My Carrier: developper...

Re: How to prevent CSS resizing when Storm changes orientation?

I don't think that's correct, because the all of the images are displayed smaller/bigger than they should depending on what is the orientation at start and what it is changed to.

 

oO

Please use plain text.
Developer
jmace
Posts: 482
Registered: ‎10-24-2008
My Device: 9300
My Carrier: AT&T

Re: How to prevent CSS resizing when Storm changes orientation?

[ Edited ]

can you share the code you tried in the function to make your items resize correctly?

_________________________________________
www.jasonmace.com/blackberry
Please use plain text.
New Contributor
BradThor66
Posts: 7
Registered: ‎06-03-2010
My Device: 9700 Bold
My Carrier: None

Re: How to prevent CSS resizing when Storm changes orientation?

[ Edited ]

I believe i am experiencing the same issue that the OP describes.

 

I put together a sample app to illustrate the problem.

 

I have a fixed width|height (480w X 360h)  for my app with the intent of adjusting height/width depending on the handset, but for this iteration we are just concentrating on the Bold.

 

However, I cannot seem to get the right configuration for the Storm...the problem is the "zoom" effect

that OP described.

 

The enclosed shots are using the "initial-scale=1.0" which rsults in an obvious change in zoom when the phone goes from portrait to landscape orientation.

 

When I set "initial-scale=0.0" the app looks right in landscape view, but then zooms OUT when

the app is in portrait - again... not the desired behavior.

 

What i want is for the app to remain in the proper 480x360 proportion regardless of what orientation its in - so that in our next iteration, i can code the size adjustments in the window.onorientationchange function.

 

My efforts to resize the body in the window.onorientationchange function do not seem to overcome this "zoom" effect.

 

Portrait (app is displayed in proper - albeit overflowing - 480x360)

2503i218BE562C60FFBD4

Landscape (zoom effect giving WTF result)

 

2504iDFE2B3896971D8C8

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

Re: How to prevent CSS resizing when Storm changes orientation?

[ Edited ]

In 5.0, the browser changes the user scale of the content when you change orientation.  This was done to render the content quickly instead of trying to re-layout the page.

 

On some early builds of 5.0, you can use jmace's example to resize the height of the body which would trigger a re-layout.

 

On newer builds of 5.0 this trick no longer worked.  I haven't been able to find a reliable way yet to change the user scale back on orientation change.

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Please use plain text.
Developer
jmace
Posts: 482
Registered: ‎10-24-2008
My Device: 9300
My Carrier: AT&T

Re: How to prevent CSS resizing when Storm changes orientation?

Tim is right, I just tried an older project of mine on the newer simulators and I am having an issue with the rotational zoom as well.

 

Here is the CSS I think should make my white DIV just inside of the page, but instead it leaks off slightly to the right.

 

.main-panel 
{
	position:relative;
	margin-left: 2%;
	margin-right: 2%;
	top:30%;
	
}

 

 

 

2518iC72714F581CC3E642519i5565829C3B0CAC41

 

 

_________________________________________
www.jasonmace.com/blackberry
Please use plain text.
Visitor
nroviw
Posts: 1
Registered: ‎01-14-2011
My Device: Not Specified

Re: How to prevent CSS resizing when Storm changes orientation?

Hi all,

I'm currently addressing this issue by forcing a reload on orientation change event. I put in window.onorientationchange = function() {updateOrientation();}; and set the updateOrientation to detect orientation and run window.location.reload();

 

Hope it can be of some help.

Please use plain text.