Toolbar issue with responsive container

[Jonathan Payet]

Hello,

I have some issue with responsive container and toolbar.

For my layout i use : https://github.com/zesik/react-splitter-layout#readme (you can find a demo here : https://zesik.com/react-splitter-layout/#/standard-horizontal)

When i update the size of my container my toolbar look like... 

Before :

After : 

The right panel go upside the left panel.

The responsive work only if i'm in windowed mode.

Is it possible to do something for that ? 

Regards,

Jonathan Payet

[Vengatesh Maniraj]

Hi Jonathan, 

Greetings from Syncfusion Support. 

We tried to understand the reported problem at our end but we could not clear about the issue. We suspect that you have faced the problem with Toolbar responsiveness and we checked the responsiveness with Toolbar but it could be working. Please refer to the below sample. 

Sample: https://stackblitz.com/edit/react-g5vy48?file=index.js 

Before:  

 

After container size changed. 

 

Kindly check the above sample and if you still face the problem kindly share the below details to serve to better. 

1. Steps to reproduce the issue
2. Share the Toolbar illustrating code snippet
3. Share the issue reproducing sample or
4. Make the changes in the above sample to reproduce the issue.

The requested details are more helpful to validate the issue and provide the solution quickly. 

Regards, 

Vengatesh  

[Jonathan Payet]

Hi Vengatesh,

I created a sample here : https://stackblitz.com/edit/react-w5c9c9  ( Click on : "Open in new window" in the right top of stackblitz)
Responsiveness work because stackblitz use an iframe.
Please take a look in the new window and resize with the handler in the middle of the screen.

Regards,

Jonathan

[Sujith Kumar Rajkumar]

Hi Jonathan, 

 

Thanks for sharing the sample. 

 

The reported problem was occurring because the Grid was not refreshed properly based on the splitter’s size when it is adjusted. Since the Grid is rendered inside the Splitter component and adjusting the splitter modifies the total height, the Grid size also needs to be refreshed based on this at that position. So you can resolve this by refreshing the Grid using its refresh method after the splitter resize(In your case onDragEnd event). This is demonstrated in the below code snippet,  

  

// React splitter layout's onDragEnd event handler 

splitterResize(args) { 

        this.gridInstance.refresh(); 

} 

  

We have modified the sample provided based on this which you can find below,  

Sample: https://stackblitz.com/edit/react-w5c9c9-ow9zrk  

  

Let us know if you have any concerns.  

  

Regards,  

Sujith R  

[Jonathan Payet]

Hello, thank you very much for your reply.

We can say that the problem is solved!

Regards,

Jonathan

[Sujith Kumar Rajkumar]

Hi Jonathan, 

 

You’re welcome. We are glad to hear that your problem has been resolved. Please get back to us if you require any further assistance. 

 

Regards, 

Sujith R