Стилизация ComboBox (jmix 1.3.5)

Вопросы и проблемы
#1

Добрый день!

  1. Подскажите, как корректно прописать стили для индикации заполненности ComboBox? Вот так почему-то не проходит:
  .box-not-empty input{
    background-color: lightgreen;
  }

  .box-empty input{
    background-color: transparent;
  }

в контроллере экрана просто:

    @Subscribe("memoDate")
    public void onMemoDateValueChange(HasValue.ValueChangeEvent<DateInterval> event) {
        if (comboBox.getValue() != null) {
            comboBox.removeStyleName("box-empty");
            comboBox.addStyleName("box-not-empty");
        } else {
            comboBox.removeStyleName("box-not-empty");
            comboBox.addStyleName("box-empty");
        }
}
  1. Можете для чайников подсказать, где прописаны вот эти scss синтаксические правила (префиксы и пр.) в контексте различных ui элементов jmix? Документация?
#2

Создание нового стиля в теме
Api OptionStyleProvider
Пример СomboBox

Возможно после запуска приложения в браузере нужно будет еще жесткую перезагрузку сделать. Через F12 входите в консоль разработчика браузера → ПКМ по кнопке перезагрузки → Очистка кеша и жесткая перезагрузка

#3

Ярослав, спасибо!
Однако в этих примерах речь про опции comboBox, а мне требуется раскрашивать само поле ввода combobox…

Первые 2 ссылки ведут на одну и ту же страницу, так надо?
Остается общий вопрос: почему в данном случае нужно брать именно префикс .v-filterselect-item… :slight_smile: Может быть где-то можно увидеть полный набор подобных инструкций?

#4

Извините. Поправил ссылку. По поводу

Не уверен… Мб в примере не правильно написали…
скорее всего там имелось в виду v-filterselect-item.high-grade и тд. Такой селектор в css. Хотя судя по jmix-ui-samples так и должно быть…

#5

Мне не сами значения надо раскрашивать, а поле ввода combobox

#6

Тогда ваши стили скорее всего должны выглядеть так:

 .v-filterselect.box-not-empty {
    background-color: lightgreen;
  }

  .v-filterselect.box-empty {
    background-color: transparent;
  }

Или

 .v-filterselect-input.box-not-empty {
    background-color: lightgreen;
  }

  .v-filterselect-input.box-empty {
    background-color: transparent;
  }

Судя по классам comboBox.
image

#7

И так и так попробовал с перезапуском приложения и жесткой перезагрузкой браузера. Не работает :frowning: Контроллер не трогал, только scss

#8

А можете посмотреть в приложении html код куда именно добавляется класс стиля? Возможно нужен другой селектор. И вопрос обновляется ли он после открытия экрана…

#9

Такой селектор у меня сработал

@mixin helium-ext {
  @include helium;

  .v-filterselect.box-not-empty>.v-filterselect-input {
    background-color: lightgreen;
  }

  .v-filterselect.box-empty>.v-filterselect-input {
    background-color: transparent;
  }
}

Надо подучить css селекторы)

image

Пс. Так же работает

@mixin helium-ext {
  @include helium;

  .v-filterselect-box-not-empty>.v-filterselect-input {
    background-color: lightgreen;
  }

  .v-filterselect-box-empty>.v-filterselect-input {
    background-color: transparent;
  }
}

Ибо платформа автоматом создает на стиль доп класс.

Еще яб проверил что в onMemoDateValueChange comboBox.getValue() содержит правильное значение. Не уверен что происходит раньше. Событие или установка значения. Лучше value брать из event

1 симпатия
#10

Ярослав, спасибо огромное!

Вот так заработало! :slight_smile:

@mixin helium-ext {
  @include helium;

  .v-filterselect.box-not-empty>.v-filterselect-input {
    background-color: lightgreen;
  }

  .v-filterselect.box-empty>.v-filterselect-input {
    background-color: transparent;
  }
}

Может подскажете, где про эти селекторы почитать?) Прям тёмный лес, если честно для меня))

#11

К сожалению это вам нужно будет самому гуглить как там все в css устроено) Я сам не оч во front-end)