Forum Discussion

NielsLaurent's avatar
NielsLaurent
Data Storage
12-27-2022
Solved

Can't get text to vertically align between columns in Blox widget

I'm struggling to get the text in 2 adjacent columns in a Blox widget to align. It doesn't even really matter how, top/middle/bottom, as long as there is some degree of alignment. I created a very basic test script to see what's going on and essentially I'm getting this (never mind the colors, I was just highlighting the columns/textblocks during testing). 

I hoped "verticalContentAlignment" = "center" would take care of this, but for some reason that doesn't seem to do much for me. 

So far I found 2 solutions that technically work, but aren't really ideal:

  1. Set both fonts to the same size. However, varying font size is one of the things I'm actually looking to do, so doesn't help me here.
  2. Fiddle with margin/padding/etc.. Works as long as text is always a fixed number of lines, but not if it can vary.

Here's the editor code:

{
    "style": "",
    "title": "",
    "showCarousel": true,
    "body": [
        {
            "type": "Container",
            "items": [
                {
                    "type": "ColumnSet",
                    "columns": [
                        {
                            "type": "Column",
                            "width": "50%",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "horizontalAlignment": "right",
                                    "verticalContentAlignment": "center",
                                    "text": "Left text",
                                    "size": "extraLarge",
                                    "style": {
                                        "backgroundColor": "green"
                                    }
                                }
                            ]
                        },
                        {
                            "type": "Column",
                            "width": "50%",
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "size": "medium",
                                    "text": "Right text",
                                    "horizontalAlignment": "left",
                                    "verticalContentAlignment": "center",
                                    "style": {
                                        "backgroundColor": "yellow",
                                        "height": "100%"
                                    }
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

 

  • Hello NielsLaurent ,

    Have you tried using the align-items:center, alongside with display:flex?

    {
        "style": "",
        "title": "",
        "showCarousel": true,
        "body": [
            {
                "type": "Container",
                "items": [
                    {
                        "type": "ColumnSet",
                        "columns": [
                            {
                                "type": "Column",
                                "width": "50%",
                                "items": [
                                    {
                                        "type": "TextBlock",
                                        "horizontalAlignment": "right",
                                        "verticalContentAlignment": "center",
                                        "text": "Left text",
                                        "size": "extraLarge",
                                        "style": {
                                            "backgroundColor": "green",
                                             "height": "100%",
                                            "display": "flex",
                                            "align-items": "center"
                                        }
                                    }
                                ]
                            },
                            {
                                "type": "Column",
                                "width": "50%",
                                "items": [
                                    {
                                        "type": "TextBlock",
                                        "size": "medium",
                                        "text": "Right text",
                                        "horizontalAlignment": "left",
                                        "verticalContentAlignment": "center",
                                        "style": {
                                            "backgroundColor": "yellow",
                                            "height": "100%",
                                            "display": "flex",
                                            "align-items": "center"
                                        }
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    }

    Please let me know if this works for you 🙂

    Always here to help,
    Helena from QBeeQ
    [email protected]
    QBeeQ - Gold Implementation and Development Partner

3 Replies

Replies have been turned off for this discussion
  • Hello NielsLaurent ,

    Have you tried using the align-items:center, alongside with display:flex?

    {
        "style": "",
        "title": "",
        "showCarousel": true,
        "body": [
            {
                "type": "Container",
                "items": [
                    {
                        "type": "ColumnSet",
                        "columns": [
                            {
                                "type": "Column",
                                "width": "50%",
                                "items": [
                                    {
                                        "type": "TextBlock",
                                        "horizontalAlignment": "right",
                                        "verticalContentAlignment": "center",
                                        "text": "Left text",
                                        "size": "extraLarge",
                                        "style": {
                                            "backgroundColor": "green",
                                             "height": "100%",
                                            "display": "flex",
                                            "align-items": "center"
                                        }
                                    }
                                ]
                            },
                            {
                                "type": "Column",
                                "width": "50%",
                                "items": [
                                    {
                                        "type": "TextBlock",
                                        "size": "medium",
                                        "text": "Right text",
                                        "horizontalAlignment": "left",
                                        "verticalContentAlignment": "center",
                                        "style": {
                                            "backgroundColor": "yellow",
                                            "height": "100%",
                                            "display": "flex",
                                            "align-items": "center"
                                        }
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    }

    Please let me know if this works for you 🙂

    Always here to help,
    Helena from QBeeQ
    [email protected]
    QBeeQ - Gold Implementation and Development Partner

    • NielsLaurent's avatar
      NielsLaurent
      Data Storage

      Hi Helena,

      Awesome, that works!

      The only thing I found is that now the horizontal alignment gets ignored, but by changing display to "grid" instead that problem goes away too.

      Thanks for the help!

    • zohebakber's avatar
      zohebakber
      Cloud Apps

      Hi Helena,
      I am also creating a simple text block but when I am applying even after making in left align, the container/text block is coming to center.
      Can you please help in this regard?

      {
          "style": "",
          "script": "",
          "title": "",
          "showCarousel": true,
          "body": [
              {
                  "type": "Container",
                  "items": [
                      {
                          "type": "TextBlock",
                          "text": "Summary Details",
                          "horizontalAlignment": "left",
                          "verticalContentAlignment": "center",
                          "style": {
                              "font-weight": "bold",
                              "text-align": "left",
                              "font-size": "24px",
                              "color": "#5B6372",
                              "margin": "10px"
                          }
                      }
                  ]
              }
          ],
          "actions": []
      }