TVML scrolling too much

Question

TVML scrolling too much

330 Views Asked by coco At 21 October 2024 at 05:19

I am using the productTemplate in the Apple TV Markup Language. It works fine, but when the user scrolls to an item in the "shelf area" (below the top banner), the entire screen scrolls up so that much of the "banner area" (especially the "stack title") is hidden.

The size of the shelf icons I am using do not require scrolling to view. If I make the icons really really small, then there is no scrolling, but it looks terrible at that size.

Is there any way to control, or turn off, scrolling on the productTemplate?

Original Q&A

There are 1 best solutions below

**mpakkan** · Answer 1

If you want to use just one shelf area and nothing below the fold then you can do some styling. For example you can try this template, works for me;

<?xml version="1.0" encoding="UTF-8" ?>
<document>
<head>
    <style>
        .bannerStyle { height:685; }
        .infoListStyle { margin: 132 0 0 0; height:550; }
        .ratingTitleStyle { font-size: 47px; margin: 24 0 0 0; }
        .directorInfoStyle { margin: -20 0 0 0; }
        .castInfoStyle { margin: -20 0 0 0; }
        .shelfStyle { padding: 0 0 -95 50; }
    </style>
</head>
<productTemplate>
    <banner class="bannerStyle">
        <infoList class="infoListStyle">
            <info>
                <header>
                    <title><badge src="{{imdbBadge}}" /></title>
                </header>
                <text class="ratingTitleStyle">{{imdbRating}}</text>
            </info>
            <info>
                <header class="directorInfoStyle">
                    <title>DIRECTOR</title>
                </header>
                <text>{{director}}</text>
            </info>
            <info>
                <header class="castInfoStyle">
                    <title>CAST</title>
                </header>
                {{actors}}
            </info>
        </infoList>
        <stack>
            <title>{{title}}</title>
            <row>
                <text>| {{runTime}} |</text>
                <text>| {{genres}} |</text>
            </row>
            <description handlesOverflow="true" moreLabel="MORE">{{description}}</description>
            <text>{{language}}</text>
            <row>
                {{buttons}}
            </row>
        </stack>
        <heroImg src="{{heroImgSrc}}" />
    </banner>
    <shelf class="shelfStyle" autoHighlight="true">
        <header>
            <title>Movies</title>
        </header>
        <section>
            <lockup autoHighlight="true"><img src="{{activeMovieImg}}" width="150" height="226" /><title>{{activeMovieTitle}}</title></lockup>
            {{otherMovies}}
        </section>
    </shelf>
</productTemplate>

TVML scrolling too much

There are 1 best solutions below

Related Questions in TVOS

Related Questions in TVML

Trending Questions

Popular # Hahtags

Popular Questions