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 ba...
  • Helena_qbeeq's avatar
    12-28-2022

    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