none
Remove empty space in Picture Library Slideshow web part RRS feed

  • Question

  • I'm using Picture Library Slideshow web part in one of my pages. The web part itself is working fine, but I'm a bit annoyed by the white space the web part is consuming.
    The web part puts lots of empty space between the web part header and the picture and also to the bottom of the web part.

    The Slideshow web part generates the CSS on the fly, so I cannot really get a control of it cause it doesn't have any static CSS classes(that I know of, at least).
    How could I get rid of these white spaces?

    Friday, February 25, 2011 9:04 AM

Answers

  • Hi Pekch,

     

    Thanks for your post.

    You can achieve this using JQuery.

    1.       Download JQuery to your SharePoint Server, and then add a Content Editor Web Part to the page;

    2.       View the source code using IE developer(Press F12), the code likes below:

    <td style="width: 195px; height: 213px;">

                    <div style="..." id="MSOPictureLibrarySlideshowWebPart_ctl00_m_g_ffa17524_ffa7_44e7_974c_1756a39257b9_cell">

                    ...

                    </div>

    </td>

    3.       So now, you can find the control whose id is started with “MSOPictureLibrarySlideshowWebPart” using the JQuery Code below:

    jQuery('div[@id^=”MSOPictureLibrarySlideshowWebPart”]')

    4.       Remove the style of the “div” and his parent “td”. Because there is a “Width” attribute in both levels.

     

    More information:

    http://weblogs.asp.net/jan/archive/2010/10/05/getting-started-with-jquery-templates-and-sharepoint-2010.aspx

    http://www.bennadel.com/blog/1003-Cool-jQuery-Predicate-Selectors.htm

    • Marked as answer by KeFang Chen Friday, March 4, 2011 6:20 AM
    Wednesday, March 2, 2011 6:13 AM

All replies

  • Hi Pekch,

     

    Thanks for your post.

    You can achieve this using JQuery.

    1.       Download JQuery to your SharePoint Server, and then add a Content Editor Web Part to the page;

    2.       View the source code using IE developer(Press F12), the code likes below:

    <td style="width: 195px; height: 213px;">

                    <div style="..." id="MSOPictureLibrarySlideshowWebPart_ctl00_m_g_ffa17524_ffa7_44e7_974c_1756a39257b9_cell">

                    ...

                    </div>

    </td>

    3.       So now, you can find the control whose id is started with “MSOPictureLibrarySlideshowWebPart” using the JQuery Code below:

    jQuery('div[@id^=”MSOPictureLibrarySlideshowWebPart”]')

    4.       Remove the style of the “div” and his parent “td”. Because there is a “Width” attribute in both levels.

     

    More information:

    http://weblogs.asp.net/jan/archive/2010/10/05/getting-started-with-jquery-templates-and-sharepoint-2010.aspx

    http://www.bennadel.com/blog/1003-Cool-jQuery-Predicate-Selectors.htm

    • Marked as answer by KeFang Chen Friday, March 4, 2011 6:20 AM
    Wednesday, March 2, 2011 6:13 AM
  • Hello Wayne,

    When i go to IE Developer mode and find that tag and delete the width attribute. It works until i refresh page, how do i apply that settings to the page and saveit.

     

    Thank You

    Naveen


    Napster123
    Tuesday, December 20, 2011 6:09 PM
  • Thanks Wayne,

    I implemented your suggestion using the following. Any comments, feedback, alternate script examples welcome.

    <script>

      $(document).ready(function()

        {
          var divList = $("div[id^='MSOPictureLibrarySlideshowWebPart']");   
          divList.removeAttr("style");
          divList.parent('td').removeAttr("style");
        }

      );

    </script>

    Monday, February 6, 2012 6:48 PM
  • Hi Brorm,

    How did you implement this script? Wa sit by inserting in into a COntent Editor webpart on the same page as the slide show?

    Thanks!

    Sunday, April 8, 2012 3:09 PM
  • OK, I found an easy and not so sophisticated way to solve this issue.  I had a lot of white space above and below my images. 

    Solution:

    Under Appearance, manually set the height of the webpart.  I used 300 and it looked very balanced.  Play with it to see what works for your images.

    Who needs code?

    • Proposed as answer by Michuk Tuesday, January 30, 2018 11:27 AM
    Thursday, June 7, 2012 10:47 PM
  • I was able to resolve the issue via css:

    #<Web Part Div ID> {
         display: inline-block !important;

    }

    ...where <Web Part Div ID> is the id of the div that begins with 'MSOPictureLibrarySlideshowWebPart'.

    • Proposed as answer by Jim Elvis Wednesday, June 25, 2014 4:52 PM
    Wednesday, June 25, 2014 4:51 PM
  • 1.  Edit the page and add a Script Editor web part to the page.

    2.  Click 'EDIT SNIPPET'.

    3.  Copy/Past the following code into the popup.

    <style>
    div[id^="MSOPictureLibrarySlideshowWebPart"][id$="cell"] {
      display: block !important;
    }
    </style>

    This solution doesn't require any JavaScript/JQuery, and will target any Picture Library Slideshow web part on the page and you don't need to go into developer options to find any specific web part IDs.

    Friday, June 21, 2019 5:09 PM