Tag Archives: ribbon

Obscure issue with moving around items in SharePoint 2013 ribbon

Ever have one of those days where SharePoint just makes you say, umm, WTF??? Yeah, me too. Tag another one on the long list.

I wanted to absolute position the ribbon’s tab row right DIV contents of SharePoint 2013 to a different location on the page. In non-SharePointy code speak, I just wanted to move the links on the right side of the page that consist of Share, Follow, Edit/Save, Focus on Content and Developer Dashboard to a different place on the web page.

Links and icons in tab row right of the SharePoint 2013 ribbon

Seems easy, right? SharePoint 2013 laughed in my face.

These links and icons are child elements of a DIV that is part of a trio of elements that makes up the SharePoint ribbon. Essentially the ribbon is an unordered list sandwiched between two DIVs that each provide a peripheral area where you can stick other stuff. The links and icons are in the right DIV, aptly named through the ID RibbonContainer-TabRowRight. It also has a few classes assigned to it, one of which is ms-cui-TabRowRight.

Based on the available code in the page, my CSS started as this:

.ms-cui-TabRowRight {
     position: absolute;
}

I don’t have to go any farther than that to create an issue:

Issues created after modifications

The ribbon tabs collapse. And the whole set of links/icons that I was targeting disappeared from the page. Upon further investigation two things emerged:

  1. The inline style for display was changed to display: none in the .ms-cui-TabRowRight DIV.
  2. A different CSS class is applied to the parent UL that wraps the ribbon tabs, .ms-cui-tts-scale-2. It was previously .ms-cui-tts. The presence of this little class then kicks in the following style statement, found in corev15.css:
    .ms-cui-tts-scale-2 .ms-cui-tt-a {
         overflow: hidden;
         width: 20px;
    }

The 20 pixel width explains the tiny ribbon tab slivers you see in the screenshot above.

If you take away the absolute positioning or just do something as tame as changing it from absolute to relative, then the inline style goes back to display: block and the applied CSS class for the UL switches back to .ms-cui-tts.

OK so maybe it was the absolute positioning… when you move elements like that things can go wonky. So I switched it to a float (keep in mind this DIV is floated by SharePoint in the first place):

.ms-cui-TabRowRight {
     float: left;
}

Floating the links and icons in tab row right of the SharePoint 2013 ribbon

Well that doesn’t break anything in SharePoint. :) It also doesn’t do much for me either. So let’s add a negative left margin:

.ms-cui-TabRowRight {
     float: left;
     margin-left: -10px;
}

Annnnd we are back to breaking SharePoint.

Issues created after modifications

Note that if you leave the DIV as a right float (OOTB treatment) or just specify a negative left margin (which doesn’t change anything in the design) SharePoint remains happy. You can even set negative top or bottom margins. The inline style and CSS class gets changed when you try to move these items into what SharePoint perceives as the ribbon tabs space… or something like that? An absolute position OR the combination of a left float AND negative left margin creates the issue.

No big deal, I can fix troublesome CSS with new CSS (note I switched back to absolute positioning in order to better control placement):

/* Move Ribbon Tab Row Right (Share/Follow) to the left of Suite Bar Right */
.ms-cui-TabRowRight {
     position: absolute; /* Remove from content flow and create precise placement based on parent container */
     top: -35px; /* Shift above default placement */
     left: 10px; /* Add space to left between page edge and text */
     display: block !important; /* Override inline OOTB SharePoint style */
}

/* ms-cui-tts-scale-2 class is auto applied when .ms-cui-TabRowRight is absolute positioned -which results in small ribbon text space. Following declarations correct the issue. */
.ms-cui-tts-scale-2 .ms-cui-tt-a {
     width: auto; /* Reset small width to auto size based on length of text */
     padding: 0 9px; /* Pad out the ribbon text */
}

Some of this could have been avoided if I was dealing with a custom master page and just manually moved the links and icons out of the ribbon’s peripheral right area, but the idea was I needed to make a change with only CSS, so there you go. :)

SharePoint Ribbon CSS Tips and Tricks

This is the fifth post in a SharePoint 2010 ribbon series.  Be sure to check out posts 1 through 4 as well:

1) Boil it down to the basics… the SharePoint 2010 ribbon
2) Gathering requirements for your ribbon needs
3) The Docked Ribbon
4) Ribbon visibility using CSS

It is no secret that I have a thing for CSS.  There is nothing like adding a few lines of code and seeing things instantly change before your eyes. I may be overly romanticizing CSS but hey, I will take what I can get when it comes to changing up SharePoint.  Keeping up the spirit of ribbon modification for this series, here are some quick SharePoint ribbon CSS tips and tricks that you can do with the your sites.  If you are feeling the need for more CSS love, check out the ribbon section of my SharePoint 2010 CSS Chart.   Continue reading

Ribbon visibility using CSS

This is the fourth post in a SharePoint 2010 ribbon series.  Be sure to check out posts 1through 3 as well:
1) Boil it down to the basics… the SharePoint 2010 ribbon
2) Gathering requirements for your ribbon needs
3) The Docked Ribbon

The ribbon doesn’t have to be big and scary.  SharePoint ribbon customization can be completed with just a little CSS and tweaks to your master page. In this post we are going to focus hiding the ribbon when it is not in use. Continue reading

The Docked Ribbon

This is the third post in a SharePoint 2010 ribbon series.  Be sure to check out posts 1 and 2 as well:
1) Boil it down to the basics… the SharePoint 2010 ribbon
2) Gathering requirements for your ribbon needs 

There are two states the SharePoint ribbon can be in, docked or undocked. Let’s dive right in looking at what it means to have a docked ribbon. Continue reading

Gathering requirements for your ribbon needs

In the first post in this series, Boil it down to the basics… the SharePoint 2010 Ribbon, we looked at the different components in the ribbon area and saw what was really a part of the ribbon and what wasn’t. At the end of the post you may have ended up with a custom master page with a simplified ribbon block and SharePoint page components, such as the Site Actions menu and the social tagging buttons, moved to other locations in your site layout and design. In the second post of this series I am going to focus on ribbon placement requirements and more importantly, what do your users need. Continue reading

Boil it down to the basics… the SharePoint 2010 Ribbon

Sigh, the ribbon. Those two words manage to give most SharePoint developers and designers the chills. And not necessarily in the good way. While the ribbon provides a lot of cool interactivity and functionality for our end users, you just look at it wrong and stuff can go whacky in your SharePoint site. This is the first post in a series dedicated to working with the ribbon. Let’s start off with reviewing what the ribbon really is and what code bits are involved. Continue reading