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. Image for the cookie policy date
close icon

Ribbon not resizing within the Splitter control

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?

1 Reply

KN Kavitha Narayanan Syncfusion Team May 4, 2016 12:25 PM UTC

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}) 
 
 
 
 
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. 


Loader.
Live Chat Icon For mobile
Up arrow icon