Do you have Nintex Forms 2010 or 2013 ?
In the settings of the checkbox, have you added a custom css class in "Control CSS class" or in "CSS class" field ?
What is your exact css ?
It is Nintex Forms 2013.
I tried to add custom CSS in form settings custom css like this (which works with sp 2013 default forms - id has to be replaced!):
#ctl00_ctl33_g_47f64e00_8c95_4fb8_b32e_765efc218141_CheckBox1
{
-ms-transform: scale(2); /* IE */
-moz-transform: scale(2); /* FF */
-webkit-transform: scale(2); /* Safari and Chrome */
-o-transform: scale(2); /* Opera */
padding: 10px;
}
I tried to play around with some scale, width and height properties in IE developer tools (F12). There were no changes applied to the checkbox.
This is the checkbox selected in IE developer tools (F12):
This is the way I tried changing the appearance of the checkbox (in form settings custom css):
#ctl00_ctl33_g_043ba33b_a7c7_4d7b_aba2_abbb86ff50e6_ctl00_ListForm2_formFiller_FormView_ctl58_4f9941ca_be1d_4fec_9e00_a13a8f505686
{
display:none !important!
}
or
#7ceba682-6b88-4865-924f-65e4e2fe900d
{
display:none !important!
}
display:none is just an example to try whether my settings apply - and they don't.
So as I can not modify it by its id I am looking for a way to change it by its class.
I hoped someone could tell me things like:
"add some .nf-checkbox{transform:scale(3)} to your css. this will affect size of all checkboxes in your form by size factor 3"
To solve this you are going to want to use classes and not ID's. You can add a custom class name to this control just as Caroline suggested. Then you can find the control much easier. Sometimes, such as in multiline controls, just adding a css class doesn't add it directly on the element. If this is the case, you start your CSS selector with the custom class you added then add its descendant, such as the input. Then you will be able to apply all css to the element. You can even use input[type='checkbox'] but have your custom class in the same selector or you will match all checkboxes. There should be no reason you would use an ID in this scenario.
I totally agree with you Andrew. ID's are automatically generated and can change at each loading of the form, that's why you can store the id in a Javascript variable in the settings of the control, Advanced section. But to apply style in Nintex forms you should use css class especially if you want to apply the style to several controls.
If you add a css class in "Control CSS class" field in the settings of the checkbox (for example "my-custom-checkbox"), then the following css works :
.my-custom-checkbox
{
-ms-transform: scale(2); /* IE */
-moz-transform: scale(2); /* FF */
-webkit-transform: scale(2); /* Safari and Chrome */
-o-transform: scale(2); /* Opera */
padding: 5px;
margin-left: 20px;
}
Hope this helps
Thanks Caroline,
thats the way it worked. I added a custom class name in the css class field of the checkbox object. Then I added some custom css code pointing to this class into the form and it worked fine!
thanks for your help Caroline and Andrew!
Thumbs up!
