cancel
Showing results for 
Search instead for 
Did you mean: 

My image is not centering in BloX

Astroraf
10 - ETL
10 - ETL

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:

Screen Shot 2024-09-19 at 17.47.40.png

@DRay @Liliia_DevX 

1 ACCEPTED SOLUTION

harikm007
13 - Data Warehouse
13 - Data Warehouse

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:

harikm007_0-1726771199930.png

-Hari

https://binextlevel.com/ 

 

View solution in original post

2 REPLIES 2

harikm007
13 - Data Warehouse
13 - Data Warehouse

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:

harikm007_0-1726771199930.png

-Hari

https://binextlevel.com/ 

 

Astroraf
10 - ETL
10 - ETL

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