none
Webpart Size in Firefox/Chrome RRS feed

  • Question

  • So I am currently having an issue with the page layout in Sharepoint 2013. In 2010 we are able to change the height of a Web Part and see the change work properly across the different web browsers. With 2013, I have changed the height of a Web Part to a fixed height and when I get to Chrome and Firefox, it shows whitespace where the rest of the content would normally show. The scroll bar and box height are correct but it leaves a huge whitespace between that webpart and the next. Is this normal behavior? I should also add that when the pages are being edited in Chrome and Firefox that they do display correctly so the only time it is displayed incorrectly is when the page is not being edited.

    No Issues in IE11 and Microsoft Edge so I am wondering why this would only happen in other browsers.

    Monday, June 20, 2016 5:51 PM

All replies

  • Hi,

    Please debug the page in Firefox and Chrome to see if the changes have been set properly for the web part.

    And check out what are affecting the height of the web part (maybe some other CSS or add-ons).

    Best Regards,

    Victoria  


    TechNet Community Support
    Please remember to mark the replies as answers if they help, and unmark the answers if they provide no help. If you have feedback for TechNet Support, contact tnmff@microsoft.com.

    Tuesday, June 21, 2016 8:00 AM
    Moderator
  • I have debugged the site in Chrome and IE and the only difference is that in Chrome their is extra code after <td id="scriptWPQ5"></td>. This is the code as it is presented in IE:

    <div class="ms-rtestate-read ms-rte-wpbox"><div class="ms-rtestate-notify  ms-rtestate-read f266d480-041f-4962-8081-98efbea69a63" id="div_f266d480-041f-4962-8081-98efbea69a63" unselectable="on"><div id="MSOZoneCell_WebPartWPQ5" WebPartWPQ5_RelatedListId="{e3f2bda3-81ea-4d6b-ab4f-88639a8cef00}" WebPartWPQ5_WebPartStorageKey="3a9e87b7-eb4f-4087-85dc-92c7c6dd31e2" class="s4-wpcell ms-webpartzone-cell ms-webpart-cell-vertical ms-fullWidth " onkeyup="WpKeyUp(event)" onmouseup="WpClick(event)">
                <div class="ms-webpart-chrome ms-webpart-chrome-vertical ms-webpart-chrome-fullWidth ">
        <div WebPartID="3a9e87b7-eb4f-4087-85dc-92c7c6dd31e2" WebPartID2="f266d480-041f-4962-8081-98efbea69a63" HasPers="false" id="WebPartWPQ5" width="100%" class="" allowRemove="false" allowDelete="false" allowExport="false" style="height:350px;overflow:auto;" ><iframe id="ctl00_ctl26_g_f266d480_041f_4962_8081_98efbea69a63_ctl00" style="offsetLeft:-550px;offsetTop:-550px;display:block;" width="0px" height="0px" frameBorder="0" tabIndex="-1"></iframe><table width="100%" cellspacing="0" cellpadding="0" border="0" xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:pcm="urn:PageContentManager" xmlns:ddwrt2="urn:frontpage:internal"><tr><td id="scriptWPQ5"></td></tr></table><div id="scriptPagingWPQ5" xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:pcm="urn:PageContentManager" xmlns:ddwrt2="urn:frontpage:internal"></div><div class="ms-clear"></div></div>
    </div>

    When you go and look at it in Chrome, the code is identical until <td id="scriptWPQ5"><div></div> and then there is extra:

    <td id="scriptWPQ5"><div></div><iframe src="javascript:false;" id="FilterIframe5" name="FilterIframe5" style="display:none" height="0" width="0" filterlink="?"></iframe><table onmousedown="return OnTableMouseDown(event);" summary="President's Perspective" xmlns:o="urn:schemas-microsoft-com:office:office" o:webquerysourcehref="&amp;XMLDATA=1&amp;RowLimit=0&amp;View=%7B3A9E87B7%2DEB4F%2D4087%2D85DC%2D92C7C6DD31E2%7D" border="0" cellspacing="0" dir="none" onmouseover="EnsureSelectionHandler(event,this,5)" cellpadding="1" id="{E3F2BDA3-81EA-4D6B-AB4F-88639A8CEF00}-{3A9E87B7-EB4F-4087-85DC-92C7C6DD31E2}" class="ms-listviewtable" handledeleteinit="true"><thead id="js-listviewthead-WPQ5"><tr valign="top" class="ms-viewheadertr ms-vhltr"><th class="ms-headerCellStyleIcon ms-vh-icon ms-vh-selectAllIcon" scope="col"><span class="ms-selectall-span" tabindex="0" onfocus="EnsureSelectionHandlerOnFocus(event,this,5);" id="cbxSelectAllItems5" title="Select or deselect all items"><span tabindex="-1" class="ms-selectall-iconouter"><img class="ms-selectall-icon" alt="" src="/_catalogs/theme/Themed/DB550143/spcommon-B35BB0A9.themedpng?ctag=8"></span></span></th><th scope="col" onmouseover="OnChildColumn(this)" style="max-width: 500px;" class="ms-vh2-nofilter" onmousedown="ListHeaderMenu_OnMouseDown(this);"><div sortable="FALSE" sortdisable="" filterdisable="" filterable="FALSE" filterdisablemessage="" name="Project_x0020_Number" ctxnum="5" displayname="Project Number" fieldtype="Note" resulttype="" sortfields="View={3a9e87b7-eb4f-4087-85dc-92c7c6dd31e2}&amp;SortField=Project_x0020_Number&amp;SortDir=Asc" class="ms-vh-div"><span title="This column type can't be sorted or filtered.">Project Number</span></div></th><th scope="col" onmouseover="OnChildColumn(this)" style="max-width: 500px;" class="ms-vh2-nofilter" onmousedown="ListHeaderMenu_OnMouseDown(this);"><div sortable="FALSE" sortdisable="" filterdisable="" filterable="FALSE" filterdisablemessage="" name="Name" ctxnum="5" displayname="Name" fieldtype="Note" resulttype="" sortfields="View={3a9e87b7-eb4f-4087-85dc-92c7c6dd31e2}&amp;SortField=Name&amp;SortDir=Asc" class="ms-vh-div"><span title="This column type can't be sorted or filtered.">Name</span></div></th><th scope="col" onmouseover="OnChildColumn(this)" style="max-width: 500px;" class="ms-vh2-nofilter" onmousedown="ListHeaderMenu_OnMouseDown(this);"><div sortable="FALSE" sortdisable="" filterdisable="" filterable="FALSE" filterdisablemessage="" name="Notes" ctxnum="5" displayname="Notes" fieldtype="Note" resulttype="" sortfields="View={3a9e87b7-eb4f-4087-85dc-92c7c6dd31e2}&amp;SortField=Notes&amp;SortDir=Asc" class="ms-vh-div"><span title="This column type can't be sorted or filtered.">Notes</span></div></th><th scope="col" onmouseover="OnChildColumn(this)" style="max-width: 500px;" class="ms-vh2" onmousedown="ListHeaderMenu_OnMouseDown(this);"><div sortable="" sortdisable="" filterdisable="" filterable="" filterdisablemessage="" name="Perspective" ctxnum="5" displayname="Perspective" fieldtype="Calculated" resulttype="Number" sortfields="View={3a9e87b7-eb4f-4087-85dc-92c7c6dd31e2}&amp;SortField=Perspective&amp;SortDir=Asc" class="ms-vh-div"><div align="right" class="ms-numHeader"><a class="ms-headerSortTitleLink" id="diidSort5Perspective" onfocus="OnFocusFilter(this)" onclick="javascript: var pointerType = this.getAttribute('pointerType'); if (pointerType != null &amp;&amp; typeof MSPointerEvent != 'undefined' &amp;&amp; Number(pointerType) != MSPointerEvent.MSPOINTER_TYPE_MOUSE) { ListHeaderTouchHandler(event); return false; } return OnClickFilter(this, event);" href="javascript:" sortingfields="View={3a9e87b7-eb4f-4087-85dc-92c7c6dd31e2}&amp;SortField=Perspective&amp;SortDir=Asc Title=" click="" to="" sort="" column"="">Perspective</a><span class="ms-sortarrowdown-iconouter" id="diidSortArrowSpan5Perspective" style="display: none;"><img class="ms-sortarrowdown-icon" src="/_catalogs/theme/Themed/DB550143/spcommon-B35BB0A9.themedpng?ctag=8" alt=""></span><span class="ms-filter-iconouter" id="diidFilterSpan5Perspective" style="display: none;"><img class="ms-filter-icon" src="/_catalogs/theme/Themed/DB550143/spcommon-B35BB0A9.themedpng?ctag=8" alt=""></span></div></div><div class="ms-positionRelative"><div class="s4-ctx" style="top: -22px; right: -17px; height: 29px; line-height: 27px; margin: 0px;"><span> </span><a onfocus="OnChildColumn(this.parentNode.parentNode.parentNode); return false;" class="ms-headerSortArrowLink" onclick="PopMenuFromChevron(event); return false;" href="javascript:;" title="Open Menu"><img style="visibility: hidden;" src="/_catalogs/theme/Themed/DB550143/ecbarw-B1CE25C9.themedpng?ctag=8" alt="Open Menu" +="" stshtmlencode(strings.sts.l_openmenu)="" ""="" ms-jsgrid-click-passthrough="true"></a><span> </span></div></div></th><th class="ms-vh-icon" scope="col" title=""><span class="ms-addcolumn-span"> </span></th></tr></thead><script id="scriptBodyWPQ5"></script><tbody>...</tbody>

    <div id="scriptPagingWPQ5" xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:pcm="urn:PageContentManager" xmlns:ddwrt2="urn:frontpage:internal"></div><div class="ms-clear"></div></div>
    </div>

    There is a number of lines of code between the last <tbody>...</tbody> because it lists out all of the data in the rows and columns of the list itself. I had to remove those lines because it contains proprietary data that I can not publicly release. The code does meet back up at the <div id="scriptPagingWPQ5". I think that because Chrome and Firefox have the <tbody> lines with the <tr class="...> in there that the webpage is still trying to show them and it is whitespace because of the fixed height on the web part properties.
    • Edited by SpiffyIT88 Tuesday, June 21, 2016 3:40 PM
    Tuesday, June 21, 2016 3:38 PM
  • Hi,

    Could you please provide detailed steps for reproducing the issue?

    Best Regards,

    Victoria


    TechNet Community Support
    Please remember to mark the replies as answers if they help, and unmark the answers if they provide no help. If you have feedback for TechNet Support, contact tnmff@microsoft.com.

    Wednesday, June 22, 2016 6:00 AM
    Moderator
  • In SharePoint Foundation, I would create a custom list. I would them add several multiple lines of text columns and then add information to them. I would add 6 or 7 items to this list and then I would go to the team page that I want to add the app part to the page that I wanted and would change the web part properties of the app part to a fixed height. Then I would save the page. It has no issues presenting correctly in IE11 and Microsoft Edge. But as soon as I go to view the page in Chrome or Firefox, it pushes the next app part or web part down and leaves a whitespace where the rest of the list content would be but has the correct window size and scroll bar so it catches that something has changed.

    I did remove an app part and added the part back in and changed the size and it did accept the changes in Chrome and Firefox this time but when I tried to do it for a second custom list, the change did not take.

    Thanks

    Wednesday, June 22, 2016 3:50 PM
  • It happens as soon as I change the chrome type from default to anything else that does not have title involved in the web part properties. I was able to reproduce this several times.
    • Edited by SpiffyIT88 Wednesday, June 22, 2016 5:06 PM
    Wednesday, June 22, 2016 4:57 PM
  • Hi Spiffy,

    I tested the scenario in my environment, however the issue did not occur.

    My Google Chrome has no add-ons enabled and it is updated up to date.

    Please update your browser with the latest updates and disable the add-ons and then check how it works.

    And it would be better if you can provide a screenshot here.

    Best Regards,

    Victoria


    TechNet Community Support
    Please remember to mark the replies as answers if they help, and unmark the answers if they provide no help. If you have feedback for TechNet Support, contact tnmff@microsoft.com.

    Thursday, June 23, 2016 5:59 AM
    Moderator
  • Victoria -

    I apologize for the delay, I needed to get my account verified to post the screenshot. I have made sure that my Google Chrome is up to date and that all add-ons were turned off. I was still getting the issue when I would change the Chrome type to none. I can set it to title only and not get the issue and I can set it to title and border only and not have the issue. As soon as it is set to border only or none that the issue will occur. I have included the screenshot. The whitespace under the webpart is where the rest of the content would be if I did not set a height restriction on the webpart.


    Christopher Spivey CompTia Network + Certified

    Monday, June 27, 2016 1:32 PM
  • Hi Christopher,

    I re-tested again, and I got the same issue as you got.

    For this issue, I recommend to use JavaScript to remove the extra elements dynamically.

    Best Regards,

    Victoria


    TechNet Community Support
    Please remember to mark the replies as answers if they help, and unmark the answers if they provide no help. If you have feedback for TechNet Support, contact tnmff@microsoft.com.

    Thursday, June 30, 2016 2:21 AM
    Moderator
  • This to me appears to be a bug though as it is not an issue with SharePoint 2010 foundation. Can you elaborate on your answer a little bit? I am not an expert web designer, I only know enough to get in trouble and find an occasional bug. :)

    Thanks


    Christopher Spivey CompTia Network + Certified

    Tuesday, July 5, 2016 12:48 PM