Skip to main content
pshashipreetham
18-Opal
pshashipreetham18-Opal
18-Opal
December 13, 2022
Solved

ICON Alignment in Button in Thingworx 9.X

  • December 13, 2022
  • 3 replies
  • 2208 views

Hello,

is Icon alignment in button is possible? in previous version of Thingworx 8.x, ICON on button can be aligned, but there is no option to align in 9.x.

is there any possibility with CSS or any other workaround?

 

Thanks,

Best answer by pshashipreetham

Hello, 

 

I made a workaround.

  1. Like Buttons and Value Displays have the clicked events. I have placed the Value Display(Transparent with no borders or background ...) and Image on the Top. Click on the Image or Label, and click Event Works.
  2. One most straightforward way is to Have a transparent button on top and z-index the Image on the background.

Thanks,

3 replies

C
CharlesJi16-Pearl
16-Pearl
December 13, 2022

Hi @pshashipreetham 

I believe in ThingWorx 9.x, the icon will align with the label inside the button, which is controlled by LabelAlignment property. You might try it, unless you want to separate the label and the icon.

pshashipreetham
18-Opal
pshashipreetham18-OpalAuthor
18-Opal
December 13, 2022

Hi @CharlesJi ,

Thanks for quick response, I want Label to be in the Bottom and the ICON on Top, which was possible previous 8.x version, But I can't see it now.

Thanks,

S
slangleyCommunity Manager
Community Manager
December 14, 2022

Hi @Shashi_Preetham.

 

You can submit a request for this on the ThingWorx Ideas forum.  Be sure to indicate the version of ThingWorx you're running and details regarding the request.  Which button widget are you using?  Screenshots would be helpful.

 

Regards.

 

--Sharon

    pshashipreetham
    18-Opal
    pshashipreetham18-OpalAuthorAnswer
    18-Opal
    September 4, 2023

    Hello, 

     

    I made a workaround.

    1. Like Buttons and Value Displays have the clicked events. I have placed the Value Display(Transparent with no borders or background ...) and Image on the Top. Click on the Image or Label, and click Event Works.
    2. One most straightforward way is to Have a transparent button on top and z-index the Image on the background.

    Thanks,

    T
    TomerH12-Amethyst
    12-Amethyst
    February 6, 2024

    Try add custom css class with direction: rtl

     

    .rtl {

        direction: rtl;

    }

    Terms & ConditionsAccessibility statement