Forum Discussion

Priscillareagan's avatar
Priscillareagan
Cloud Apps
03-20-2024

Blox align containers horizontally

Hello there,

I'm a novice to customizing Blox templates. In the attached screenshot, I want to adjust the layout to make the cards appear side by side. I also want the titles Signups and orders to appear as a title to the card. Can I have suggestions on how I can modify the attached code to do that?

 

{
"style": "",
"script": "",
"title": "",
"showCarousel": true,
 
"body": [
{
"type": "Container",
"items": [
{
"type": "Container",
"separator": "true",
"spacing": "medium",
"items": [
{
"type": "TextBlock",
"spacing": "small",
"text": "Signups",
"weight": "bold",
"color": "grey",
"style": {
"padding-left": "20px"
}
},
{
"spacing": "none",
"type": "ColumnSet",
"columns": [
{
"spacing": "medium",
"separator": "true",
"type": "Column",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"style": {
"flex-grow": "0"
},
"items": [
{
"spacing": "none",
"type": "TextBlock",
"text": "{panel:Sign ups - Actual}",
"weight": "bold",
"color": "#232a2f",
"size": "extraLarge",
"style": {
"margin": "30px"
}
}
]
},
{
"type": "Column",
"style": {
"flex-grow": "100"
},
"items": [
{
"spacing": "none",
"type": "TextBlock",
"horizontalAlignment": "left",
"text": "Variance:",
"color": "grey",
"size": "small"
},
{
"spacing": "small",
"type": "TextBlock",
"horizontalAlignment": "left",
"text": "vs Budget:",
"color": "grey",
"size": "small"
},
{
"spacing": "none",
"horizontalAlignment": "left",
"type": "TextBlock",
"text": "{panel:Sign ups vs Budget}",
"weight": "bold",
"color": "#72767f",
"size": "medium"
},
{
"spacing": "small",
"type": "TextBlock",
"horizontalAlignment": "left",
"text": "vs RoFo:",
"color": "grey",
"size": "small"
},
{
"spacing": "none",
"horizontalAlignment": "left",
"type": "TextBlock",
"text": "{panel:Signups vs RoFo}",
"weight": "bold",
"color": "#72767f",
"size": "medium"
}
]
}
]
}
]
}
]
},
{
"type": "TextBlock",
"spacing": "small",
"text": "Orders",
"weight": "bold",
"color": "grey",
"style": {
"padding-left": "20px"
}
},
{
"spacing": "none",
"type": "ColumnSet",
"columns": [
{
"spacing": "medium",
"separator": "true",
"type": "Column",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"style": {
"flex-grow": "0"
},
"items": [
{
"spacing": "none",
"type": "TextBlock",
"text": "{panel:Orders - Actual}",
"weight": "bold",
"color": "#232a2f",
"size": "extraLarge",
"style": {
"margin": "30px"
}
}
]
},
{
"type": "Column",
"style": {
"flex-grow": "100"
},
"items": [
{
"spacing": "none",
"type": "TextBlock",
"horizontalAlignment": "left",
"text": "Variance:",
"color": "grey",
"size": "small"
},
{
"spacing": "small",
"type": "TextBlock",
"horizontalAlignment": "left",
"text": "vs Budget:",
"color": "grey",
"size": "small"
},
{
"spacing": "none",
"horizontalAlignment": "left",
"type": "TextBlock",
"text": "{panel:Orders vs Budget}",
"weight": "bold",
"color": "#72767f",
"size": "medium"
},
{
"spacing": "small",
"type": "TextBlock",
"horizontalAlignment": "left",
"text": "vs RoFo:",
"color": "grey",
"size": "small"
},
{
"spacing": "none",
"horizontalAlignment": "left",
"type": "TextBlock",
"text": "{panel:Orders vs RoFo}",
"weight": "bold",
"color": "#72767f",
"size": "medium"
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}

Thanks,

Priscilla

Developers

3 Replies

  • DRay's avatar
    DRay
    Admin
    04-08-2024

    Hello Priscillareagan,

    I wanted to follow up to see if the solution offered by ILLIA worked for you.

    If so, please click the 'Accept as Solution' button so that other users with the same questions can find the answer faster. If not, please let us know so that we can continue to help.

    Thank you.

  • MikeGre's avatar
    MikeGre
    ETL
    06-27-2024

    Hello guys,

    I am exploring a similar concept. My example is a bit more simple (for now..)

    The script:

    {
    "style": "",
    "script": "",
    "showCarousel": false,
    "body": [
                    {
                    "type": "Container",
                    "items": [
                                   {
                                    "type": "TextBlock",
                                    "text": "{panel:reload_type}"
                                   }
                         ]
                  }
            ]
    }

    I would like to "transpose" {panel:reload_type} as shown in the example below:

    I tried ILLIA 's suggestion but couldn't get there 😕

    Ideally, if the above is feasible, i would like to add some other values that will be broken down based on the reload_type

    Similarly to a pivot table with a break by, I would say but more beautifully structured..