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...
Blox
Dashboards & Reporting
  • Helena_qbeeq's avatar
    Helena_qbeeq
    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

Helena_qbeeq's avatar
Helena_qbeeq
Cloud Apps
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

  • NielsLaurent's avatar
    NielsLaurent
    Data Storage
    12-28-2022

    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
    01-05-2023

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