Branding Issue Drop-down selector for SharePoint 2010

SharePoint Branding Tip: Dropdown Selector Arrow Not Inline with .ms-listviewtable Row

This is one of those annoying SharePoint Branding “gotchas” that I often back myself into when creating custom branding for a SharePoint site. I generally waste time trying to remember what causes this issue and how to fix it so I’m posting it here so that I won’t waste a moment trying to figure out what the issue is. The thing is that I usually want to Google or Bing the query, “wonky arrow selector SharePoint.” I never find anything to help. Next time, I’ll at least find my own post.

Here’s a quick fix to a wonky arrow selector or a wonky web part selector.

Issue:

Drop-down selector found in .ms-listviewtable appears far away from the location my mouse hovers.

Related Issue: In edit mode, web parts become nearly impossible to move to new web part zone. I’ll try to update this text with a better description later. Just know that it’s wonky and this will also fix that.

In the screenshot below, my mouse is hovering over the row titled National Honor Society Row at the bottom of the screenshot. The dropdown selector appears 8 rows above the row in focus.

Issue with SharePoint 2010 Dropdown Selector List table

This is happening because the dropdown selector is absolutely positioned. It seems I have modified the relative positioning of the parent container one of two ways: by adding a buffer container or by removing position:relative from the parent. Each time I’ve run into this issue, I’m very focused on solving an issue in cross-browser compatible way. I solve some problem with my custom branding and then find out that I’ve broken something on system pages or in edit mode.

Solution:

Add position:relative to the parent container. In this case, I applied it to the CSS selector .s4-ca. Note: the parent div isn’t always This applies to both SharePoint 2007 and SharePoint 2010.

. Relative Positioning Example SharePoint 2010

Voila! The issue is resolved! Once the parent container is relatively positioned, the default absolute positioning works.

Relative Positioning Fix SharePoint 2010

Related Resources

Relative and Absolute Positioning:

W3C Schools CSS Positioning

Urban Dictionary: “Wonky” Defined

Share and Enjoy:
  • Print
  • Digg
  • StumbleUpon
  • del.icio.us
  • Facebook
  • Yahoo! Buzz
  • Twitter
  • Google Bookmarks

About Marcy Kellar

Marcy Kellar is a SharePoint Solution Architect at Perficient and well known for her expertise in SharePoint branding. Her specialties include user experience design, branding and UI customization, information architecture, web content management, and usability testing. Marcy’s experience spans over 20 years and includes work in design, life sciences, psychology and R&D. Marcy is co-author of Beginning SharePoint Designer 2010 (Wrox, October 2010) and is a former professor at the Art Institute teaching user centered design courses, “Intro to User Centered Design” and “Usability Testing.” She is a popular speaker, author and award-winning artist and photographer.

Branding, css, Dropdown, hover, positioning, Selector, SharePoint, tips

One Response to SharePoint Branding Tip: Dropdown Selector Arrow Not Inline with .ms-listviewtable Row

  1. Emmanuel Baron February 7, 2012 at 9:50 pm #

    Hi Marcy, and tks for your very useful blog !

    Just one point: if your using IE7 and depending where is your welcome menu control (for me it was just above the top navigation bar – not in the ribbon), this can be a problem.

    Indeed the drop down menu of this control may be visible below the content (breadcrumb, title etc) if your adding a position:relative property to CSS selector .s4-ca

Leave a Reply