Style MobileCheckBox

[PaulBacci]

How can I control the style of a mobilecheckbox control. I want to make the text smaller and am not sure how to do it via css. Any suggestions? Thanks,

[maxkatz]

Select the check box container, then in properties you will get Class property to set any custom styling.

[PaulBacci]

Hi Max. Thanks for the reply.

I've tried this by assigning the "Class Name" property of the MobileCheckboxGroup a value of "fieldTag". Below is CSS entry but it does not affect the result. Is this what you are referring to?

.fieldTag
{
font-weight:bold;
font-size:11px;
}

What could I be doing wrong?

Also, another issue is when I style other controls by assigning a class, the control is not visually rendering the css style at design-time but does work at runtime. Can this be changed to also work at design-time?

Thanks

[maxkatz]

The class that sets the label style is this:

.ui-btn-text
{
font-weight:bold;
font-size:20px;
}

You can check that with Chrome Developer tools.

You will only see the applied style in run time. The updates that you make in properties will be reflected in design time. When you apply custom styling, we don't know how it's going to look (without running), that's why they are not shown in design.

[DetroitTech]

I swear this is my last newbie help question. I too am trying to change the font/css of the mobile checkbox. when I select the container I only see "more properties". Then It shows type attribute and type value. where do I enter the code:

.ui-btn-text
{
font-weight:bold;
font-size:20px;
}

Thanks. I know how to edit css in an editor/notepad but how in Tiggzi editor? Thx again.

[maxkatz]

http://docs.tiggzi.com/documentation/...

[DetroitTech]

Awesome thanks however .ui-btn-text does change for all, I followed the instructions to the T to customize only select checkboxes/buttons and it's not applying.

Created a css like this:
.my-button {
font-weight:bold;
font-size:28px;
}

Added that to the class name and it doesn't change it. For a checkbox or a button. I understand this may be my lack of knowledge. Is it possible to change only the checkbox text like:

.ui-btn-checkbox
?

Or since I'm using a checkbox inside a collapsible I tried this as well:

.ui-btn-inner
?

[DetroitTech]

Think I got it...
.mobilecheckboxgroup2 div.ui-checkbox span.ui-btn-text

or

.mobilecheckbox6 div.ui-checkbox span.ui-btn-text

seems to work for the group. Anyway sorry for bothering hope this helps someone in the futre.

[Emmz]

Yup ! It did for me.. Tks for following up !