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

[NielsLaurent]

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

[Helena_qbeeq · Accepted solution]

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]

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]

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": []
}