+1

Double Column Panel not stretching to width of screen on rotate

sovtek 7 years ago updated 7 years ago 3
If you view my NFL Magazine App, and open the table of contents (2nd button from left), you can see that I have a double column layout. While keeping this table of contents open, rotate the device. You'll notice that only the last item in the list changes it's formatting correctly. All other toc items look as if the orientation has not changed. If you close the TOC and open it back up, it corrects itself. Any idea why this is happening? The tocRow is set to 100% and the storyL and storyR are both set to 50%. I made the background of the tocRow blue for debugging. Seems like its the tocRow that is not changing correctly when the device rotates.



<class name="tocRow">
<panel name="tocRow-[param:rowId]" width="100%" height="170" padding-bottom="3" style="bgBlue">
<panel name="storyL" width="50%" lwidth="50%" height="170" align="left" onclick="loadStoryFromTOC" clicktarget="../../MAG" _storyStartPos="[param:posL]">
<panel name="imgContainer" width="144" height="155" xpos="5" ypos="5">
<image name="storyImg" source="[param:imgSrcL]" width="144" xpos="0" ypos="0"></image>
</panel>
<text name="storyName" text="[param:nameL]" lwidth="300" width="300" height="25" alignment="left" xpos="170" ypos="23" font="HelveticaNeue-Light" size="21" color="#FFFFFF" onclickup="hideToc" onclick="page" clicktarget="../../MAG" _page="[param:posL]"></text>
<text name="storyInfo" lwidth="300" width="195" height="90" alignment="left" lypos="45" xpos="170" ypos="45" font="HelveticaNeue-Light" size="12" color="#ebebeb" text="[param:infoL]"></text>
<text name="storyAuthor" lwidth="290" width="180" height="25" alignment="left" xpos="170" ypos="135" font="HelveticaNeue" size="12" color="#7f7f7f" text="[param:authorL]"></text>
<text name="storyPos" width="25" height="25" alignment="left" align="right" ypos="135" font="HelveticaNeue" size="12" color="#7f7f7f" text="[param:posL]"></text>
</panel>
<panel name="storyR" width="50%" lwidth="50%" height="170" align="right" onclick="loadStoryFromTOC" clicktarget="../../MAG" _storyStartPos="[param:posR]">
<panel name="imgContainer" width="144" height="155" xpos="5" ypos="5">
<image name="storyImg" source="[param:imgSrcR]" width="144" xpos="0" ypos="0"></image>
</panel>
<text name="storyName" text="[param:nameR]" lwidth="300" width="300" height="25" alignment="left" xpos="170" ypos="23" font="HelveticaNeue-Light" size="21" color="#FFFFFF" onclickup="hideToc" onclick="page" clicktarget="../../MAG" _page="[param:posR]"></text>
<text name="storyInfo" lwidth="300" width="195" height="90" alignment="left" lypos="45" xpos="170" ypos="45" font="HelveticaNeue-Light" size="12" color="#ebebeb" text="[param:infoR]"></text>
<text name="storyAuthor" lwidth="290" width="180" height="25" alignment="left" xpos="170" ypos="135" font="HelveticaNeue" size="12" color="#7f7f7f" text="[param:authorR]"></text>
<text name="storyPos" width="25" height="25" alignment="left" align="right" ypos="135" font="HelveticaNeue" size="12" color="#7f7f7f" text="[param:posR]"></text>
</panel>
<panel name="darkHighlight" width="100%" height="1" ypos="168" background="#000000"></panel>
<panel name="lightHighlight" width="100%" height="1" ypos="169" background="#282828"></panel>
</panel>
</class>

<panel name="TOCPANEL" alias="TOCPANEL" width="100%" height="100%" ypos="-101%" hidden="no" background="#000000" padding-top="70" alpha=".9">
<list name="tocList" alias="TOCLIST" width="100%" height="100%" datasource="tocFeed" orientation="vertical" paginate="no" align="center">
<object datasource="tocFeed" name="tocRow" class="tocRow" rowId="[param:id]" nameL="[param:nameL]" posL="[param:posL]" authorL="[param:authorL]" infoL="[param:infoL]" imgSrcL="[param:imgSrcL]" nameR="[param:nameR]" posR="[param:posR]" authorR="[param:authorR]" infoR="[param:infoR]" imgSrcR="[param:imgSrcR]"></object>
</list>
</panel>

Are you sure that the [param:id] in the <object> tag inside of your tocList is unique? Usually we rely on [param:dataSourceIndex] to guarantee unique names for object->classes instantiating. Unique naming is very important for orientation resizing.
Ill check it out. Good to know that unique naming is critical for orientation resizing.

Thanks Matt!
Thanks for the tip Matt. Turns out my param:id that was coming from the json feed was supposed to be param:rowId in the first place. Works fine now.