How to move target when content in sidebar changes width

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

Reply | Reply with quote

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>

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

content goes here.

</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.

Reply | Reply with quote

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

Reply | Reply with quote

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.

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

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

Regards,

Keerthana.

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
148446	Oct 20,2019 10:44 AM UTC	Oct 22,2019 10:23 AM UTC	Vue	3

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US