Как исправить на 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>

 

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

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

Комментарии

комментарий