Вопрос

На нашей среде CarePoint 2010 Enterprise, на каждой странице есть какое-то странное поведение с зонами веб-части. В режиме редактирования он по существу выглядит так:

Введите описание изображения здесь

В режиме без редактирования он выглядит даже хуже, так как столбцы библиотеки текста и документов скрываются под соседними зонами веб-части. Что в мире происходит сюда?

Мы попробовали предложения по Этот блог для добавления CSS-краев и прокладки в класс «MS-SPZONE», но это не имеет никакого эффекта, если веб-часть имеет несколько столбцов в представлении списка (все еще перекрытие).

Редактировать: обратите внимание, что это шаблон страницы на основе пользовательской макета страницы, и эта макет страницы также использует некоторые пользовательские CSS, все, что сделано на 3-й стороне, что, вероятно, именно поэтому эта проблема происходит в первую очередь ( Я предполагаю, что макеты страницы 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;
}
.

Это было полезно?

Решение

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%;
}

Другие советы

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.

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.

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 :).

Лицензировано под: CC-BY-SA с атрибуция
Не связан с sharepoint.stackexchange
scroll top