Ribbon not resizing within the Splitter control

[James Pham]

Ribbon is placed inside a Splitter control and its allowResizing property set to true. When I resize the splitter, but the Ribbon doesn't resize with it. It does resize, however, when the browser window is resized.

How do I configure the Ribbon to resize to the sizing of not only the browser window but also the splitter control?

[Kavitha Narayanan]

Hi James,   

Thank you for contacting Syncfusion support.    

We had achieved your requirement “Configure the Ribbon to resize to the sizing of not only the browser window but also the splitter control” through resize event of splitter control where we set Ribbon width as Splitter width.   

Please refer to the code and sample.   

 

 

$(function () { 

            $("#outterSpliter").ejSplitter({ 

                height: 250,width:"100%", 

                orientation: ej.Orientation.Vertical, 

                properties: [{}, { paneSize: 80,resizable:true}], 

                                                                enableAutoResize:false, 

            }); 

            $("#innerSpliter").ejSplitter({enableAutoResize:false,resize:"splitresize"}); 

        });set resize event here 

 

function splitresize(args,sender){ 

                                var ribbonobj= $("#defaultRibbon").data("ejRibbon"); 

                                var val=$("#defaultRibbon").parent().width()+"px";//get width of splitter control 

                                ribbonobj.setModel({width:val}) 

 

 

 

Sample: http://www.syncfusion.com/downloads/support/forum/123965/ze/sample-1033321384.zip  

 

Once all the groups are in collapsed state, if we try to reduce the size again in that instance elements will not show.   

Regards, 

Kavitha N.