My image is not centering in BloX

I am going over the example in Sisense Academy with my data model for the Blox example. I am recreating the Blox widget that comes after the title blox widget and for some reason, the image that I have chosen will not center even with the "horizontalAlignment" code written into the image code. I will provide my script and a picture of what is occurring.

Script:

{
    "type": "AdaptiveCard",
    "verison": "1.0",
    "style": "",
    "script": "",
    "title": "",
    "showCarousel": true,
    "titleStyle": [
        {
            "display": "none"
        }
    ],
    "backgroundColor": "black",
    "body": [
        {
            "type": "TextBlock",
            "text": "Exoplanet Status",
            "weight": "bold",
            "size": "extraLarge",
            "horizontalAlignment": "center",
            "color": "white"
        },
        {
            "type": "Image",
            "url": "https://upload.wikimedia.org/wikipedia/commons/a/aa/Exoplanets5000mark.gif",
            "size": "900",
            "horizontalAlignment": "center"
        },
        {
            "type": "ColumnSet",
            "spacing": "none",
            "columns": [
                {
                    "type": "Column",
                    "separator": true,
                    "spacing": "medium",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Number of Exoplanets",
                            "color": "white",
                            "weight": "bold",
                            "horizontalAlignment": "center"
                        },
                        {
                            "type": "TextBlock",
                            "text": "{panel:num_of_planets}",
                            "color": "white",
                            "horizontalAlignment": "center"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "separator": true,
                    "spacing": "medium",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Average Stellar Mass",
                            "color": "white",
                            "weight": "bold",
                            "horizontalAlignment": "center"
                        },
                        {
                            "type": "TextBlock",
                            "text": "{panel:Average st_mass}",
                            "color": "white",
                            "horizontalAlignment": "center"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "separator": true,
                    "spacing": "medium",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Median Stellar Temperature",
                            "color": "white",
                            "weight": "bold",
                            "horizontalAlignment": "center"
                        },
                        {
                            "type": "TextBlock",
                            "text": "{panel:Median of st_teff}",
                            "color": "white",
                            "horizontalAlignment": "center"
                        }
                    ]
                }
            ]
        }
    ]
}

Image:

DRay Liliia_DevX

Rafael Ferreira

Posted 1 year ago·Last reply 1 year ago

2 comments

Rafael Ferreira

OP1 year ago

Thank you harikm007 , in the example they did not have the Container code but makes sense.

harikm007

·1 year ago

Hi Astroraf ,

The image will center if you place it inside a container. Here’s the updated code along with the result.

{
    "type": "AdaptiveCard",
    "verison": "1.0",
    "style": "",
    "script": "",
    "title": "",
    "showCarousel": true,
    "titleStyle": [
        {
            "display": "none"
        }
    ],
    "backgroundColor": "black",
    "body": [
        {
            "type": "TextBlock",
            "text": "Exoplanet Status",
            "weight": "bold",
            "size": "extraLarge",
            "horizontalAlignment": "center",
            "color": "white"
        },
        {
            "type": "Container",
            "items": [
                {
                    "type": "Image",
                    "url": "https://upload.wikimedia.org/wikipedia/commons/a/aa/Exoplanets5000mark.gif",
                    "size": "900",
                    "horizontalAlignment": "center"
                }
            ]
        },
        {
            "type": "ColumnSet",
            "spacing": "none",
            "columns": [
                {
                    "type": "Column",
                    "separator": true,
                    "spacing": "medium",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Number of Exoplanets",
                            "color": "white",
                            "weight": "bold",
                            "horizontalAlignment": "center"
                        },
                        {
                            "type": "TextBlock",
                            "text": "{panel:num_of_planets}",
                            "color": "white",
                            "horizontalAlignment": "center"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "separator": true,
                    "spacing": "medium",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Average Stellar Mass",
                            "color": "white",
                            "weight": "bold",
                            "horizontalAlignment": "center"
                        },
                        {
                            "type": "TextBlock",
                            "text": "{panel:Average st_mass}",
                            "color": "white",
                            "horizontalAlignment": "center"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "separator": true,
                    "spacing": "medium",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Median Stellar Temperature",
                            "color": "white",
                            "weight": "bold",
                            "horizontalAlignment": "center"
                        },
                        {
                            "type": "TextBlock",
                            "text": "{panel:Median of st_teff}",
                            "color": "white",
                            "horizontalAlignment": "center"
                        }
                    ]
                }
            ]
        }
    ]
}

Result:

-Hari

https://binextlevel.com/