cancel
Showing results for 
Search instead for 
Did you mean: 

BLOX EQUAL & DYNAMIC SPACING

cartercjb
10 - ETL
10 - ETL

I have the following BLOX widget:

cartercjb_0-1652810819890.png

Which is generated via this BLOX code:

{
    "style": "",
    "titleStyle": [
        {
            "display": "none"
        }
    ],
    "script": "[].slice.call( document.getElementsByClassName('blox-date') ).forEach(function ( div ) { div.innerHTML = new Date().toLocaleDateString(); })",
    "title": "",
    "showCarousel": true,
    "carouselAnimation": {
        "delay": 0,
        "showButtons": false
    },
    "conditions": [
        {
            "minRange": "-Infinity",
            "maxRange": 0,
            "color": "#FA5656",
            "image": "/plugins/BloX/blox-images/StockMarket/arrow-down.png"
        },
        {
            "minRange": 0,
            "maxRange": "Infinity",
            "color": "#54a254",
            "image": "/plugins/BloX/blox-images/StockMarket/arrow-up.png"
        }
    ],
    "body": [
        {
            "spacing": "",
            "type": "Container",
            "width": "100%",
            "style": {
                "margin": "0 auto"
            },
            "items": [
                {
                    "type": "TextBlock",
                    "text": "FINANCIAL KPI'S | RUNNING WEEKLY TREND",
                    "class": "blox-pivot-title",
                    "horizontalAlignment": "center",
                    "size": "medium",
                    "style": {
                        "padding": "2px",
                        "border-radius": "5px",
                        "background-color": "#006374",
                        "color": "#ffffff"
                    }
                },
                {
                    "type": "ColumnSet",
                    "class": "condition_container ",
                    "columns": [
                        {
                            "type": "Column",
                            "items": [
                                {
                                    "spacing": "small",
                                    "type": "TextBlock",
                                    "text": "REVENUE",
                                    "horizontalAlignment": "center",
                                    "weight": "bold",
                                    "size": "small",
                                    "style": {
                                        "color": "#000000"
                                    }
                                },
                                {
                                    "type": "ColumnSet",
                                    "class": "condition_container ",
                                    "columns": [
                                        {
                                            "type": "Column",
                                            "items": [
                                                {
                                                    "type": "TextBlock",
                                                    "text": "{panel:REVENUE}",
                                                    "horizontalAlignment": "center",
                                                    "weight": "bold",
                                                    "size": "large",
                                                    "style": {
                                                        "color": "#a90a40"
                                                    }
                                                }
                                            ]
                                        }
                                    ]
                                },
                                {
                                    "type": "ColumnSet",
                                    "class": "condition_container",
                                    "columns": [
                                        {
                                            "type": "Column",
                                            "items": [
                                                {
                                                    "type": "TextBlock",
                                                    "text": "<span class='blox-sparkline' type='line' line-color='#006374' width='200' height='30' line-width='2' fill-color='#B2D4DF' point-color:'#A90A40'>{spark:-21REVENUE},{spark:-14REVENUE},{spark:-7REVENUE}</span>",
                                                    "horizontalAlignment": "center",
                                                    "weight": "bold",
                                                    "size": "small",
                                                    "style": {
                                                        "color": "#117899"
                                                    }
                                                }
                                            ]
                                        }
                                    ]
                                },
                                {
                                    "type": "ColumnSet",
                                    "columns": [
                                        {
                                            "type": "Column",
                                            "items": [
                                                {
                                                    "type": "TextBlock",
                                                    "text": "BUDGET:",
                                                    "style": {
                                                        "text-align": "left",
                                                        "font-size": "small",
                                                        "font-style": "",
                                                        "color": "#d5d5d5"
                                                    }
                                                },
                                                {
                                                    "type": "TextBlock",
                                                    "text": "FULL MONTH FORECAST:",
                                                    "style": {
                                                        "text-align": "left",
                                                        "font-size": "small",
                                                        "font-style": "",
                                                        "color": "#d5d5d5"
                                                    }
                                                }
                                            ]
                                        },
                                        {
                                            "type": "Column",
                                            "width": "30%",
                                            "items": [
                                                {
                                                    "type": "TextBlock",
                                                    "text": "{panel:REV_BUDGET}",
                                                    "style": {
                                                        "text-align": "center",
                                                        "font-size": "small",
                                                        "font-weight": "regular",
                                                        "color": "#006274",
                                                        "font-style": ""
                                                    }
                                                },
                                                {
                                                    "type": "TextBlock",
                                                    "text": "{panel:REVENUE_FORECAST}",
                                                    "style": {
                                                        "text-align": "center",
                                                        "font-size": "small",
                                                        "font-weight": "regular",
                                                        "color": "#006274",
                                                        "font-style": ""
                                                    }
                                                }
                                            ]
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "separator": true,
                            "type": "Column",
                            "items": [
                                {
                                    "spacing": "small",
                                    "type": "TextBlock",
                                    "text": "CONTRIBUTION MARGIN",
                                    "horizontalAlignment": "center",
                                    "weight": "bold",
                                    "size": "small",
                                    "style": {
                                        "color": "#000000"
                                    }
                                },
                                {
                                    "type": "TextBlock",
                                    "text": "{panel:CONT. MARGIN $} ({panel: CM%})",
                                    "horizontalAlignment": "center",
                                    "weight": "bold",
                                    "size": "large",
                                    "style": {
                                        "color": "#a90a40"
                                    }
                                },
                                {
                                    "type": "ColumnSet",
                                    "class": "condition_container 2",
                                    "columns": [
                                        {
                                            "type": "Column",
                                            "items": [
                                                {
                                                    "type": "TextBlock",
                                                    "text": "<span class='blox-sparkline' type='line' line-color='#006374' width='200' height='30' line-width='2' fill-color='#B2D4DF' point-color:'#117899'>{spark:-21CM$},{spark:-14CM$},{spark:-7CM$}</span>",
                                                    "horizontalAlignment": "center",
                                                    "weight": "bold",
                                                    "size": "small",
                                                    "style": {
                                                        "color": "#117899"
                                                    }
                                                }
                                            ]
                                        }
                                    ]
                                },
                                {
                                    "type": "ColumnSet",
                                    "columns": [
                                        {
                                            "type": "Column",
                                            "items": [
                                                {
                                                    "type": "TextBlock",
                                                    "text": "{panel:CM_BUDGET} ({panel:CMPERC_BUDGET})",
                                                    "style": {
                                                        "text-align": "right",
                                                        "font-size": "small",
                                                        "font-weight": "regular",
                                                        "color": "#006274",
                                                        "font-style": ""
                                                    }
                                                },
                                                {
                                                    "type": "TextBlock",
                                                    "text": "{panel:CM_FORECAST} ({panel:CM%})",
                                                    "style": {
                                                        "text-align": "right",
                                                        "font-size": "small",
                                                        "font-weight": "regular",
                                                        "color": "#006274",
                                                        "font-style": ""
                                                    }
                                                }
                                            ]
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "separator": true,
                            "type": "Column",
                            "items": [
                                {
                                    "spacing": "small",
                                    "type": "TextBlock",
                                    "text": "PRODUCTIVITY",
                                    "horizontalAlignment": "center",
                                    "weight": "bold",
                                    "size": "small",
                                    "style": {
                                        "color": "#000000"
                                    }
                                },
                                {
                                    "type": "TextBlock",
                                    "text": "{panel:PRODUCTIVITY}",
                                    "horizontalAlignment": "center",
                                    "weight": "bold",
                                    "size": "large",
                                    "style": {
                                        "color": "#a90a40"
                                    }
                                },
                                {
                                    "type": "ColumnSet",
                                    "class": "condition_container 3",
                                    "columns": [
                                        {
                                            "type": "Column",
                                            "items": [
                                                {
                                                    "type": "TextBlock",
                                                    "text": "<span class='blox-sparkline' type='line' line-color='#006374' width='200' height='30' line-width='2' fill-color='#B2D4DF' point-color:'#117899'>{spark:PROD_M1},{spark:PROD_M2}, {spark:PROD_M3}</span>",
                                                    "horizontalAlignment": "center",
                                                    "weight": "bold",
                                                    "size": "small",
                                                    "style": {
                                                        "color": "grey"
                                                    }
                                                }
                                            ]
                                        }
                                    ]
                                },
                                {
                                    "type": "ColumnSet",
                                    "columns": [
                                        {
                                            "type": "Column",
                                            "items": [
                                                {
                                                    "type": "TextBlock",
                                                    "text": "BUDGET:",
                                                    "style": {
                                                        "text-align": "left",
                                                        "font-size": "small",
                                                        "font-style": "",
                                                        "color": "#FFFFFF"
                                                    }
                                                },
                                                {
                                                    "type": "TextBlock",
                                                    "text": "PREV. MONTH:",
                                                    "style": {
                                                        "text-align": "left",
                                                        "font-size": "small",
                                                        "font-style": "",
                                                        "color": "#d5d5d5"
                                                    }
                                                }
                                            ]
                                        },
                                        {
                                            "type": "Column",
                                            "items": [
                                                {
                                                    "type": "TextBlock",
                                                    "text": "{panel:PROD_BUDGET}",
                                                    "style": {
                                                        "text-align": "center",
                                                        "font-size": "small",
                                                        "font-weight": "regular",
                                                        "color": "#006274",
                                                        "font-style": ""
                                                    }
                                                },
                                                {
                                                    "type": "TextBlock",
                                                    "text": "{panel:PRODUCTIVITY -1M}",
                                                    "style": {
                                                        "text-align": "center",
                                                        "font-size": "small",
                                                        "font-weight": "regular",
                                                        "color": "#006274",
                                                        "font-style": ""
                                                    }
                                                }
                                            ]
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ],
    "actions": []
}

 

How do I update the BLOX script to equally space each of the 3 KPI's horizontally in an even/equal fashion? The sections highlighted in yellow I feel are not being stretched as far as they could be. The same thing with the trending sparkline - it would be best if that would stretch from border to border. 

 

Thanks for your help!

 

 

1 REPLY 1

HamzaJ
10 - ETL
10 - ETL

Hi @cartercjb ,

Perhaps I do not see it, but when looking at your code I notice that not all columnset/columns have a width/padding/margin set. Could you add those to all? Perhaps that would fix the issue

Voice of Customer
Impact Business Intelligence (BI) and Analytics Market Research

Click Here & Complete Dresner's Wisdom of Crowds® Market Study Survey Today!

Community Toolbox

Recommended quick links to assist you in optimizing your community experience:

Need additional support?:

Community Support Request

Don't miss out:

Earn a BETA Launch Challenge Badge!