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.

Dom Relocation Global View

Dom Relocation View is used when you need to move a dom element from one container to another on browser window resize. For example: move a menu list from the top bar to the hamburger menu dropdown in cases when you cannot do this using css @media queries.

How to Use

To move an element from one container to another on window resize, add data-dom-relocation-options attributes to the corresponding element, as illustrated below:

 1 <div class="element-to-move"
 2      data-dom-relocation-options="{
 3         responsive: [
 4             {
 5                 viewport: {maxScreenType: 'tablet'},
 6                 moveTo: '#parent_container' // jQuery selector,
 7                 sibling: '#sibling_element' // jQuery selector,
 8                 prepend: true // Boolean,
 9                 endpointClass: 'some-class-add-after-move' // String
10             }
11         ]
12      }"
13 >
14 <!-- Other content -->
15 </div>

Options

Responsive

Type: Array

Set multiple moveTo targets for different types of screens:

 1responsive: [
 2    {
 3        viewport: {maxScreenType: 'tablet'},
 4        moveTo: '[data-target-example-1]', // jQuery selector
 5        sibling: '[data-target-example-1] > div:eq(2)', // jQuery selector
 6        prepend: true // Boolean
 7    },
 8    {
 9        viewport: {maxScreenType: 'mobile'},
10        moveTo: '[data-target-example-2]', // jQuery selector
11        prepend: true, // Boolean
12        endpointClass: 'moved-to-parent' // String
13    }
14]

It works with same logic like css @media, so the last item of the array has higher priority.

viewport

Type: Object

Default: ‘{}’

The option describes when to relocate the DOM element. All available screen types are defined by the Viewport Manager.

moveTo

Type: String

Set the target selector where to move the element.

sibling

Type: String

Indicate next to which element to insert another element.

prepend

Type: Boolean

Change behavior to append the element to the target parent. If set to true, the element is going to prepend the target element. If set to false, the element is going to append to the end of the parent.

endpointClass

Type: String

The css class added to an HTML element after it was moved.