SharePoint Ribbon Modifications – Ribbon Buttons Too Small


So I was working on getting some content into the top right hand corner of the ribbon and the strangest thing happened: the ribbon buttons began shrinking themselves as if you’ve re-sized the browser. Check out the image below for an example of what happened.

At first, I thought it was due to a rogue style effecting the ribbon buttons, but with a closer examination of the source of my trouble I realized SharePoint was in fact scaling down the ribbon because of a style I set on a container to the right of the ribbon.

The CSS class that was causing my trouble was the s4-trc-container-menu. I mistakenly applied a float: right and a set width. SharePoint didn’t react well to either of those. The ribbon would shrink all the time with it floated to the right. As for the set width, the Ribbon began to display errors for me at about 400px.

Bottom line: Don’t float anything next to the ribbon, it can cause it to behave erratically.

Advertisements
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: