Меню

Как исправить на PDP странице (карточке проекта) выравнивание полей

Добрый день, дорогие коллеги (читатели). Сегодня поговорим, как исправить на PDP странице (карточке проекта) выравнивание полей:

Красным и серым я выделил проблемы, о которых говорю. Как видите, выравнивание основано на длине самого длинного настраиваемого поля, отображаемого в веб-части.

Для решения данной проблемы будем использовать Content Editor и jQuery.

 

«Отладка» в Chrome или IE

Первое, что нужно сделать, это идентифицировать элемент html. Самый простой способ сделать это — использовать функцию «Inspect Element», доступную в браузерах IE и Chrome. Вы найдете ее в меню правой кнопки мыши.

Определяем, что необходимо модифицировать.

 

Теперь отредактируйте страницу веб-части PDP и добавьте в нее веб-часть «Редактор содержимого» Затем просто добавьте вышеуказанный HTML-контент в источник HTML веб-части следующим образом:

Выравнивание отступов между web-частями:

 

<style type=»text/css»>

.ms-webpartPage-root {border-spacing: 0px !important;}

.ms-webpartzone-cell {margin: 0px !important;}

</style>

 

Выравнивание по ширине:

<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js» type=»text/javascript»></script>

<script type=»text/javascript»>

$( document ).ready(function() {

$(«tr td.ms-formlabel»).width(«300px»);

})

</script>

 

Сравним полученный результат с первоначальным:

Удачи в ваших проектах.