PDA

View Full Version : orientation change and css



wellsbr01
1 Dec 2010, 2:19 PM
Hi,

I have some docked panels styled with some css classes and background images. How can I change the cls of a component upon a resize or orientation event?

Cheers,

mrsunshine
1 Dec 2010, 3:38 PM
you can style you stuff based on the orientation the classes are

.x-landscape
and
.x-portrait

the class change depending on the orientation

if you need the current value in your js code you can access it with
Ext.Viewport.orientation

wellsbr01
1 Dec 2010, 4:45 PM
I'm not following, could you ellaborate a bit?

Thanks!
W.

mrsunshine
2 Dec 2010, 1:26 AM
take a look to your dom, depending on the orientation of your device the dom of your panel contains a class.
.x-landscape
or
.x-portrait

wellsbr01
2 Dec 2010, 4:01 AM
Hum! Ok, got it!
So, if it is improper I can set the proper one or that's an internal setting?

kortovos
2 Dec 2010, 4:24 AM
Does these classes get update automatically on orientation change?

wellsbr01
2 Dec 2010, 9:02 AM
Yes, at least of a background image.

kortovos
2 Dec 2010, 11:31 PM
I am not to concerned about a background image, but more about the size of panels and components.

wellsbr01
3 Dec 2010, 3:32 AM
Yes, all dimensions change accordingly. Not only that, positioning of certain elements change too. For instance, a bottom indicator changes into a rightside indicator.

kortovos
3 Dec 2010, 3:46 AM
Thanks for the advice. I will definitely try it out as soon as I am finished with my current assignment. Once I have experimented somewhat with it, I will post an example on this forum.

irocker
17 Dec 2010, 9:28 AM
How can we specify different a background image for phone vs. tablet?

RWaters
17 Dec 2010, 9:58 AM
How can we specify different a background image for phone vs. tablet?

There's a bunch of other helper classes that are applied.
.x-desktop
.x-ios
.x-andriod
.x-phone
.x-tablet