Blox align containers horizontally | Help and How-To

Priscillareagan · 2024-03-20T12:33:38.197000Z

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

MoreDiscussions

Blox align containers horizontally | Help and How-To | Sisense Community