CSS. Изменение CheckBox

Добрый день.

 

Очень нужна помощь. Сделал страничку редактирования

Изображение удалено.

Но система нам все отображает в таком виде:

Изображение удалено.

Как переделать на такой вид?

Изображение удалено.

 

Меняем в браузере значения у

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

и получаем как хочется. Теперь сделаю свой клиентский модуль и вкладке Less пишу свой класс

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

Добавляю в схему

define("UsrCustomPage", ["css!UsrCustomCSS", "CommonCSSV2"], function() {

В блоке diff пишу (пробую по разному)

{
	"operation": "insert",
	"name": "UsrRisk_01",
	"values": {
		wrapClass:["usr-label-wrap"],
		"layout": {
			"colSpan": 12,
			"rowSpan": 1,
			"column": 0,
			"row": 0,
			"layoutName": "QuestionsTabLabelGridLayout"
		},
		"bindTo": "UsrRisk_01",
		"labelConfig": {
			"caption": {
				"bindTo": "Resources.Strings.UsrRisk_01_LabelCaption"
			}
		},
		"enabled": true
	},
	"parentName": "QuestionsTabLabelGridLayout",
	"propertyName": "items",
	"index": 0
},
{
	"operation": "insert",
	"name": "UsrRisk_09",
	"values": {
		classes:{
			labelClass:["usr-label-wrap"]
		},
		"layout": {
			"colSpan": 12,
			"rowSpan": 1,
			"column": 12,
			"row": 0,
			"layoutName": "QuestionsTabLabelGridLayout"
		},
		"bindTo": "UsrRisk_09",
		"labelConfig": {
			"caption": {
				"bindTo": "Resources.Strings.UsrRisk_09_LabelCaption"
			}
		},
		"enabled": true
	},
	"parentName": "QuestionsTabLabelGridLayout",
	"propertyName": "items",
	"index": 1
}

Но в итоге Ничегошеньки....

В идеале бы конечно добиться такого вида

Изображение удалено.

И чтоб они не наезжали друг на друга при уменьшении странички, а текст переносился бы по словам. Проще говоря как в дизайнере страницы. Но это пока утопия, сделать бы хоть что либо. Помогите...

Нравится

4 комментария

Добрый день.

 

Странно что у вас не получилось добавить свой 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%;"

Показать все комментарии