웹 부품이 바람직하지 않게 겹치는 것입니다

Question

SharePoint 2010 엔터프라이즈 환경에서는 모든 페이지가 웹 파트 영역에서 이상한 동작을 갖고 있습니다. 편집 모드에서는 본질적으로 다음과 같습니다.

비 편집 모드에서는 텍스트 및 문서 라이브러리 열이 인접한 웹 파트 영역 아래에 숨겨져 있기 때문에 더욱 악화됩니다. 세계에서 무엇을 여기에 가고 있습니까?

우리는 이 블로그 CSS 여백을 추가하고 클래스 "MS-SPZONE"에 패딩을 추가하지만 웹 파트에 목록보기에 여러 열이있는 경우에는 아무런 효과가 없습니다.

편집 : 사용자 정의 페이지 레이아웃을 기반으로 한 페이지 템플릿이며,이 페이지 레이아웃은이 문제가 처음 부터이 문제가 발생하는 이유가있는 이유는 3 위를 차지하는 모든 사용자 정의 CSS를 사용합니다. SP 기본 페이지 레이아웃이 우리와 같은 영역이 겹치지 않도록한다고 가정합니다!)

편집 : 페이지 레이아웃 (편집 모드가 아닌) 에 대한 관련 사용자 정의 CSS일지도 모른다고 생각합니다.

.col-50
{
    float: left;
    width: 49.9%;
}
.col-fluid-1
{

    float: none;
    width: 100%;    
    margin-right:auto;
}
.col-fluid-2
{
    zoom: 1;
    margin-right: 215px;
}
.right-wp-zone-col
{

    float: right;
    width: 200px;
    border-left: 0 solid transparent;
}
.edit-mode-border
{
    border:transparent 1px solid;
    padding:8px;
    margin:1px;
}

.

Answer 1

You need to make divs to be rendered as tables in edit mode:

<div class="container convertTable">
<div class="row convertTable">
<div class="col-md-6 convertTable">

</div>
<div class="col-md-6 convertTable">

</div>
</div>
<div class="row convertTable">
<div class="col-md-12 convertTable">

</div>
</div>
</div>

here is jquery code:

<!--MS:<Publishing:EditModePanel runat="server">-->
            <script type="text/javascript">//<![CDATA[
jQuery( document ).ready(function() {
var pageEditTableClass="pageEdit-table", pageEditFullWidthClass="pageEdit-fullWidth";

jQuery("table div.container.convertTable").removeClass("container").addClass(pageEditTableClass).addClass(pageEditFullWidthClass);
jQuery("table div.row.convertTable").removeClass("row").addClass(pageEditTableClass).addClass(pageEditFullWidthClass);
jQuery("table div.col-md-12.convertTable").removeClass("col-md-12");
jQuery("table div.col-md-3.convertTable").removeClass("col-md-3").addClass("tableCol-3");
jQuery("table div.col-md-4.convertTable").removeClass("col-md-4").addClass("tableCol-4");
jQuery("table div.col-md-5.convertTable").removeClass("col-md-5").addClass("tableCol-5");
jQuery("table div.col-md-6.convertTable").removeClass("col-md-6").addClass("tableCol-6");
jQuery("table div.col-md-7.convertTable").removeClass("col-md-7").addClass("tableCol-7");

jQuery("table div.col-md-9.convertTable").removeClass("col-md-9").addClass("tableCol-9");
});
//]]>
</script>
<!--ME:</Publishing:EditModePanel>-->

put the script in EditeModePanel to make script work only in Edit Mode

css:

.cell-margin {
    margin: 5px 0px 5px 0px;
}

.tableCol-3 {
    display: table-cell;
    min-width: 24.9%;
}
.tableCol-4 {
    display: table-cell;
    min-width: 33.3%;
}
.tableCol-5 {
    display: table-cell;
    min-width: 41.6%;
}
.tableCol-6 {
    display: table-cell;
    min-width: 49.9%;
}
.tableCol-7 {
    display: table-cell;
    min-width: 58.3%;
}
.tableCol-9 {
    display: table-cell;
    min-width: 74.9%;
}

Answer 2

Open the site in IE or Chrome and use the developer tools (press F12 in either one). You can use the "select element by click" (ie) or "select an element in the page" (Chrome) to visually select the items and see dynamically what CSS is being applied. It will also show what file(s) those CSS rules come from. As was stated previously, I bet there is some custom CSS getting loaded somewhere.

With the developer tools, you can even tinker with the CSS live to identify exactly which changes need to be applied.

Answer 3

DIVS and TABLES do not tend to play nicely together so if you have laid out your zones using DIVs SharePoint will render the web parts as TABLES.

I know the general preference is to avoid tables where possible but try putting your zones in a TABLE and I am pretty sure it will resolve the problem.

Answer 4

from my understanding there are two places that could turn out this kind of result! one is the css as others have noted and the other is the page layouts! the page layouts is what holds the body content! it could be changed or the css could have been changed!

The site in question, has it been modified or not? im talking about page layouts or css (custom)? or is this result from ootb version?

if you dont know you need to change the reference for the page layouts in the masterpage, for css you could change it within the site collection where you change the masterpage!

when i hit that issue along time ago it was partly due to the layouts page rather than the css as i put in some direct css on some html tags lol, it was due to the css tag position that efected other layout positions for all webparts!

you could also get that effect when ammending the layouts within sharepoint designer desing view aswell! changing the layouts reference to the default layouts.aspx would be the first thing that i did to see direct changes :).