question

Daniel Birnstiel avatar image
Daniel Birnstiel asked

Inconsistent Rendering of APL Containers

We want to achieve a simple design which includes an image and a set of vertically stacked images next to it. Using the APL designer, we came up with the following template:


{
    "type": "APL",
    "version": "1.0",
    "theme": "light",
    "import": [
        {
            "name": "alexa-layouts",
            "version": "1.0.0"
        }
    ],
    "resources": [
        {
            "colors": {
                "colorTextPrimary": "#000000",
                "colorTextSecondary": "#000000"
            },
            "dimensions": {
                "textSizeBody": 48,
                "textSizePrimary": 27,
                "textSizeSecondary": 23,
                "textSizeSecondaryHint": 25
            },
            "strings": {
                "background": "https://placehold.it/1024x600/EEEEEE",
                "logo": "https://placehold.it/100"
            }
        }
    ],
    "layouts": {},
    "mainTemplate": {
        "parameters": [
            "payload"
        ],
        "items": [
            {
                "type": "Container",
                "height": "100vh",
                "width": "100vw",
                "items": [
                    {
                        "type": "Image",
                        "source": "@background",
                        "scale": "best-fill",
                        "position": "absolute",
                        "width": "100vw",
                        "height": "100vh"
                    },
                    {
                        "type": "Container",
                        "width": "100vw",
                        "direction": "row",
                        "alignItems": "center",
                        "justifyContent": "spaceBetween",
                        "paddingLeft": "5vw",
                        "paddingRight": "5vw",
                        "items": [
                            {
                                "type": "Text",
                                "text": "Page Title",
                                "color": "@colorTextSecondary"
                            },
                            {
                                "type": "Image",
                                "source": "@logo"
                            }
                        ]
                    },
                    {
                        "type": "Container",
                        "width": "100vw",
                        "height": "80vh",
                        "direction": "row",
                        "paddingLeft": "5vw",
                        "paddingRight": "5vw",
                        "paddingBottom": "5vh",
                        "alignItems": "center",
                        "justifyContent": "center",
                        "items": [
                            {
                                "type": "Image",
                                "width": "80vh",
                                "height": "80vh",
                                "source": "https://placehold.it/800",
                                "scale": "best-fill"
                            },
                            {
                                "type": "Container",
                                "paddingLeft": "5vw",
                                "width": "180px",
                                "direction": "column",
                                "items": [
                                    {
                                        "type": "Image",
                                        "source": "https://placehold.it/90",
                                        "height": "90px",
                                        "width": "90px",
                                        "paddingTop": "100px"
                                    },
                                    {
                                        "type": "Image",
                                        "source": "https://placehold.it/90",
                                        "height": "90px",
                                        "width": "90px",
                                        "paddingTop": "100px"
                                    },
                                    {
                                        "type": "Image",
                                        "source": "https://placehold.it/90",
                                        "height": "90px",
                                        "width": "90px",
                                        "paddingTop": "100px"
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    }
}


When using this template on our Echo Show device, the three small images on the right are not rendered.


Is there something we are doing wrong here when using the containers or is there any other way of getting this to work?

alexa skills kitalexaecho showaplalexa presentation language
10 |5000

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

1 Answer

Gaetano@Amazon avatar image
Gaetano@Amazon answered

Hi,

I've tried to render your template on an Echo Show v2 and the result is consistent between the device and the dev console simulator. Can you please confirm you are using the APL authoring tool?

Which revision of the Echo Show are you rendering the template on?

Thanks,

Gaetano

10 |5000

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.