View source for Theme UI-Kit - Styling a Search box

Theme UI-Kit - Styling a Search box / ← Theme UI-Kit-Styling a Search box

You do not have permission to edit this page, for the following reasons:

• The action you have requested is limited to users in one of the groups: Users, editor, pegaemployee.
• The action you have requested is limited to users in one of the groups: pegaemployee, editor, Administrators.

---

You can view and copy the source of this page.

{{Design pattern|Title=Theme UI-Kit-Styling a Search box|Description=Style a search box to look like standard search boxes|Version=8.1|Applications=Pega Platform|Capability Area=User Experience|Owner=Iasya Vemula}} 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. [[File:Search box.png|thumb|'''Search box Example''']] [[File:Config.png|thumb|Configuration ]]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.

Return to Theme UI-Kit-Styling a Search box.