Adjust Blox Height, Width, and Margin

[Astroraf]

I am trying to adjust the height, widget, and margin of my BloX widget, but it doesn't seem to work with the code I have. 

The code for the editor:

{

       "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": "200px" // Center the container

                           },

                           "items": [

                                {

                                    "type": "TextBlock",

                                     "text": "W️h️a️t️ ️i️s️ an MSI Program?",

                                      "style": {

                                             "text-align": "center",

                                              "font-weight": "bold",

                                              "font-size": "21px",

                                              "margin": "150px"

                                   }

                              }

                     ]

             }

          ],

         "actions": [

                  {

                       "type": "Action.OpenUrl",

                        "title": "MSI Info",

                         "url": "https://venturewell-dev.sisense.com/app/main/dashboards/667c2bfb48d1f30033ec29cd"

                   }

         ]

}

@Oleksandr_K,  @DRay

[DRay]

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.

[Astroraf]

Unfortunately this code: 

"style": {
                "width": "300px", // Set specific width
                "height": "200px", // Set specific height
                "margin": "0 auto" // Center the container horizontally
            },

is removed whenever I try to apply. The margin code stays. Should I show my configuration code? 

[TriAnthony · Accepted solution]

Hi @Astroraf,

BloX doesn't support comments. Comments can be used in custom actions (JavaScript) but not in the main and configuration codes (JSON).

To make your code work, please remove all the comments. 

[Astroraf]

@TriAnthony sometimes it is just a quick fix, Thank you!

[DRay]

Hi @Astroraf,

I'm working to get an internal resource to comment here.