How to move target when content in sidebar changes width

[Marius Lian]

Hi Syncfusion,

I have a sidebar with a mainContent area as target.

The content in the sidebar changes sometimes and then the width of the sidebar changes but unfortunately the mainContent isn't pushed to the side. It becomes positioned under the sidebar.

I can't find any example, property, event or method that could solve this. Only way is to close and open the sidebar.

The best would be if this was handled automatically when sideBar has type "Push" and a target.

Ist there a way to achieve this?

Thanks,

Marius

[Keerthana Rajendran]

Hi Marius, 

 

Thanks for contacting Syncfusion support. 

 

We have checked your reported query that sidebar does not pushes the main-content area. To achieve this, you can set the custom CSS class as a main-content area of the sidebar element and set the class as a target in sidebar element. It will push the main-content element during open and close of sidebar component. 

 

Refer the below code snippet by setting the target element. 

return { 

       // Setting target for main-content area. 

        target : '.main-content', 

        type: 'Push' 

    };   

 

<div class="main-content"> 

        <div> 

            <div class="title">Main content</div> 

            <div class="center-align"> 

                   content goes here. 

            </div> 

        </div> 

    </div> 

  <ejs-sidebar id="sidebar-menu" :target='target' :type ='type' ref="sidebarInstance"> 

    </ejs-sidebar> 

 

For your reference, we have prepared a sample. Refer the sample link below. 

https://codesandbox.io/s/vue-template-qyq6d 

 

Please let us know, if you require further assistance on this.  

 

Regards, 

Keerthana. 

[Marius Lian]

Hi Keerthana,

This  is not an answer to my question. What you have answered here is the same as in the samples in the documentation.

The problem I described was when the content inside the sidebar changed. Then the target is not re-positioned.

Here you can see: https://www.screencast.com/t/vC9ZXH5j9Fy

Thanks,

Marius

[Keerthana Rajendran]

Hi Marius, 

 

Sorry for the inconvenience caused. 

 

We have analyzed your query “main-content area is not pushed while sidebar content updated”. When you update the inner content of the sidebar element, the sidebar element doesn’t detect the changes. So, we suggest you to manually call the refresh() method of sidebar component which will detect the changes in sidebar element and calculate the position of sidebar. This will push the main-content area to the exact position. 

 

Refer the code snippet for calling the refresh() method. 

 

changeClick: function() { 

           this.$refs.sidebarInstance.$el.querySelector(".sub-title").innerHTML =" During click the content of the sidebar can be changed and the main content area will be expanded"; 

         // Calling the refresh method of sidebar element 

           this.$refs.sidebarInstance.$el.ej2_instances[0].refresh(); 

        } 

 

 

For your reference, we have modified the previously attached sample. In that sample, during button click we have changed the content of sidebar and invoke the refresh() method to update the main-content. 

 

Refer the sample link below. 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/quickstart266981564.zip 

 

Please let us know, if you require further assistance on this.  

 

Regards, 

Keerthana.