Skip to main content

Has anyone found a way to reuse styling on a label or data label or any other control for that matter?

 

If I have 30 fields with 30 labels I need click the style button and adjust the formatting for each label/control individually.  The only solution I've been able to come up with is to make the labels a literal and make the text something like <span class="labelClass">Label Name</span>.

 

Any ideas are appreciated? 

Hi CalebKortuem,

 

This can be achived  using one of the below 

 

  •  Add style to Existing classes

 

  • By Replace Existing classname with new class name

 

1) Add style to Existing class

 

  • All the similar controls will be having same class names so you can add new style for those classes for Example:

 

 Label is having class name class="SFC SourceCode-Forms-Controls-Web-Label"

 

you can add new style to this class as below

<style>.SFC.SourceCode-Forms-Controls-Web-Label {

    color: black;

    padding: 3px;

    font-weight: bold;

    font-size: 12px;}</style>

 

 

this style will automatically reflect to all labels in smartform.

 

 class name can be seen by using Inspect option available in browser

 

2) By Replace Existing classname with new class name

 

  • In some cases, it’s possible that all controls are not required with same style or style class old properties will overwrite the style and you may not get appropriate result in that case.

 

For such a case, you can use "Jquery attribute Selector" to replace existing class name with new class name and add style to new class

Example:

 

For all controls where you want to change the default style give control property name starting with same text, as In my case I have given "txtEmployee****"

 

Then add below style and script to two different data labels.

 

<script>$(document).ready(function() {

$("inputename^='txtEmployee']").removeClass();

$("inputename^='txtEmployee']").addClass("inputCtrl");

});</script>

 

 <style>.inputCtrl{

padding: 5px;

width: 75%;   

border-color: green;

border-style: solid;

border-width: thin;}

</style>

 

 

 


Hi Kran,

I have the same problem with reusable styles but I am using K2 Cloud solution. I do not think that I have any access to the stylesheets.

Is there any solution for the cloud environment?

 

Mike


Reply