Ribbon sizing of content elements and resizing

[Daniel Barisch]

Hi,

I have two question:

1. How can I define a button in a ribbon group which adapts its size (e.g width by fixed height or height by fixed width) automatically based on its content size, e.g. text length?
2. Does your ribbon support a responsive resizing behavior, e.g. if I descrease the width of the browser window, that the ribbon content adapts automatically e.g. as Microsoft Office product do?

regards,

[Sarath Kumar P]

Hi Daniel, 

Thanks for contacting Syncfusion support. 

Query#1:"How can I define a button in a ribbon group which adapts its size automatically based on its content size" 

 

By default, button in ribbon control adapts it's size automatically based on it's content size. Please refer to the below codes and the attached sample. 

 

[ribbon.component.ts] 

  

groups1 = [{ 

        text: "New", 

        alignType: "rows", 

        content: [{ 

            groups: [{ 

                id: "new", 

                text: "Button content", 

                toolTip: "Button content" 

            }], 

            defaults: { 

                type: "button", 

            } 

        }] 

    }] 

  

If you want to customize button size and appearance ,you can do it using properties in "buttonSettings".Please refer to the below API documentation link. 

 

API Documenation:  

 

https://help.syncfusion.com/api/js/ejribbon#members:tabs-groups-content-groups-buttonsettings 

 

https://help.syncfusion.com/api/js/ejbutton#members 

 

Sample: http://www.syncfusion.com/downloads/support/forum/130434/ze/Angular2_adaptiveBtn-618854282 

 

Query#2: "Does your ribbon support a responsive resizing behavior?" 

 

Yes , Ribbon control supports responsive behavior and you can achieve it with the property "isResponsive". Please refer to the below codes and the attached sample. 

 

[ribbon.component.html] 

  

<ej-ribbon id="Default" width="20%" applicationTab.type="menu"applicationTab.menuItemID="ribbonmenu" isResponsive="true"> 

     <e-tabs> 

        <e-tab id="home" text="HOME" [groups]="groups1"> 

        </e-tab> 

     </e-tabs> 

</ej-ribbon> 

  

  

  

 

UG Documentation: https://help.syncfusion.com/angular-2/ribbon/resize  

 

API Documentation: https://help.syncfusion.com/api/js/ejribbon#members:isresponsive 

 

Sample: http://www.syncfusion.com/downloads/support/forum/130434/ze/Angular2_ribbon_responsive-392530766 

Regards, 

Sarath Kumar P.