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:
- 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.
- 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