Forum | Appery.io

How can I change the label text color on click/press (then back to original color when released)?

Hi Mike.

Please follow these steps to change label style when user tap/click on the label:

1 Select label in design mode.

2 Navigate to the "properties"-"Class Name" and set it a value "yourBtnLabelClass". http://prntscr.com/38b31m/direct

3 Create new "CSS" asset. And populate it with following code: http://prntscr.com/38b3oa/direct

precode

.yourBtnLabelClass:active{

 background: #f00; 

}

/code/pre

That's all.

Thanks

Is there a simple way to constrain the label box to only fit the text inside of it?

Hello Mike,

Please add, for example, this CSS property to this label:

code
.yourBtnLabelClass{
display: inline-block;

}/code

Thank you

Evgene,

I've found that this didn't work to constrain the label component to only fit the text. I have the background color changing on click to see where the label boundaries currently are. It appears that the label spans the width of the screen.

I'm running the following CSS on this label component:

 display: inline-block; 
 position: absolute; 
 margin-left: auto !important; 
 margin-right: auto !important; 
 left: 0; 
 right: 0;

Mike,

Please try to center this element with JavaScript help as it's shown here:
https://getsatisfaction.com/apperyio/...

Evgene,

I ended up placing the label in a 1x1 grid that was the exact size of the text and centered that grid.

Thanks