0 Replies
      Latest reply on Dec 30, 2015 2:28 PM by jrthomerson
      jrthomerson Level 1 Level 1 (0 points)

        I'm having a problem using listTemplate in my app because the banner does not function the same as it does in all other templates. We are using the banner as a primary navigation for the top-level sections of the app - which works great in all the templates I've used except listTemplate. Is this a bug? Is there some way to make this work?

         

        I'm showing sample code and screenshots below for listTemplate compared to stackTemplate. In both cases, the banner is the exact same markup, but behaves drastically different. Notice two differences:

        1. The buttons are all squished.
        2. (Not really noticable without a working example): When you scroll up to the buttons with the remote, it's difficult if not impossible to scroll back down to the list. On all other templates (like stackTemplate, etc) that I've tried, the buttons work fine - I can scroll up to and down from them.


        listTemplate screenshot: (https://dl.dropboxusercontent.com/u/25081383/appletv-forum-post-listTemplate.png)

         

        stackTemplate screenshot: (https://dl.dropboxusercontent.com/u/25081383/appletv-forum-post-stackTemplate.png)

         

         

        listTemplate sample code:

         

        <?xml version="1.0"?>
        <document>
          <listTemplate>
              <banner>
                <row>
                    <title>App Title</title>
                    <button class="primaryNavBtns" id="primaryBtns-0" route="categories/0"><text>Button 0</text></button>
                    <button class="primaryNavBtns" id="primaryBtns-1" route="categories/1"><text>Button 1</text></button>
                    <button class="primaryNavBtns" id="primaryBtns-2" route="categories/2"><text>Button 2</text></button>
                </row>
              </banner>
              <list>
                <section>
                    <header>
                      <title>Test Section Header Title</title>
                    </header>
                    <listItemLockup catKey="category0">
                      <title>List Item 0</title>
                      <relatedContent>
                          <itemBanner>
                            <img src="https://placekitten.com/640/360" width="640" height="360"/>
                            <title>List Item 0</title>
                          </itemBanner>
                      </relatedContent>
                    </listItemLockup>
                    <listItemLockup catKey="category1">
                      <title>List Item 1</title>
                      <relatedContent>
                          <itemBanner>
                            <img src="https://placekitten.com/640/360" width="640" height="360"/>
                            <title>List Item 1</title>
                          </itemBanner>
                      </relatedContent>
                    </listItemLockup>
                    <listItemLockup catKey="category2">
                      <title>List Item 2</title>
                      <relatedContent>
                          <itemBanner>
                            <img src="https://placekitten.com/640/360" width="640" height="360"/>
                            <title>List Item 2</title>
                          </itemBanner>
                      </relatedContent>
                    </listItemLockup>
                    <listItemLockup catKey="category3">
                      <title>List Item 3</title>
                      <relatedContent>
                          <itemBanner>
                            <img src="https://placekitten.com/640/360" width="640" height="360"/>
                            <title>List Item 3</title>
                          </itemBanner>
                      </relatedContent>
                    </listItemLockup>
                    <listItemLockup catKey="category4">
                      <title>List Item 4</title>
                      <relatedContent>
                          <itemBanner>
                            <img src="https://placekitten.com/640/360" width="640" height="360"/>
                            <title>List Item 4</title>
                          </itemBanner>
                      </relatedContent>
                    </listItemLockup>
                    <listItemLockup catKey="category5">
                      <title>List Item 5</title>
                      <relatedContent>
                          <itemBanner>
                            <img src="https://placekitten.com/640/360" width="640" height="360"/>
                            <title>List Item 5</title>
                          </itemBanner>
                      </relatedContent>
                    </listItemLockup>
                    <listItemLockup catKey="category6">
                      <title>List Item 6</title>
                      <relatedContent>
                          <itemBanner>
                            <img src="https://placekitten.com/640/360" width="640" height="360"/>
                            <title>List Item 6</title>
                          </itemBanner>
                      </relatedContent>
                    </listItemLockup>
                    <listItemLockup catKey="category7">
                      <title>List Item 7</title>
                      <relatedContent>
                          <itemBanner>
                            <img src="https://placekitten.com/640/360" width="640" height="360"/>
                            <title>List Item 7</title>
                          </itemBanner>
                      </relatedContent>
                    </listItemLockup>
                    <listItemLockup catKey="category8">
                      <title>List Item 8</title>
                      <relatedContent>
                          <itemBanner>
                            <img src="https://placekitten.com/640/360" width="640" height="360"/>
                            <title>List Item 8</title>
                          </itemBanner>
                      </relatedContent>
                    </listItemLockup>
                    <listItemLockup catKey="category9">
                      <title>List Item 9</title>
                      <relatedContent>
                          <itemBanner>
                            <img src="https://placekitten.com/640/360" width="640" height="360"/>
                            <title>List Item 9</title>
                          </itemBanner>
                      </relatedContent>
                    </listItemLockup>
                    <listItemLockup catKey="category10">
                      <title>List Item 10</title>
                      <relatedContent>
                          <itemBanner>
                            <img src="https://placekitten.com/640/360" width="640" height="360"/>
                            <title>List Item 10</title>
                          </itemBanner>
                      </relatedContent>
                    </listItemLockup>
                    <listItemLockup catKey="category11">
                      <title>List Item 11</title>
                      <relatedContent>
                          <itemBanner>
                            <img src="https://placekitten.com/640/360" width="640" height="360"/>
                            <title>List Item 11</title>
                          </itemBanner>
                      </relatedContent>
                    </listItemLockup>
                </section>
              </list>
          </listTemplate>
        </document>
        
        
        
        

         

        stackTemplate sample code:

         

        <?xml version="1.0"?>
        <document>
          <stackTemplate>
              <banner>
                <row>
                    <title>App Title</title>
                    <button class="primaryNavBtns" id="primaryBtns-0" route="categories/0"><text>Button 0</text></button>
                    <button class="primaryNavBtns" id="primaryBtns-1" route="categories/1"><text>Button 1</text></button>
                    <button class="primaryNavBtns" id="primaryBtns-2" route="categories/2"><text>Button 2</text></button>
              </row>
              </banner>
              <collectionList>
                <grid>
                    <section>
                      <lockup catKey="category0">
                          <img src="https://placekitten.com/320/179" width="320" height="179"/>
                          <title>List Item 0</title>
                      </lockup>
                      <lockup catKey="category1">
                          <img src="https://placekitten.com/320/179" width="320" height="179"/>
                          <title>List Item 1</title>
                      </lockup>
                      <lockup catKey="category2">
                          <img src="https://placekitten.com/320/179" width="320" height="179"/>
                          <title>List Item 2</title>
                      </lockup>
                      <lockup catKey="category3">
                          <img src="https://placekitten.com/320/179" width="320" height="179"/>
                          <title>List Item 3</title>
                      </lockup>
                      <lockup catKey="category4">
                          <img src="https://placekitten.com/320/179" width="320" height="179"/>
                          <title>List Item 4</title>
                      </lockup>
                      <lockup catKey="category5">
                          <img src="https://placekitten.com/320/179" width="320" height="179"/>
                          <title>List Item 5</title>
                      </lockup>
                      <lockup catKey="category6">
                          <img src="https://placekitten.com/320/179" width="320" height="179"/>
                          <title>List Item 6</title>
                      </lockup>
                      <lockup catKey="category7">
                          <img src="https://placekitten.com/320/179" width="320" height="179"/>
                          <title>List Item 7</title>
                      </lockup>
                      <lockup catKey="category8">
                          <img src="https://placekitten.com/320/179" width="320" height="179"/>
                          <title>List Item 8</title>
                      </lockup>
                      <lockup catKey="category9">
                          <img src="https://placekitten.com/320/179" width="320" height="179"/>
                          <title>List Item 9</title>
                      </lockup>
                      <lockup catKey="category10">
                          <img src="https://placekitten.com/320/179" width="320" height="179"/>
                          <title>List Item 10</title>
                      </lockup>
                      <lockup catKey="category11">
                          <img src="https://placekitten.com/320/179" width="320" height="179"/>
                          <title>List Item 11</title>
                      </lockup>
                    </section>
                </grid>
              </collectionList>
          </stackTemplate>
        </document>