Master page, form and webtab are all set to a width="100%". There are 5 tabs on the webtab. The first tab shows just 2 columns horizontally and do not exceed the width of the device in portrait or landscape and appear perfect when first displayed. The last tab has a webdatagrid set to a width of 100% also and I do not want to set each column as a percentage but the grid exceeds the physical width of the device and does allow you to scroll vertically and horizontally as expected.
But when the user then clicks back to the first tab which only shows 2 columns vertically, the font is reduce in size. It is almost as though the IPAD thinks the width required is the width from the tab with the grid on it.
The does not do this on a PC.
How can I force the 1st tab to render based on the 100% width of the device?
Hello rooketrusted,
Width or height set to 100% means that the container will expand as much as the nested container size is. This does not mean that the container should be 100% of the device size this is expected. If you need to set its width according to the device size you need to detect it and to change the container size when all of the elements are loaded.
You can follow the links for more details:
http://www.ilovecolors.com.ar/detect-screen-size-css-style/
http://www.w3schools.com/css/css_mediatypes.asp
http://www.w3.org/TR/css3-mediaqueries/
I hope this helps.
Sincerely,
Georgi Sashev
Developer Support Engineer
Infragistics, Inc.
http://es.infragistics.com/support