[AC-3180] Orientation based styling like platform & formFactor in TSS
| GitHub Issue | n/a |
|---|---|
| Type | New Feature |
| Priority | n/a |
| Status | Resolved |
| Resolution | Duplicate |
| Resolution Date | 2015-02-11T22:04:13.000+0000 |
| Affected Version/s | n/a |
| Fix Version/s | n/a |
| Components | Alloy, Titanium SDK & CLI |
| Labels | TCSupportTriage, alloy, dynamic, orientation, styling, tss |
| Reporter | Patrick van Vuuren |
| Assignee | Mauro Parra-Miranda |
| Created | 2014-07-23T07:50:21.000+0000 |
| Updated | 2016-03-08T07:57:34.000+0000 |
Description
Hello,
With using Alloy for a while now, I would like to know if it's possible to add a feature to the titanium style sheets to base styling on orientation.
For example now we have a platform or formFactor we can add to an element to define specific styling. Like this:
"Label[platform=ios]": {
width: "90%"
},
"Label[formFactor=tablet]": {
width: "40%"
}
Is it possible to add orientation to this? For example:
"Label[orientation=portrait]" {
..
}
"Label[orientation=upside_portrait]" {
..
}
"Label[orientation=landscape_left]" {
..
}
"Label[orientation=landscape_right]" {
..
}
Or even shortcuts for both portraits and landscapes:
"Label[orientation=portrait]": {
..
}
"Label[orientation=landscape]": {
..
}
This would be an awesome feature without having to change the style of elements on an orientationchange event every time.
I hope you will be able to work it out.
Sincerely,
Patrick van Vuuren
Hi, This option is possible using [Custom Query Styles](http://docs.appcelerator.com/platform/latest/#!/guide/Alloy_Styles_and_Themes-section-35621526_AlloyStylesandThemes-CustomQueryStyles). Since Alloy 1.4, you can create custom queries to select which styles to apply in both the TSS and XML files. These query statements must return a boolean value. Custom query styles override all styles, that is, class, id, and markup element styles, except the ones defined as attributes in the XML file. Thanks
Hello [~Serfenia]! Does the last suggestion from [~mrahman] solve the issue? Best Regards!
Hello Mauro, That solves the issue for most of it, but a nicer implementation in my opinion would be as I suggested. Now I have to change the boolean value on the orientationchange event every time, and the styles will change accordingly. If something like that could happen automatically it would've been nicer. Regards, Patrick van Vuuren
Just tried your solution, for some reason it doesn't work. In the orientationchange event I edit my custom Alloy.Globals.IS_PORTRAIT or Alloy.Globals.IS_LANDSCAPE variables, but it doesn't update the views when the orientation is changed. Does the custom query style function detect changes of those variables during runtime of the application? Also when specifying, it always seems to pick the last defined style with or without a query style. Both my variables are false and still picks the style from the landscape variable. Defined like: ".day": { backgroundRepeat: true, height: Ti.UI.FILL, width: Ti.UI.SIZE, layout: 'horizontal' }, ".day[if=Alloy.Globals.IS_PORTRAIT]":{ width: 150 }, ".day[if=Alloy.Globals.IS_LANDSCAPE]":{ width: 300 }, Regards, Patrick van Vuuren
I have a similar issue: http://developer.appcelerator.com/question/178351/alloy-responding-to-orientation-change-in-current-view
Alloy does not support this feature currently. I've added a linked ticket, which I'm afraid has been open for a while. Please watch that ticket. I'm not sure when we'll get a chance to prioritize this new feature. But the more watchers the more likely it will get bumped to the top.