Make Icon in Button appear to the left of text?

[statikeffeck]

The default location of an icon button seems to be directly above the button text; is there a way to make the icon appear to the left of the text?

If not, this would be a nice feature.

[marielle]

There is... Go to "text formatting" and choose right alignment (rather than center one). The text will then appear at the right of the icon.

[statikeffeck]

Thanks! And I see I can also increase the margin to further control where the icon and text go.

[charms]

I have a pretty wide button and my issue with that is that the icon is aligned on the left side and the text is aligned on the right side. I would like to align the icon left and the text left after the icon. Is this also possible?

Change:

Code: Select all

------------------------------------------------------------------------------
Icon                                                                      Text
------------------------------------------------------------------------------

To:

Code: Select all

------------------------------------------------------------------------------
Icon Text
------------------------------------------------------------------------------

What would be the easiest way to achieve this?

[dunbarx]

There was a thread about this a while ago, that I think had a fairly elegant solution to this. But I cannot remember where is it. So here is an ugly solution, and I hope you do not change the width of your button. Of course, even this can always be addressed, even in this ugliest of worlds.

Set the textAlignment to "right". Pad the name of the button with a dozen or two of trailing spaces. You will have to experiment to get it right, though as I said above, this can be made formally manageable.

Craig Newman

[charms]

Hi Craig,

I tried to find an example of the padding in the forum but couldn't find it. I'm listing buttons in a scrollable group so I need to resize them while creating them in the list depending on the size of the group. So while it would be interesting to see how this works I won't be able to do it this way.

Thanks for your input. It's appreciated. I think I will play around with with a custom control and then eventually move on to datagrid if there is really no other possibility and just create a button in there.

Kind regards,
Chris

[PBH]

Hi Chris,

If I understand this correct, it looks like this should be scriptable fairly easily, it just involves a little simple maths with the margin values.

Tried this in a 300 px wide button…

Apply the icon & set the label for the button then in the Property Inspector set the text to left align and set the margins to 40,0,260,0

Note the 1st and 3rd margin adds up to the button width, and 40 pixels is the width I felt was about right for the small icon that I used.

See attached stack, & try resizing the button, it should explain itself when you see the button script.

HTH

Paul