Search code examples
tvosapple-tvtvmltvjs

Line Wrap description text in a compilationTemplate's relatedContent area in TVML

How can I wrap the description text in the relatedContent area of a compilationTemplate?

appletv

My description tag:

<description style="tv-text-style: none; font-size:36; font-weight:regular; word-wrap:break-word;">lorem ipsum dolor sit amet consectetur adipiscing elit</description>

Full template:

var Template = function() { return `<?xml version="1.0" encoding="UTF-8" ?>
    <document>
        <compilationTemplate theme="light">
            <list>
                <relatedContent>
                    <itemBanner>
                        <heroImg src="${this.BASEURL}images/shows/bates/BRANDHD2398_AEN_BATE_168121_TVE_000_2398_60_20160303_00_S3_REV_HD_1920x1080-16x9.jpg" />
                        <description style="tv-text-style: none; font-size:36; font-weight:regular; word-wrap:break-word;">lorem ipsum dolor sit amet consectetur adipiscing elit</description>
                    </itemBanner>
                </relatedContent>
                <header>
                    <title>Bates Motel</title>
                    <subtitle>Season 4</subtitle>
                </header>
                <section>
                    <listItemLockup>
                        <ordinal minLength="2">1</ordinal>
                        <title>A Danger to Himself and Others</title>
                        <decorationLabel>11:14</decorationLabel>
                    </listItemLockup>
                    < !-- ... -- >
                </section>
            </list>
        </compilationTemplate>
    </document>`
}

The text size changes, but the description truncates instead of wrapping to the next line.

Solution

  • Modify pre-defined description area with min-height, max-height styles? with tv-text-max-lines. Example in https://github.com/iBaa/PlexConnectApp/blob/master/PlexConnectApp/TVMLTemplates/Fanart/Movie_PrePlay.xml, see class description and later usage.

    (Edited 14Apr16 based on comment and double-check)