Thursday, June 14, 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>

No comments:

Post a Comment