Skip to main content link. Accesskey S

Search Tab

The search tab is an expandable "find in table" control that sits at the top of a table of content.

Directionality:

Classes

  • lotusSearchTab - the class assigned to the wrapper div that contains a link with the word "Find" in it.
  • lotusTabExpanded - and additional class that goes on the lotusSearchTab div when the search tab is open.
  • lotusSearchForm - the class assigned to the form that displays when you open the search tab.
  • lotusText - the input field for the search text.
  • lotusInactive - an additional class that goes on the search input box until the user starts typing in the box.
  • lotusSubmit - the submit button for the search form.

Basic Implementation

The search tab is made out of two pieces - a div with the word find in it and a toggle arrow, and a search form that can be toggled.

It needs to be placed within an action bar component to work correctly.

The text input field initially has gray text (set by lotusInactive class). As soon as the user starts typing, that class should be removed.

Examples

Sample HTML

CSS (searchTab.css)

Theme CSS (searchTabTheme.css)

At one point, this was the global search control.

May 2010: added lotusInactive class to the search input box to make the text initially gray and removed the gray color from the actual input field.

See Also:

IBM, the IBM logo, ibm.com and Lotus are trademarks of International Business Machines Corp., registered in many jurisdictions worldwide. Other product and service names might be trademarks of IBM or other companies. A current list of IBM trademarks is available on the Web at "Copyright and trademark information" at www.ibm.com/legal/copytrade.shtml.