Labels

Add labels to editable controls.

Allows a control to display a label without having to create a separate Label control.

When dropping a control that supports the associated label, you will find the Label field in the quick actions panel. Entering the label text automatically creates the associated label using the default properties.

You can change all the Label's properties either in the control's property panel or in code by using the Control.Label object.

Features

Position

You can position the label to any of the four sides plus the Inside position. When the label is positioned inside, it is displayed over the editable control and automatically resized and moved up when the user enters a value or the application assigns the Text property.

AutoSizing

The internal layout of controls with the associated label is always managed by the widget and is controlled by these properties of the Label object: Text, Position, AllowHtml, Padding, Size, MaxSize, MinSize, and SizeType.

The outer size of the control is always the size set by the application - internally the label and the control share the outer size. You can control how much of the internal space is used by the label using the SizeType and Size properties:

AutoSize (the default) means that the label occupies exactly the space it needs and the associated control uses the remaining space.
Absolute means that the label occupies the number of pixels set in the Size property.
Percent means that the label occupies the percentage of the space indicated in the Size property. Basically the Size property is either a pixel value or a percent value.

Additionally, you can constrain the size of the label by setting the MinSize and MaxSize properties, always in pixels.

HTML

When the AllowHtml property is set to true, you can use any HTML string in the label to create labels of any complexity:

Mnemonics

Mnemonics are another feature that is common in desktop applications and generally completely forgotten in most web frameworks, except in Wisej 😀

To assign a mnemonic character, type a & before the character that has become the mnemonic, set UseMnemonic to true and AllowHtml to false. Wisej will render the mnemonic character underlined, which is the standard in desktop apps.

Users can now immediately focus the field simply by pressing Alt + Mnemonic character.

The same mnemonic functionality is supported in the independent Label control. However, in the Label control case, the control that gains the focus when the mnemonic is pressed is the next focusable control in the tab order.

Advanced

Localization

Only the text of the label is localizable.

Responsive

The properties of the Label object are not responsive. When the control is resized, the label widget will automatically adjust its internal space, but it's not capable of changing the location of the label or change any other property in conjunction with a ClientProfile.

If you need to adjust any aspect of the label in relation to a responsive profile, handle the Application.ResponsiveProfileChanged event and change the properties in code.

Controls with the associated labels, when created in the browser, are wrapped inside an instance of the wisej.web.LabelWrapper JavaScript class.

JavaScript code that needs to interact with the editor control instead of the wrapper, should call this.getEditor() to get a reference to the wrapped editor control.