Thursday, 14 June 2012

Alignment issue in Picture library slide show webpart (sharepoint 2010)



Solution 1

I got the solution guys…
The picture library webpart uses the css classes in corev4.css in sharepoint 2010. The web part uses “.ms-WPBody” css class for styling. I over wrote this class in my custom style sheet as “.ms-WPBody.noindex” and gave my custom settings in the properties.

And thats it, my webpart aligned to the center of the page with my custom settings.
  • Marked As Answer byP6520Tuesday, August 10, 2010 11:24 PM
You can find “.ms-WPBody” class in corev4.css. When I look into the webpart through the developer tools in internet explorer, O came to know that, the webpart style is based on “.ms-WPBody.noindex” css class. So, I wrote my custom css using this class name as follows:


.ms-WPBody.noindex{
font-size:8pt;
font-family:"Segoe UI" !important;
}

.ms-WPBody.noindex table{
font-size:1em;
width:100% !important;
height:100% !important;

}

.ms-WPBody.noindex td{
font-size:10pt;
font-family:"Segoe UI" !important;
width:100% !important;
height:200px !important;
margin-left:auto !important;margin-right:auto !important;
/* text-align:center !important;*/
}

.ms-WPBody.noindex td div{
height:auto !important;
width:100% !important;
text-align:center !important;
display:block !important;;
}

.ms-WPBody.noindex td div span{
width:100% !important;
}

.ms-WPBody.noindex td img{
height:100% !important;
width:100% !important;
}

Also, I am attaching the document with the images before and after applying css classes.
http://www.sendspace.com/file/r4meyx

I hope this clears the confusion. If I am wrong, please correct me.

Solution 2

<script>

$(document).ready(function() {
var divList = $("div[id^='MSOPictureLibrarySlideshowWebPart']");
var currImage= $("img[id$='curr']");
divList.height('100%');
divList.width('100%');
currImage.height('100%');
currImage.width('100%');
});</script>

1 comment: