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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Ribbon sizing of content elements and resizing

Thread ID:

Created:

Updated:

Platform:

Replies:

130434 May 12,2017 12:35 PM UTC May 15,2017 12:41 PM UTC Angular 1
loading
Tags: ejRibbon
Daniel Barisch
Asked On May 12, 2017 12:35 PM UTC

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 [Syncfusion]
Replied On May 15, 2017 12:41 PM UTC

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:  
 
 
 
 
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> 
  
  
  
 
 
 
Regards, 
Sarath Kumar P. 
  


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;