We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to move target when content in sidebar changes width

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?


3 Replies

KR Keerthana Rajendran Syncfusion Team October 21, 2019 08:52 AM UTC

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 class="title">Main content</div> 
            <div class="center-align"> 
                   content goes here. 
  <ejs-sidebar id="sidebar-menu" :target='target' :type ='type' ref="sidebarInstance"> 
For your reference, we have prepared a sample. Refer the sample link below. 
Please let us know, if you require further assistance on this.  

ML Marius Lian October 21, 2019 10:08 PM UTC

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


KR Keerthana Rajendran Syncfusion Team October 22, 2019 10:23 AM UTC

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 
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. 
Please let us know, if you require further assistance on this.  

Live Chat Icon For mobile
Up arrow icon