1.877.226.2662

Customize Number Display Styles in Simple Search

Customize Number Display Styles in Simple Search

Return to Customize Search Criteria Styles

Modifying the default Styles for Numbers

A default Number display is shown below associated with the column % Complete. If the Is Between operator (designated #1 below) is selected, the display changes slightly to reveal the word and and a second text box control (see #3 below). Task Status is a choice type column and is shown for comparison.

number before1 with num.png
number before2 with num.png

Different classes are associated with each control included with the Number column search criteria:

Class Default
1. The .DropDownListControlsNumber class is used to control the display of the drop down menu that lists the possible operators (i.e., Is Equal To, Is Less Than). 
.DropDownListControlsNumber
{
min-width:120px ;
}
2.

The .TextBoxControlsNumber class is used for the box where search criteria for columns of type number is entered.

Icon-WarningIMPORTANT: When the operator In Between is selected, a second box appears. This class does not control that second box. There is no class available in the current version to control that box.

 
.TextBoxControlsNumber
{
min-width:135px;
}
3. The .LabelControlsNumber class is used for the word and that appears between the two text boxes when the operator Is Between is selected. 
.LabelControlsNumber
{
width:auto ;
float: right !important;
}

The table below shows examples of common changes possible for Number columns. Additional examples may also be possible.

Change Example

To shorten the control where you enter the currency value, change the min-width value of the .TextBoxControlsNumber class.

To shorten the control where you select the search operator (i.e., Is Equal To), change the min-width value of the .DropDownListControlsNumber class.

For example, make these changes:

.TextBoxControlsNumber
{
min-width:100px;
}

.DropDownListControlsNumber
{
min-width:100px;
}

The result looks like this:

number after 1.png
When a user enters invalid text into the search area for a currency column, an error is displayed. The .LabelControlsNumberError class controls the display of the message.

The default error message appears like this:

number error before.png
Change the text to blue:

.LabelControlsNumberError
{
color: #0000FF;
width:auto ;
}

The result looks like this:

number error after.png
Change the font weight and color of the word and that appears when the user chooses the operation In Between. The .LabelControlsNumber class controls the display of this word.

Change the text to bold and green:

.LabelControlsNumber
{
color: #FF0000;
width:auto ;
font-weight: bold;
color: #008000;
}

The result looks like this:

number after 2.png
Change the display of the Label. The label is the text that appears to the left of the operator selection drop down. All labels have the same class, regardless of the type of column. See this article for examples of how to change them.