Adjust Blox Height, Width, and Margin

Hi Astroraf,

I ran this question through an internal tool. Hopefully it helps. If not please let me know.

Here is the response:

To adjust the height, width, and margin of your BloX widget, it's important to ensure that the styles are correctly applied to the elements and that the correct CSS properties are used. There are a few points to consider:

1. Correct use of margin properties: `margin` should be defined with either a single value (applies to all sides), two values (first for top and bottom, second for left and right), or four values (for each side separately).

2. **Text alignment and font styling**: Ensure `text-align` and other text properties are correctly applied.

3. Width and height: Make sure these properties are recognized by the BloX widget and correctly applied.

Here’s a revised version of your JSON code, with corrections for margin and styling:

{
    "style": "",
    "script": "",
    "title": "",
    "showCarousel": true,
    "spaceAround": "small",
    "cornerRadius": "medium",
    "borderColor": "#E5EAF0",
    "shadow": "dark",
    "body": [
        {
            "type": "Container",
            "style": {
                "width": "300px", // Set specific width
                "height": "200px", // Set specific height
                "margin": "0 auto" // Center the container horizontally
            },
            "items": [
                {
                    "type": "TextBlock",
                    "text": "W️h️a️t️ ️i️s️ an MSI Program?",
                    "style": {
                        "text-align": "center",
                        "font-weight": "bold",
                        "font-size": "21px",
                        "margin": "75px auto" // Adjust margins: 75px top and bottom, auto left and right
                    }
                }
            ]
        }
    ],
    "actions": [
        {
            "type": "Action.OpenUrl",
            "title": "MSI Info",
            "url": "https://venturewell-dev.sisense.com/app/main/dashboards/667c2bfb48d1f30033ec29cd"
        }
    ]
}

Explanation:
`"margin": "0 auto"`**: This centers the container horizontally.
`"margin": "75px auto": This sets the top and bottom margin to 75px and centers the text block horizontally.
Style properties: Ensure that the style properties you use are supported by the BloX widget and apply to the correct elements.

Test this revised code in your Sisense BloX editor to see if it achieves the desired layout adjustments. If you still face issues, there might be additional constraints or settings in the Sisense environment that affect the styling.