Hannah Scott's Blog

Tuesday, February 11, 2014

Incorrect Positioning of the ECB Menu in a SharePoint 2010 Custom Master Page

My clever colleague Stu found this blog post which solved our problem with the ECB menu and arrow down link (on our custom master page), which was positioned incorrectly and so making it impossible for users to open...

http://narunkumar.wordpress.com/2012/02/21/flying-objects-css-at-edit-an-item-at-sharepoint-2010-become-out-of-place/

By default, SharePoint use the style class .s4-ctx to control the menu position, It uses inline “absolute” positioning to show the correct Icon “position: absolute” so add the following code in your custom css:

/* fix scrolling on list pages */

#s4-bodyContainer
{
position:relative;
}

Thursday, December 12, 2013

SharePoint 2010 – Table of Contents Web Part – Sites Missing

Just noticed that some subsites were not listed in my Table of Contents web part... here's why (thanks to Scott Ellis): http://digitalmacgyver.wordpress.com/2011/09/23/sharepoint-2010-table-of-contents-webpartsites-missing/

20 is the default number of links visible on the Global and Quick Launch navigation settings.

Here's how to change this:

Go to the site where you have the Table of Contents web part displayed.
Navigate to Site Settings > Navigation
Under 'Current Navigation' change the value of 'Maximum number of dynamic items to show within this level of navigation' from 20 to the number you need to display.

The Table of Contents should now show all the sites.

Tuesday, August 14, 2012

Hide the SharePoint 2010 Web Part Checkbox

There are two options to remove this check box from view...

Add the following CSS:

.ms-WPHeaderTdSelection {
display: none;
}

OR
Display the web part without a title and add a content editor web part right before the list web part with the desired title text.

Thanks to Alpesh Nakar for the answers.

Wednesday, September 14, 2011

IE Conditional Stylesheets and Hacks

Thanks Chris Coyer for this useful list of CSS examples to target different versions of IE referencing Conditional Stylesheets and Hacks:

The Code

This would go in your <head> with all the other regular CSS <link>ed CSS files. The opening and closing tags should be familiar, that's just regular ol' HTML comments. Then between the brackets, "IF" and "IE" should be fairly obvious. The syntax to note is "!" stand for "not", so !IE means "not IE". gt means "greater than", gte means "greater than or equal", lt means "less than", lte means "less than or equal."

Target ALL VERSIONS of IE



Target everything EXCEPT IE


<link rel="stylesheet" type="text/css" href="not-ie.css" />


Target IE 7 ONLY



Target IE 6 ONLY



Target IE 5 ONLY



Target IE 5.5 ONLY



Target IE 6 and LOWER





Target IE 7 and LOWER





Target IE 8 and LOWER





Target IE 6 and HIGHER





Target IE 7 and HIGHER





Target IE 8 and HIGHER





Universal IE 6 CSS

Dealing with IE 6 and below is always an extra-special challenge. These days people are dropping support for it right and left, including major businesses, major web apps, and even governments. There is a better solution than just letting the site go to hell, and that is to server IE 6 and below a special stripped-down stylesheet, and then serve IE 7 and above (and all other browsers) the regular CSS. This is been coined the universal IE 6 CSS.


<link rel="stylesheet" type="text/css" media="screen, projection" href="REGULAR-STYLESHEET.css" />






Hacks

If you must...
IE-6 ONLY

* html #div {
height: 300px;
}

IE-7 ONLY

*+html #div {
height: 300px;
}

IE-8 ONLY

#div {
height: 300px\0/;
}

IE-7 & IE-8

#div {
height: 300px\9;
}

NON IE-7 ONLY:

#div {
_height: 300px;
}

Hide from IE 6 and LOWER:

#div {
height/**/: 300px;
}

html > body #div {
height: 300px;
}

List 'Boxed' Style with One Column Layout

Thanks Christophe & Larry for this useful bit of styling to modify the SharePoint 2010 'Boxed' list style to display items in a single column layout (rather than the default 2 cols):

<script type="text/javascript">
var boxedview = document.getElementById("WebPartWPQ1").innerHTML;
boxedview = boxedview.replace(/ <\/td>/gi,"<\/tr> <\/td><\/tr>");
boxedview = boxedview.replace(/ <\/td>/gi,"<\/tr> <\/td><\/tr>");
boxedview = boxedview.replace(/ <\/td>/gi,"<\/tr> <\/td><\/tr>");

document.getElementById("WebPartWPQ1").innerHTML = boxedview;
</script>

Update the webpart ID (WebPartWPQ1) to match that of your list web part.