Добрий день,

 

Надав приклад із нашого ком'юніті: 

https://community.creatio.com/questions/detail-styles-css

Orkhan, Дякую, а чи можна це зробити через diff , в елементі сторінки який я додав через майстер розділу? Як ось тут наприклад:

Ошибка : no such element: Unable to locate element: {"method":"xpath","selector":"//*[@id='sidebar-item-wrapper-3']"}

Pavel Khamenia, на скриншоте указан элемент @id=sidebar-item-wrapper-2', но в запросе @id=sidebar-item-wrapper-3'

также рекомендую искать элемент по data-item-marker, это более надежный вариант поиска элементов в системе Creatio

Добрый день!

В системе не предусмотрена возможность удаления зависимостей в схемах наследниках. На данный момент у вас есть два варианта решения проблемы:

1) Убрать зависимость в схеме, где она была объявлена

2) Создать пустой модуль ConnectedDetailCSS

Добрый день.

Странно что у вас не получилось добавить свой CSS. Возможно где-то есть более приоритетный стиль от которого и берётся класс .label-wrap.

Для пробы добавил новое текстовое поле на страницу активности, прикрутил к нему css и всё получилось.

Модуль с css:

.usr-base-edit-input {
    width: 30em;
}

Замещающая модель страницы активности:

define("ActivityPageV2", ["css!UsrNewCss"], function() {
    return {
        entitySchemaName: "Activity",
        diff: /**SCHEMA_DIFF*/[
            {
                "operation": "insert",
                "parentName": "Header",
                "propertyName": "items",
                "name": "UsrMeetingPlace",
                "values": {
                  	wrapClass:["usr-base-edit-input"],
                    "caption": "MeetingPlace",
                    "layout": {
                        "column": 0,
                        "row": 5,
                        "colSpan": 12,
                        "rowSpan": 1
                    }
                }
            }
        ]/**SCHEMA_DIFF*/
    };
});

Возможно это вам поможет.

Заработало только после того как в модуле с CSS указал класс как 

.usr-label-wrap .label-wrap{
	min-wight:60em;
	max-wight:60em;
}

ну осталась проблема как запретить наезд двух надписей от checkbox друг на друга при уменьшении масштаба окна

Попробуйте добавить строчку в свой css по типу "width: XX%;"

Олег, в базовых карточках (кроме EmailPageV2, можете как пример использовать) задана фиксируемая ширина:

body[OldUI=false] .center-main-container .grid-layout-row {
  max-width: 140em;
}

Вы можете переопределить базовый для нужного раздела, только укажите дополнительный селектор, чтобы не перекрыть логику ВСЕХ карточек. Например: data-item-marker="KnowledgeBasePageGeneralBlock"

Спасибо за ответ. Такой вариант почему-то не срабатывает. Я нашел немного другое решение, но в таком случае приходится задавать ширину под определенное разрешение

@media (min-width: 1920px) {
	width: 110% !important;
}

Здравствуйте,
Вам нужно классу grid-layout-row ts-box-sizing
Во вложенности под id KnowledgeBasePageV2KnowledgeBasePageGeneralBlockGridLayout
Сбросить стиль max-width в none;
Тогда нужное поле будет во всю ширину на любых разрешениях.

Сбросил max-width в none, теперь не нужно указывать конкретное разрешение. Приведите пожалуйста пример как переопределить свойство класса во вложенности по id? Не смог разобраться, и сделал пока так:

#KnowledgeBasePageV2KnowledgeBasePageGeneralBlockGridLayout > div{
	max-width: none;
}

Извиняюсь, под #KnowledgeBasePageV2KnowledgeBasePageGeneralBlockGridLayout и нет id, так что вариант с #KnowledgeBasePageV2KnowledgeBasePageGeneralBlockGridLayout > div идеальный :twisted:

Если Вам требуется на всю ширину экрана, можете не заморачиваться с @media селекторами
Используйте специальные CSS единицы измерения Viewport Units: vw (1/100 процентное отношение к текущей ширине окна браузера) и vh (1/100 процентное отношение к текущей высоте окна браузера).

width: 100vw
В таком случае вне зависимости от размера экрана - элемент будет занимать всю доступную ширину окна, будьте внимательны с текущим значением box-sizing от чего будет зависеть будут ли в размер элемента включаться его border и margin в зависимости от этого иногда установка 100vw может привести к появлению горизонтальной полосы прокрутки, в таком случае необходимо будет или дополнительно скорректировать отсуты/границы или установить чуть меньшее значение в vw (98 - исходя из практики решает вопросы с типовыми проблемами)

Никита, добрый день!

При переопределении базовых css-классов изменения применяются ко всем элементам разметки, использующих эти классы. Для избежания необходимо в Вашем модуле определить уникальные классы и использовать их вместо базовых или совместно с базовыми, чтобы не затрагивать остальные элементы.

"Лабьяк Олег Игоревич" написал:
Для избежания необходимо в Вашем модуле определить уникальные классы и использовать их вместо базовых или совместно с базовыми, чтобы не затрагивать остальные элементы.

Олег,спасибо! Если мне нужно добавить в свой раздел модуль карты и расписания, то мне нужно в блоке diff делать insert соответствующих объектов и указывать в свойстве "values" какие мне угодно значения в поле "wrapClass"?

есть такие загадочные записи, возможно наведет вас на мысль:

[id*='like-it-'],
[id*='tags-button-'] {
padding: 0px;
padding-left: 0px!important;
margin: 0px;
top: 0px;
vertical-align: middle;
margin-right: 10px;
background-position: 3px;
background-repeat: no-repeat;
height: 26px;
}
 
или
 
div[data-item-marker*="FileDetail"] {
	div[data-item-marker*="tiled"], div[data-item-marker*="listed"] {
 
		.ts-controlgroup-tools {
			.disable-left-margin {
				margin-left: -1px;
			}
		}
	}
}

Добрый день!
К сожалению на текущий момент не существует возможности расшаривать стили или добавлять стили в схему карточки редактирования.
Реализация данного функционала в планах.

CustomConfig {
styles: {
wrapStyles: {
'float': 'left'
}
}
}

"Ильюша Сергей Николаевич" написал:

CustomConfig {

styles: {

wrapStyles: {

'float': 'left'

}

}

}

Вопрос снимается - проблема решилась

Как подскажите ? на будущее ?

this.bindings."имя элемента, для которого нужно применить стили" = {
    styles: {
        wrapStyle: {
            float: 'right'
        }
    }
}

итог - inline-стиль элемента.
Вариант, конечно, кривоват и удобен, если только нужно "накинуть" 1-2 правила на 1-2 элемента, но все же имеет место жить