Roku Developer Program

[newlvl]

Hi,

While building my layout UI, I have encountered a very strange issue:

I have a MarkupList with my menu items. Its translation is [0,0].
 If I place it as a child of my component (or in a Group), everything is good - it appears at the right place.
But, the moment I put it as a child of a vertical LayoutGroup, it is presented with margins of 36 from both the left and the right sides.It seems to be specific for MarkupList as any other component behaves well.

As an example, we could take the canonical Roku MarkupListExample one (MarkupListExample.zip), taken from https://sdkdocs.roku.com/display/sdkdoc/MarkupList+Markup
and modify it:
First, set all the translations to [0,0] and observe that the list appears at the 0 X coordinate.
Then, wrap the MarkupList with a LayoutGroup and see that it suddenly gets a margin.

<?xml version = "1.0" encoding = "utf-8" ?>

<!--********** Copyright 2016 Roku Corp.  All Rights Reserved. **********-->

<component name = "MarkupListExample" extends = "Scene" initialFocus = "exampleMarkupList" >

  <script type = "text/brightscript" >

    <![CDATA[

    sub init()
      m.top.backgroundURI = "pkg:/images/rsgde_bg_hd.jpg"

      example = m.top.findNode("exampleMarkupList")

      example.content = CreateObject("roSGNode", "MarkupListContent")

      examplerect = example.boundingRect()
      centerx = (1280 - examplerect.width) / 2
      centery = (720 - examplerect.height) / 2
      example.translation = [0 , 0 ]

      m.top.setFocus(true)
    end sub

    ]]>

  </script>

  <children >
 <LayoutGroup id="layoutGroup"
        translation="[0, 0]" 
        layoutDirection = "horiz"
        horizAlignment = "left"
        addItemSpacingAfterChild = "false"
        itemSpacings = "[0]"
        vertAlignment = "top">
      <MarkupList 
        id = "exampleMarkupList" 
        itemComponentName = "MarkupListItem" 
        itemSize = "[ 586, 154 ]" 
        itemSpacing = "[ 0, 10 ]" 
        drawFocusFeedback = "false" 
        vertFocusAnimationStyle = "floatingFocus" />
  </LayoutGroup>
  
  </children>

</component>

Is it a bug?
Does anyone know how to put a MarkupList in a LayoutGroup without margins?

Thanks a lot

[owen777]

Yup, it's a bug - MarkupList adds dynamic translation when inside LayoutGroup.

Don't expect any answer from Roku 😉

[speechles]

"owen777" wrote:
Yup, it's a bug - MarkupList adds dynamic translation when inside LayoutGroup.

Don't expect any answer from Roku 😉

You can use a layoutgroup inside a layout group to get around that. Just nest the MarkupList into the double-nested layoutgroups which only have the markup list inside. 

<layout group id="lots of stuff">
    <layoutgroup id="myMarkupGroup" translation="[x,y]" ...>
        <layoutgroup id="myMarkupAdjuster" translation="[adjustX,adjustY]" >
            <markuplist ... />
        </layoutgroup>
    </layoutgroup>
    ... next layout group, etc
    ... until you run out of layout groups
</layoutgroup>

Adjust translation on nested layout group as required. There are other "things" you need to do this on too it isn't just MarkupList where the documentation is wrong.