How to create custom (Image / Button) component that isn't ugly as sin?

Hello. In a previous post, I created a Hierarchical icon text row functionality:

I understand it is possible to create custom components using only forms, and then dragging them into the desired form as a custom component.

The problem I have is this. I’m trying to create a custom row component, where there is an icon (an image) to the left of some button. All the implementations I’ve tried look terrible. Here is the abomination with the custom Sin form below the Messages component:

The biggest thing I can notice is that the button text is getting cut off.

Any hints?

without getting into css:

  • make sure that ‘sin’ has ‘wrap_on’ set to ‘never’
  • add a FlowPanel
  • add a LinearPanel to the FlowPanel and make it your desired image width by dragging it
  • add an Image into the LinearPanel
  • add a Button next to the LinearPanel

Screen Shot 2020-02-25 at 16.01.23

4 Likes

Beautiful! Thank you! :slight_smile:

1 Like