Parent | Child | Previous | Next

Local CSS

Description

Define custom CSS Classes that are stored at the control level.

Discussion

By default, custom CSS classes are defined at the Component level. When controls are copied between components, CSS classes used by the control defined at the Component level are not copied.

Local CSS allows you to define CSS classes at the Control level, allowing you to create a 'self-contained' List control that, when copied, includes any custom CSS classes that the List control uses.

Local CSS vs CSS Defined at the Component Level

CSS can be added to the List control in two places: in the Local CSS property or at the Component Level on the List CSS Pane (recommended). It is important to understand the difference between these two methods for adding CSS to the List.

Local CSS is stored in the List control but loaded into a shared namespace used by every control in the UX Component. Classes defined in this property are visible to all controls in the UX. This means a class defined in the Local CSS property can be referenced by other controls. It also means that if more than one List control defines a class with the same name in theLocal CSS property, the style definition in one List may be overwritten by another.

CSS defined on the List CSS Pane is stored at the component level. CSS defined on this pane is exclusive to the List control. This means if you have two Lists that define the same class (e.g. 'style1'), the definition of the class in the first List is NOT overwritten by the definition of the class in the second List.

It is best practice to define CSS for the List control at the component level on the CSS pane. The Local CSS property is an older approach to defining CSS. It was added to make it easy to copy the List control between components without losing custom styles used by the List control.