Button Layout of Title and Icon

[richip]

I'm currently using SmartGWT 5.0p. I need to create a button (or a clickable UI element, but am currently trying a Button) that has text/title in it that is left-justified and an image/icon that is right justified. Is there any recommendation for how to do this? Like I said, I'm currently trying it with a Button but I can't get the layout the way I need to

[Isomorphic]

You haven't really explained what parts of this component are interactive and which areas are considered distinct clicks. What you may be looking for is multiple components, such as a ToolStripButton and ImgButton in a ToolStrip, with a LayoutSpacer with width:"*" in between.

[richip]

That was a bit careless of me. What I want, in effect, is one single button-like widget that the user can hover over, focus and/or click on (showing these different states) but the layout of contents is such that it has text in it that is left-justified and and image (I have PNG files) that are directly across it right-justified.

I could try your suggestion of combining different widgets, but they have to be treated as an individual widget such that if I hover over one, the effect is that it hovers on all. Same goes for clicking, etc. Is this possible?

The closest I got is with a Button where I setIconOrientation("left"), but it keeps the text and the icon together in whatever justification I set.

[Isomorphic]

All possible, but these are unusual requirements, which is usually a red flag that something is wrong or unstated in the question itself.

For example, perhaps what you really need is multiple such controls, because it's really more of a menu. In this case, a ListGrid or Menu component would be the best fit.

[richip]

No, nothing special. It's really just a button but the "design" folks wanted it laid out that way: text on left, image on the right.

I could do the opposite and use a Menu (since MenuItems are laid out closer to what I need) and make it function like a button, but I'd rather not.

[Isomorphic]

A Menu, a single-row ListGrid with showHeader:false, or a single-section SectionStack with no actual items are all ways to create this appearance in a kind of "brute force" way.

Also if you want just larger *fixed* spacing between the title and image, you can add transparent space to the image, or add   characters at the end of the title.

But really, what we'd recommend is to go back to the design folks and revisit this. The appearance they've spec'd is what users think of as a header, and if that's what they are using for a normal button, that's going to confuse typical users by violating expectations.