Forum Discussion
9 Replies
- belltownRoku GuruI have a ButtonGroup with buttons that are centered. I'm not sure if there's an easier way:
buttons="["   Play   ","   Stop   "]"
- jedashfordChannel SurferThank you. I'll give this a try. I'm worried a solution like this wont scale well with different screen resolutions. We'll find out...
- joetestaRoku Guru
"jedashford" wrote:
Thank you. I'll give this a try. I'm worried a solution like this wont scale well with different screen resolutions. We'll find out...
I think I got this to work by having a Label that's a child element of the button, (and the same width) and the label text can be centered with;<Label id="itemLabel" horizAlign="center" />
- WSJTimBinge Watcher
If anyone else stumbles on this, this solution would've required a lot more work for me, dealing with changing the color of the Label when the button gains and loses focus. While hokey, this little utility function fixed the problem for me:
sub centerButtonLabel(button as object) for i = 0 to button.getChildCount() - 1 child = button.getChild(i) if child.subtype() = "Label" child.horizAlign = "center" end if end for end subI just call this in the onVisible for my screen. Works like a charm. Should Roku just support this as a property on the stock Button? Yes.
- WSJTimBinge Watcher
Ok here's a better solution since horizAlign appears to get reverted when the button text is changed. Use this component instead:
<component name="CenteredButton" extends="Button"> <script type="text/brightscript"> <![CDATA[ sub init() ' Find the label for i = 0 to m.top.getChildCount() - 1 child = m.top.getChild(i) if child.subtype() = "Label" child.horizAlign = "center" child.observeField("horizAlign", "onHorizAlignChanged") exit for end if end for end sub sub onHorizAlignChanged(msg as object) label = msg.getRoSGNode() if label.horizAlign <> "center" label.horizAlign = "center" end if end sub ]]> </script> </component>
- jedashfordChannel Surfer
"joetesta" wrote:
I think I got this to work by having a Label that's a child element of the button, (and the same width) and the label text can be centered with;<Label id="itemLabel" horizAlign="center" />
Thats the key. Works like a charm. - nmavesVisitorCan I ask how you created this horizontal button group? I am having a heck of a time creating something very simular to this.
