I am trying to use the splitPane component as the basis for a desktop/mobile application that I am developing.
It works fine on the desktop, but there is a screen scaling issue on the mobile device.
It occurs when you view the app in portrait mode, then orientate to landscape and finally orientate back to portrait.
The app changes scale so that the second time we go to portrait mode the size of everything has reduced.
The attached images show the following:
1.png: Initial app open in portrait mode
2.png: Rotate to landscape
3.png: Rotate back to portrait.
However, if I change the width of the splitPane to 90%, it seems to work as expected. ie. The scaling is correct when I go back to portrait mode to second time.
My software versions are as follows:
Smartclient version: SNAPSHOT_v10.1d_2015-04-28/LGPL Deployment
Mobile phone: Nexus 4
Android version: 5.1.0
Chrome version: 42.0.2311.109
Below is my source code for this example.
It works fine on the desktop, but there is a screen scaling issue on the mobile device.
It occurs when you view the app in portrait mode, then orientate to landscape and finally orientate back to portrait.
The app changes scale so that the second time we go to portrait mode the size of everything has reduced.
The attached images show the following:
1.png: Initial app open in portrait mode
2.png: Rotate to landscape
3.png: Rotate back to portrait.
However, if I change the width of the splitPane to 90%, it seems to work as expected. ie. The scaling is correct when I go back to portrait mode to second time.
My software versions are as follows:
Smartclient version: SNAPSHOT_v10.1d_2015-04-28/LGPL Deployment
Mobile phone: Nexus 4
Android version: 5.1.0
Chrome version: 42.0.2311.109
Below is my source code for this example.
Code:
<HTML><HEAD>
<SCRIPT>var isomorphicDir="smartclientRuntime/isomorphic/";</SCRIPT>
<SCRIPT SRC=smartclientRuntime/isomorphic/system/modules/ISC_Core.js></SCRIPT>
<SCRIPT SRC=smartclientRuntime/isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
<SCRIPT SRC=smartclientRuntime/isomorphic/system/modules/ISC_Containers.js></SCRIPT>
<SCRIPT SRC=smartclientRuntime/isomorphic/system/modules/ISC_Grids.js></SCRIPT>
<SCRIPT SRC=smartclientRuntime/isomorphic/skins/Graphite/load_skin.js></SCRIPT>
</HEAD>
<BODY>
<script>
isc.setAutoDraw(false);
// Page.setEvent( "orientationChange","alert('orientationChange')" );
var splitPane = isc.SplitPane.create({
autoDraw:true,
navigationTitle:"Functions",
showLeftButton:false,
showRightButton:false,
width: '100%',
height: '100%'
});
var navigationPane = isc.VLayout.create ({
members: [
isc.Button.create({ title: "Function 1", click: function () { splitPane.showDetailPane() } }),
isc.Button.create({ title: "Function 2", click: function () { splitPane.showDetailPane() } }),
isc.Button.create({ title: "Function 3", click: function () { splitPane.showDetailPane() } }),
isc.Button.create({ title: "Function 4", click: function () { splitPane.showDetailPane() } }),
]
})
var detailPane = isc.VLayout.create ({
members: [
isc.ListGrid.create({
ID: "countryList",
width: "100%",
height: "100%",
fields:[
{name:"countryCode", title:"Code"},
{name:"countryName", title:"Country"},
{name:"capital", title:"Capital"}
],
data:[
{countryCode:"US", countryName:"United States", capital:"Washington, DC"},
{countryCode:"CH", countryName:"China", capital:"Beijing"},
{countryCode:"SP", countryName:"Spain", capital:"Madrid"},
{countryCode:"KS", countryName:"South Korea", capital:"Seoul"},
{countryCode:"ID", countryName:"Indonesia", capital:"Jakarta"}
]
})
]
})
splitPane.setDetailPane(detailPane);
splitPane.setNavigationPane(navigationPane);
</script>
</body>
</html>