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.
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.
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.
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.
Voila! The issue is resolved! Once the parent container is relatively positioned, the default absolute positioning works.