Toolbar issue with responsive container

Question

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

Sujith Kumar Rajkumar · Accepted Answer

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

Vengatesh Maniraj · Answer

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. 


Steps to reproduce the issue
Share the Toolbar illustrating code snippet
Share the issue reproducing sample or
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 · Answer

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

Jonathan Payet · Answer

Hello, thank you very much for your reply.We can say that the problem is solved!Regards,Jonathan

Sujith Kumar Rajkumar · Answer

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