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
Priscillareagan
Posted 2 years ago·Last reply 2 years ago
3 comments
Michalis Gregoriou
·2 years agoHello 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..
DRay
·2 years agoHello 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.
Ilya Kvashenko
Admin2 years agoHello!
Hope you are doing well.
Kindly ask you to add this styling to the container that includes blocks that needs to be aligned horizontally:
More information about the approach:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-flexbox-properties
Please inform if there are any questions.
Best regards,