Ribbon bar button text align

Answered

Hi, I’m using the ribbonbar extension and it’s been a quite smooth sail so far, except for the mixin which has given me a couple of headaches. The last one is the text alignment on button items. Some buttons have longer strings on their displayed text and, logically, they add a break as to not surpass the maxwidth property. The problem is that I need said text to be aligned on the center, justified if you will, but I don’t know how. My Mixin looks a bit like this:

{
“name”: “RibbonBar.mixin”,

“appearances”: {
“ribbonbar-item”: {
“states”: {
“default”: {
“styles”: {
“width”: [ 1, 1, 1, 1 ]
},
“properties”: {
“margin”: [ 0, 0, 0, 0 ],
“opacity”: 1,
“textColor”: “ribbonItemText”,
“padding”: [ 0, 0, 0, 0 ]
}
},
“pushed”: {
“styles”: {
“color”: “black”,
“backgroundColor”: “#DCDCDC”
},
“properties”: {
“cursor”: “pointer”
}
}
},
“components”: {
“button”: {
“states”: {
“default”: {
“properties”: {
“textAlign”: “center”, <——- shouldn’t this work? what’s wrong with it?
“minWidth”: 100,
“width”: 100,
“height”: 70
}
},
“pushed”: {
“styles”: {
“backgroundColor”: “#DCDCDC”
},
“properties”: {
“textColor”: “black”,
“opacity”: 1
}
}
},
“components”: {
“icon”: {
“inherit”: “icon-dark”,
“states”: {
“default”: {
“properties”: {
“minWidth”: 35,
“height”: 35
}
}

}
}
}
},
“icon”: {
“inherit”: “icon-dark”,
“states”: {
“default”: {
“properties”: {
“scale”: true
}
}
}
}
}
}
}
}

Any help would be greatly appreciated

Pablo Clavijo asked Jan 31, 2023 - 2:24 pm

You must login to post comments

Answers (2)

Best Answer

I think the issue here is that you are trying to set the button properties textAlign to center, when you actually need to set the button label. Each button has a label, and the label is what the text is inside. You can even make the label and button different colors if you want to see it more clearly.

I tried working with the textAlign property and couldn’t get it to center. Luckily- there’s a workaround- you can use css styles. Specifically this style.
I’ve included a screenshot of a simple ribbonbar with this mixin.

Here’s the relevant part of the mixin:
“components”: {
“button”: {
“states”: {
“default”: {
“styles”: {
“backgroundColor”: “#66FF00” //set the background color of the button so you can see it clearly
},
“properties”: {
//you were previously setting “textAlign”: “center” here
“maxWidth”: null,
“padding”: [1, 4, 1, 4]
}
},
“vertical”: {
“properties”: {
“maxWidth”: 78
},
“styles”: {
}
},
“pushed”: {
“styles”: {
“backgroundColor”: “buttonSelected”
},
“properties”: {
“textColor”: “buttonSelectedText”
}
}
},
“components”: {
“icon”: {
“inherit”: “icon-dark”,
“states”: {
“default”: {
“styles”: {
},
“properties”: {
}
},
“vertical”: {
“properties”: {
“width”: 32,
“height”: 32,
“scale”: true
},
“styles”: {
}
},
“horizontal”: {
“properties”: {
“width”: 16,
“height”: 16,
“scale”: true
},
“styles”: {
}
}
}
},
“label”: { //here is the button label
“states”: {
“default”: {
“properties”: {
},
“styles”: {
“backgroundColor”: “#FFEF00” //I set the background color just so you can see it
}
},
“vertical”: {
“properties”: {
},
“styles”: {//here is the css to justify the text
“css”: “{\”text-align\”:\”justify\”}”
//alternatively if you want to center the text instead of justifying it you can do this
//”css”: “{\”text-align\”:\”center\”}”
} } } },