CMS 10.6 In-Context Editing (ICE) CSS Considerations

Use the CSS considerations when working with CMS ICE implementations.

This topic includes:

Direct Child Selectors

Avoid using a direct child selector like .parent > .child between the ICE field node and its parent.

The CMS 10.6 ICE system injects an element to wrap the original render node, so if you use a direct child selector between them, this will break the associated styles.

If this happens with the cut-up CSS, choose one of the following options:
  • Remove the right-angle bracket (>) between the parent and child selector.
  • Replicate the CSS entry to implement a similar look without using the right-angle bracket (>).

ICE Field Views Root Markup

For ICE fields to work properly, ensure the SS for ICE field root elements meets the following criteria:

  • The markup doesn't contain the position property with an absolute value.
  • The markup doesn't contain the float property.
  • The markup doesn't contain the height property with a percentage type value.
Keep in mind that, when in ICE mode, all ICE fields take up the full width of their parents to ensure there is enough room to work within each field. As a result, content in Preview and ICE mode may display differently. This is expected.