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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to move target when content in sidebar changes width

Thread ID:

Created:

Updated:

Platform:

Replies:

148446 Oct 20,2019 10:44 AM UTC Oct 22,2019 10:23 AM UTC Vue 3
loading
Tags: Sidebar
Marius Lian
Asked On October 20, 2019 10:44 AM UTC

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 [Syncfusion]
Replied On 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> 
            <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. 
 
Please let us know, if you require further assistance on this.  
 
Regards, 
Keerthana. 


Marius Lian
Replied On 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

Thanks,
Marius



Keerthana Rajendran [Syncfusion]
Replied On 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 
           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. 
 
Please let us know, if you require further assistance on this.  
 
Regards, 
Keerthana. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon