cancel
Showing results for 
Search instead for 
Did you mean: 

Adjust Blox Height, Width, and Margin

Astroraf
10 - ETL
10 - ETL

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",
                   }
         ]
}

@Oleksandr_K,  @DRay

1 ACCEPTED SOLUTION

TriAnthony
Community Team Member
Community Team Member

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. 

 

Tri Anthony Situmorang

View solution in original post

5 REPLIES 5

DRay
Community Team Leader
Community Team Leader

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.

David Raynor (DRay)

Astroraf
10 - ETL
10 - ETL

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
Community Team Member
Community Team Member

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. 

 

Tri Anthony Situmorang

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

DRay
Community Team Leader
Community Team Leader

Hi @Astroraf,

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

David Raynor (DRay)