Skip to main content link. Accesskey S

Filters

Filters are a list of items selected by the user that can be removed by clicking on them. They are found under headers and in member dialogs, for example.

Directionality:

Filters

Classes

  • lotusFilters2 - the class assigned to the component div
  • lotusFilter - the class assigned to a filter link
  • lotusDelete - the class assigned to the delete image
  • lotusAltText - the class assigned to a span tag with an "X" inside it, for high contrast mode.
  • lotusDivider - the class assigned to a span tag that can be used as a separator

Basic Implementation

Create div and assign it the class of lotusFilters2. Inside that, create as many filters as you'd like, using link tags. You can intersperse plain text with the links.

Inside the link, after the link text, put an img tag with the class lotusDelete and the sourcc blank.gif. Put width and height attributes of 12px. Do not leave a space in between the text and the link, the css takes care of the spacing.

Put <span class="lotusAltText">X</span> after the image tag, for the X to show up in high contrast mode.

IMPORTANT NOTE: In IE6 and 7, our CSS to insert \u200F when in RTL mode won't work. If the resulting behavior isn't acceptable for your product in IE6 and IE7, you can use code to insert &#8207; before the img. If you are doing this using javascript, use \u200F.

Examples

Sample HTML

CSS (filters.css)

Theme CSS (filtersTheme.css)

March 2010: Filters used to be part of the header component, but they have started to be used in other areas. So we have made them a unique component.

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.