Important

You are browsing the documentation for version 4.1 of OroCommerce, OroCRM and OroPlatform, which is no longer maintained. Read version 5.1 (the latest LTS version) of the Oro documentation to get up-to-date information.

See our Release Process documentation for more information on the currently supported and upcoming releases.

Sticky Panel View

The sticky panel is used to display some elements when they leave the window view port. A sticky panel is always visible, so elements that can be moved to the panel are always visible, too.

How to Usage

To be able to show an element on the sticky panel, add the data-sticky attribute to this element

1 <div id="flash-messages" class="notification" data-sticky></div>

Customization

Add a class to an element in the sticky panel

Add the toggleClass option to the data-sticky attribute:

1 <div id="flash-messages" class="notification"
2      data-sticky='{"toggleClass": "notification--medium"}'>
3 </div>

Add an element placeholder to the sticky panel

Add a placeholder using the layout update:

1 - '@add':
2     id: sticky_element_notification
3     parentId: sticky_panel_content
4     blockType: container

Add a placeholder template

1 {% block _sticky_element_notification_widget %}
2     {% set attr = layout_attr_defaults(attr, {
3         'id': 'sticky-element-notification'
4     }) %}
5     <div {{ block('block_attributes') }}></div>
6 {% endblock %}

Add the placeholderId option to the data-sticky attribute:

1 <div id="flash-messages" class="notification"
2      data-sticky='{"placeholderId": "sticky-element-notification"}'>
3 </div>

Always show an element in the sticky panel

Move an element to the sticky panel using the layout update:

1 - '@move':
2     id: notification
3     parentId: sticky_element_notification

Several Sticky Panels

To create a custom sticky panel on the page, do the following:

  • Import sticky panel to the layout and define the namespace for a new sticky block.

1  imports:
2      -
3          id: sticky_panel
4          root: page_container
5          namespace: top

  • Each sticky panel should have its own name. You should define it with @setOption

1 - '@setOption':
2     id: top_sticky_panel
3     optionName: sticky_name
4     optionValue: top-sticky-panel

  • The stick_to option should be set to one of the following values: top (by default), bottom. This value defines the position calculation algorithm.

1 - '@setOption':
2     id: top_sticky_panel
3     optionName: stick_to
4  optionValue: bottom

  • When a new panel has been added to the page, customize the page elements that will use it. Add the data-sticky-target attribute with a sticky name.

1 <div id="flash-messages" class="notification" data-sticky-target="top-sticky-panel"
2     data-sticky='{"placeholderId": "sticky-element-notification"}'>
3 </div>