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

Text wrapping in ribbon buttons

Hello!

I have an issue with Ribbon Javascript Control. I can't find any proper information on how to achieve the following effect.
I need to make text wrapping or two lines of text for the ribbon buttons, when the text has not enough space. The way to add line or &codes doesn't help to achieve this effect. 

Thanks in advance,
Regards,
Igor

1 Reply

KN Kavitha Narayanan Syncfusion Team April 11, 2016 07:38 AM UTC

Hi Igor,

Thanks for contacting Syncfusion support.

Query: I need to make text wrapping or two lines of text for the ribbon buttons, when the text has not enough space.

By default, text wrapping applies to the button text when we give more than one line of text and it fixed in the 14.1.0.41 version. For proper alignment of text and icon, we can customize button width and height as per your requirement.

Please refer to the code.


text: "Illustrations", alignType: ej.Ribbon.AlignType.Rows, content: [{

groups: [{

id: "picture",

text: " Online Pictures", //text wrapping to the ribbon button

toolTip: "Pictures",

buttonSettings: {

height:85,//set button for proper align of text and icon

contentType: ej.ContentType.TextAndImage,

imagePosition: ej.ImagePosition.ImageTop,

prefixIcon: "e-ribbon e-picture"

}
},
}]


We prepared a sample in 14.1.0.41 version.

Sample: http://www.syncfusion.com/downloads/support/forum/123681/ze/sample-749932459.zip

Video: http://www.syncfusion.com/downloads/support/forum/123681/ze/video-518325733.zip

Regards,
Kavitha N.

Loader.
Live Chat Icon For mobile
Up arrow icon