Theme UI-Kit-Styling a Search box
Theme UI-Kit - Styling a Search box / (Redirected from Theme UI-Kit-Styling a Search box)
This is the approved revision of this page, as well as being the most recent.
Jump to navigation
Jump to search
This is the approved revision of this page, as well as being the most recent.
Theme UI-Kit-Styling a Search box
There is no out-of-the-box control in Pega Platform to implement a search box. Usually, it is implemented as a regular text field with a Search button next to it. However, it is much more intuitive to have a text field with a Search icon (a magnifying glass) for entering search criteria. This is in line with what is visible on most popular websites and apps. This document provides the steps for styling a search box that looks like the following screenshot.
To style the search box:
- Configure a Text input control.
- In the Presentation tab, in the Control format field, enter Table search.
- In the Advanced Presentation Options section, define the Cell read-write classes and Cell read-only classes as label-height-0 border-0.
- Clear the Reserve space for label check box.
For more information about Text input controls, see https://community.pega.com/knowledgebase/articles/user-experience/85/configuring-text-input-control.