Customize Label Display Styles in Search Criteria

Return to Customize Search Criteria Styles

Modifying the default Styles for Labels

The .LabelControls class is used for labels. The default setting for the LabelControls is

.LabelControls
{
width:auto;
}

The default display looks like the labels shown below.

IMPORTANT: The .LabelControls class does NOT control the label for the Search in all columns for text box. There is currently no default class available to control that label.

The table below shows examples of common changes possible to Labels. Examples not included may also be possible.

Change Example

Change	Example
To right justify the labels, add a float property. NOTE: Use float instead of text-align when using the default layout. In the default layout, the .LabelControls class is inside a <b> tag, so Text-align will not affect it.	Change to: `.LabelControls { width:auto ; float: right !important; }` The result looks like this: NOTE: If you don’t add !important, the altered alignment will not appear.
To change the text color of the labels, add a background-color property.	Change to: `.LabelControls { width:auto ; float: right !important; color:#008000; }` The result looks like this:
To change the font for the labels, add a font-family property.	Change to: `.LabelControls { width:auto ; float: right !important; color:#008000; font-family: Times; }` The result looks like this:

To right justify the labels, add a float property.

NOTE: Use float instead of text-align when using the default layout. In the default layout, the .LabelControls class is inside a <b> tag, so Text-align will not affect it.

Change to:

.LabelControls
{
width:auto ;
float: right !important;
}

The result looks like this:

right justify labels.png

NOTE: If you don’t add !important, the altered alignment will not appear.

To change the text color of the labels, add a background-color property.

Change to:

.LabelControls
{
width:auto ;
float: right !important;
color:#008000;
}

The result looks like this:

label style after.png

To change the font for the labels, add a font-family property.

Change to:

.LabelControls
{
width:auto ;
float: right !important;
color:#008000;
font-family: Times;
}

The result looks like this:

set the font family.png