Оптимальный способ уменьшить высоту контролов и расстояние между ними по вертикали

Webix JS
#1

Здравствуйте.

Я хочу в material skin наиболее общим способом:

  1. Уменьшить высоту всего поля ввода вместе с заголовком сверху (по-умолчанию, 60px), высоту input и label по-отдельности, уменьшить margin по вертикали между label и input. Речь обо всех элементах - text, datepicker, combo, textarea и.т.д.

  2. Уменьшить расстояние по высоте между rows с элементами ввода

Каким способом мне это оптимальнее сделать? Ранее, я переопределял стили, меняя стандартные webix-стили в собственном styles.css, но в данном случае увидел, что в material/config.less и material/config.js есть настройки inputHeight, labelTopHeight, layoutMargin. Возможно, правильно будет переопределить их значения? Если да, то как именно?

#2

Здравствуйте,

настройки inputHeight, labelTopHeight, layoutMargin

Да, они как раз предназначены для кастомизации скина. Поменять их можно до инициализации приложения (т.е. до вызова webix.ui) через объект webix.skin.$active, который хранит настройки для текущего скина.

https://snippet.webix.com/x3za9y0g

Всё, что касается размеров, в Webix лучше переопределять в JS, а не в stylesheet, потому что внутренняя логика учитывает эти размеры при взаимной отрисовке компонент.

Также можете обратить внимание на Mini skin - это точно такой же Material, но с ужатыми размерами.

#3

Большое спасибо! Все понятно.