How can I change the padding of the text inside a button?

[julio.gonzalez]

In ThingWorx mashup, I am adding a button but I need a label very close to it. The text within the button always leave around 20px from the text to the frame, so the label looks very far away from the text inside the button. I tried to use the CSS .ptc-button and then adding padding 1px; but this padding is considering the button frame to the next widget.

Is there a property I can use to reduce this gap (between the text and the button frame)?  See attached file for an example.

[slangley]

Hi @julio.gonzalez.

Which version of ThingWorx are you running?

Regards.

--Sharon

[julio.gonzalez]

Dear Sharon,

Thanks for responding my cry for help! 

I am using release 8.5.

Julio

[slangley]

Hi @JJ_9567198.

I'm not running 8.5.? but in looking at my 9.1 system, there are a few options:

• Resize the button by dragging the corners
• Use the Properties to set the desired size
• There is an element.style group that has a margin style property.  By default this is set to 5 px but it can be reduced to 0 through CSS for both the button and the label
• You can also try using static spacing in the layout to see if that would help

Regards.

--Sharon

[julio.gonzalez]

Thanks Sharon for the recommendation:

• Resize the button by dragging the corners   I did it and the issue is that the text is replaced by ellipsis. (three dots). It does not fix my problem.
• Use the Properties to set the desired size  I did it and the issue is that the text is replaced by ellipsis. (three dots). It does not fix my problem. I can set the size of the height, though.
• There is an element.style group that has a margin style property.  By default this is set to 5 px but it can be reduced to 0 through CSS for both the button and the label   Do you know what is the format or where I can get the CSS definition?
• You can also try using static spacing in the layout to see if that would help.  I tried but this is only useful for the widget but not for the text embedded in it. I need to remove the margin from the internal text but I do not know the CSS style. I used .ptc-button and I could change some properties but not the one I need to.

Julio

[tdixit · Accepted solution]

Hi @julio.gonzalez 

Please check the below article if it might help

https://www.ptc.com/en/support/article/CS320453

Regards,

Toolika Dixit

[julio.gonzalez]

Thanks Toolika for responding to my message.

This is what I was looking for. However, I have 8.5.4 and even defining the CSS in the custom class of the button, the change does not happen...

I am adding 

• .widget-ptcsbutton::part(root){
    padding:0px !important;
  }

to the CSS, and then add in the custom class widget-ptcsbutton, but it does not work.

Anything I am doing incorrectly?

[julio.gonzalez]

I worked. I was adding the dot in the name but because it was so small, I could not see it..

Thanks to everyone for the support.