- App Creation Studio
-
Fragen
+1
How to format variable length text in a list?
How can I make the text areas expand to fit the available text in a list from a feed? Say I have two fields, Heading and Description and want one to follow the other in the list and make both the panel containing the two text items and the text items themselves expand depending on the text inside?
I hope this makes sense, I'm struggling with formatting - I know I can make panels and text a fixed size but I don't know how much is coming back from a feed. In this example i've tried to put a panel inside a panel to then center the text so it looks a bit neater, but I just can't seem to get it quite right. I've also tried to use maxlength, fit, but sometimes the text still spills out of the panel. I hope this makes sense. Ignore the border colors I'm just trying to see where the panels are!
I hope this makes sense, I'm struggling with formatting - I know I can make panels and text a fixed size but I don't know how much is coming back from a feed. In this example i've tried to put a panel inside a panel to then center the text so it looks a bit neater, but I just can't seem to get it quite right. I've also tried to use maxlength, fit, but sometimes the text still spills out of the panel. I hope this makes sense. Ignore the border colors I'm just trying to see where the panels are!
<class name="article-list-item">
<panel name="article-[param:dataSourceIndex]" width="98%" height="120" lheight="120" _dataSourceIndex="[param:dataSourceIndex]" align="center" background="303339" borderwidth="1" bordercolor="ffff00">
<panel name="articleinside-[param:dataSourceIndex]" width="100%" height="90%" valign="center" align="left" borderwidth="1" bordercolor="ffffff">
<text name="headline" width="100%" height="fit" color="#707B51" font="Helvetica-Bold" size="18" align="left" alignment="left" text="[param:headline]" background="303339" onclickup="show-web" _url="[param:link]" fit="yes" maxlength="65" endcap="..." padding="8"></text>
<text name="description" width="100%" height="fit" color="#f0ffff" font="helvetica" size="14" align="left" bottomof="headline" alignment="left" text="[param:description]" background="303339" maxlength="170" endcap="..."></text>
</panel>
</panel>
Customer support service by UserEcho
You should be able to use the attribute fitheight="yes" on the panel containing the variable height text fields. This will then size that panel to the correct height based on the height of all of its children. Just be sure to use fitheight="yes" for all panels in the object that you're using within the class. Here's an example of how we're using it for one of our apps:
<class name="toc-item-culture"><panel name="toc-[param:page]" width="100%" fitheight="yes" _page="[eval: [param:index] + 2]" onclickup="goto" padding-bottom="25" >
<panel name="info" width="100%" fitheight="yes" bottomof="img" padding="11" >
<image name="img" source="issue/[datasource:article.[param:index].imageTOC]" width="70"></image>
<text name="rubric" width="100%" height="fit" xpos="80" color="#ff0000" font="TimesNewRomanPS-BoldMT" size="15" alignment="left" text="[datasource:article.[param:index].rubric]"></text>
<text name="hed" width="75%" height="fit" bottomof="rubric" xpos="80" color="#000000" font="TimesNewRomanPS-BoldMT" size="20" alignment="left" text="[datasource:article.[param:index].hed]"></text>
<text name="dek" width="75%" height="fit" bottomof="hed" xpos="80" color="#000000" font="TimesNewRomanPSMT" size="15" alignment="left" text="[datasource:article.[param:index].dekTOC]"></text>
<text name="by" width="75%" height="[eval: '[datasource:article.[param:index].byline]' != '' ? 'fit':'0']" bottomof="dek" xpos="80" color="#000000" font="TimesNewRomanPS-BoldMT" size="14" alignment="left" text="By [datasource:article.[param:index].byline]"></text>
</panel>
</panel>
</class>
You'll notice that this has a main panel, a child panel that contains an image and three text fields. The image and text fields will be dynamically sized based on content, so we put fitheight="yes" on the main panel and the secondary panel.
One note, there was a bug in earlier versions of our engine which kept fitheight from working as expected, so it's currently only supported in version 1.4. You should be able to see this in the most current version of Fusebox.
I have now got a better understanding of formatting, I have two more questions that relate to this code:
<wire>
<datasources>
<datasource name="RSSFeed" source="" query="//item" providertype="xml" parsenamespaces="yes" />
</datasources>
<classes>
<class name="article-list-item">
<panel name="article-[param:dataSourceIndex]" width="100%" fitheight="yes" _dataSourceIndex="[param:dataSourceIndex]" background="303339" borderwidth="0" bordercolor="ffff00" padding="2">
<panel name="info2" width="100%" fitheight="yes" padding="2" borderwidth="1" bordercolor="00ff00" >
<text name="headline" width="100%" height="fit" color="#707B51" font="Helvetica-Bold" size="18" align="left" alignment="left" text="[param:headline]" background="303339" fit="yes"></text>
<text name="description" width="100%" height="fit" color="#f0ffff" font="Helvetica" size="14" align="left" bottomof="headline" alignment="left" text="[param:description]" background="303339"></text>
</panel>
</panel>
</class>
</classes>
<main>
<panel name="BasePanel" width="100%" height="100%" borderwidth="1" bordercolor="ffffff" padding="2">
<panel name="InsidePanel" width="100%" height="100%" borderwidth="1" bordercolor="ffff00" padding="2">
<panel name="Heading" width="100%" height="20%" borderwidth="1" bordercolor="00ffff" valign="top" padding="10">
<text name="HeadingText" text="Heading" width="100%" height="100%" size="14" fit="yes" align="center" valign="center" color="ffffff"></text>
</panel>
<panel name="Rest" width="100%" height="80%" fitheight="yes" borderwidth="1" bordercolor="ff0000" valign="bottom">
<list name="list" datasource="RSSFeed" width="100%" lwidth="100%" height="100%" valign="bottom" align="center" orientation="vertical" paginate="no">
<object class="article-list-item" dataSourceIndex="[param:dataSourceIndex]" headline="[param:title]" description="[param:description]" link="[param:link]" pubdate="[param:pubdate]"/>
</list>
</panel>
</panel>
</panel>
</main>
<actions>
<action name="boot" oninit="yes">
<assign property="datasource:RSSFeed.source" value="http://defensesystems.com/rss-feeds/all.aspx" />
</action>
</actions>
</wire>
The last rss item always appears off the panel - as in I scroll to the end and have to hold my finger on the panel and scroll up to read the last item. I can't seem to make it fit!
Also if I start in landscape and rotate to portrait, the containing panel remains the same pixel size, not the percentage, but all seems to function correctly (you can see the panel size with the red line) is this right? Should I implement some code to re-size the panel on orientation?
Thanks.
Let me take a look at this example in an app and see what is going on.
After taking a look at this, it is associated with a known bug we still have outstanding with fitheight. As a workaround, you will need to create a class that contains a 1px high panel and place the corresponding object under your current list. This should correct the lost item as well as the rotation issues. Also you can't have heightfit="yes" AND height on the same object, which you had on the "Rest" panel. Here is the example again.
<wire>
<datasources>
<datasource name="RSSFeed" source="" query="//item" providertype="xml" parsenamespaces="yes" />
</datasources>
<classes>
<class name="article-list-item">
<panel name="article-[param:dataSourceIndex]" width="100%" fitheight="yes" _dataSourceIndex="[param:dataSourceIndex]" background="303339" borderwidth="0" bordercolor="ffff00" padding="2">
<panel name="info2" width="100%" fitheight="yes" padding="2" borderwidth="1" bordercolor="00ff00" >
<text name="headline" width="100%" height="fit" color="#707B51" font="Helvetica-Bold" size="18" align="left" alignment="left" text="[param:headline]" background="303339" fit="yes"></text>
<text name="description" width="100%" height="fit" color="#f0ffff" font="Helvetica" size="14" align="left" bottomof="headline" alignment="left" text="[param:description]" background="303339"></text>
</panel>
</panel>
</class>
<class name="hi">
<panel name="hi-[param:dataSourceIndex]" width="100%" height="1"></panel>
</class>
</classes>
<main>
<panel name="BasePanel" width="100%" height="100%" borderwidth="1" bordercolor="ffffff" padding="2">
<panel name="InsidePanel" width="100%" height="100%" borderwidth="1" bordercolor="ffff00" padding="2">
<panel name="Heading" width="100%" height="20%" borderwidth="1" bordercolor="00ffff" valign="top" padding="10">
<text name="HeadingText" text="Heading" width="100%" height="100%" size="14" fit="yes" align="center" valign="center" color="ffffff"></text>
</panel>
<panel name="Rest" width="100%" height="80%" fitheight="yes" borderwidth="1" bordercolor="ff0000" valign="bottom">
<list name="list" datasource="RSSFeed" width="100%" lwidth="100%" height="100%" valign="bottom" align="center" orientation="vertical" paginate="no">
<object class="article-list-item" dataSourceIndex="[param:dataSourceIndex]" headline="[param:title]" description="[param:description]" link="[param:link]" pubdate="[param:pubdate]"/>
<object class="hi" dataSourceIndex="[param:dataSourceIndex]" lhs="[param:dataSourceIndex]" operator="=" rhs="[param:dataSourceResultCount]"></object>
</list>
</panel>
</panel>
</panel>
</main>
<actions>
<action name="boot" oninit="yes">
<assign property="datasource:RSSFeed.source" value="http://defensesystems.com/rss-feeds/all.aspx" />
</action>
</actions>
</wire>