¶ Text Block (with border) style change
Available in Html5 Renderer version 1.0.5.11+ and Designer 1.0.11.134+
Text Block can be linked by another element's ID (Name property). The whole TextBlock style on an event of the foreign element inside the form can be changed.
¶ Place Text Block (with Border) inside the form
Please note that classic Text Block cannot be linked.
To place a Text Block with border on the form, simply select the control from the Toolbox and then drag and drop it on the form.
¶ Fill LabelFor property with correct element ID
¶ Initialize style change
The renderer will change the style of the corresponding label automatically, providing the label exists.
eForms.LabelFor.OnFocus({color:'#0000FF', transition:0.2});
eForms.LabelFor.OnUnFocus({color:'#000000'});
When the desired element is focused, the colour of the corresponding label will change to blue with fast transition effect of 0.2 seconds.
¶ Result of the sample code
Before focus state:
After focus state with transition delay:
It is then returned back to unfocus state without transition since it was not set.
¶ Supported events
- OnFocus (i.e. eForms.LabelFor.OnFocus(options))
- OnUnfocus (i.e. eForms.LabelFor.OnUnfocus (options))
- OnMouseEnter (i.e. eForms.LabelFor.OnMouseEnter (options))
- OnMouseLeave (i.e. eForms.LabelFor.OnMouseLeave (options))
- OnValidation (i.e. eForms.LabelFor.OnValidation (options)) - this event will be called when the element is invalidated
¶ Available options
Options are designed like javascript style objects.
- colour
- fontSize
- fontFamily
- fontWeignt
- top
- left
- padding (in format "x,x,x,x")
- transition (transitions change values by selected amount of time)