How to Update Ribbon Layout in Word Web Add-in Using Office.js and Manifest

Question

I am developing a Word web add-in using Office.js, and I need to update the layout of the ribbon. I have created a basic ribbon following this documentation

Here is a snapshot of my current ribbon: Current Ribbon Snapshot

Below is the manifest.xml file I used: code

I am looking for ways to update the ribbon layout to look like this: Expected Ribbon Snapshot

What are the steps or code changes required to achieve the desired ribbon layout? Any help or guidance would be appreciated!

Answer 1

You can't control the size of the buttons and icons on the ribbon in the way that you want. Office decides this according to its own design principles. The size of the buttons and icons varies depending on the size of the Office window and the resolution of the device screen.