Change Label Text Color on Click

[Mike6580064]

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

[Yurii Orishchuk]

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{

Code: Select all

 background: #f00; 

}

/code/pre

That's all.

[Mike6580064]

Thanks

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

[Evgene Karachevtsev]

Hello Mike,

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

code
.yourBtnLabelClass{
display: inline-block;

}/code

[Mike6580064]

Thank you

[Mike6580064]

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:

Code: Select all

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

[Evgene Karachevtsev]

Mike,

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

[Mike6580064]

Evgene,

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

Thanks