Jmix1 entityComboBox: Users don't know there is a scollbar

Support
#1

Hi all,

we have developed an application using Jmix 1 where our users have to open an entityComboBox to select a value. Now, in one case the comboBox contains many items and we noticed that our users are unaware that a comboBox may contain many more item besides those that are immediately visible. We believe it is because the scrollbar and the little page-counter-box below the comboBox are hardly visible (see screenshot below), so we would like to change their colors to make them stand out more

image

I can’t figure out how to change these colors. Anybody knows how to do it?

Kind regards,
Bart

#3

Hello,

If you wan’t to style it globally, put inside you custom theme into the root following cascade overriden expresion:

    .v-filterselect-suggestpopup [class$="status"] {
      background: brown;
      color: honeydew;
    }

so, your theme should looks like:

.helium-ext {
  @include addons;
  @include helium-ext;

    .v-filterselect-suggestpopup [class$="status"] {
      background: brown;
      color: honeydew;
    }
}

Alternatively, you can restrict applying style area via cascades:

.helium-ext {
  @include addons;
  @include helium-ext;

 
    .v-filterselect-suggestpopup-comboBoxMf {
      .popupContent {
        .v-filterselect-status {
          background: brown;
          color: honeydew
        }
      }
    }
  
}

and in code assign class name for the component:

comboBox.setStyleName("comboBoxMf");

btw, come up with a better name for class name like .custom-combo-box :slight_smile:

About css debugging

  1. As we can see there is downdown that we cant catch in dev-tools, so bacisally cheatsheet is debug after 5 seconds (devtools console): setTimeout(function(){debugger;}, 5000)
  2. This is not a part of DOM, in terms of vaadin page DOM, so this drop down we should found in nearby normal DOM, but in root of body (always works for all “appering elements” - they almost always appearing in absolute positions, so they not injected into the vaadin page dom):
    image
    image
    image
    image
  3. If globally change, just catch existing cascade and override it
    image 
.helium-ext {
  @include addons;
  @include helium-ext;

    .v-filterselect-suggestpopup [class$="status"] {
      background: brown;
      color: honeydew;
    }
}

  1. If you want to play with styles w/o redeplys =>
    image
    Play as you want
    image

  2. If you want to do same but restict the working area of styles, do cascades:
    image
    And yes, you can play with cascade list also in devtools
    image

I hole I solve your problem. Good luck

Best regards,
Dmitry

1 Like
#4

Hi Dmitry,

wow, thank you very very much! This is really tremendously helpful. I learned a lot from your explanation, thanks for putting in the time and effort to explain all this. And it worked, I was succesfull in changing the colors!

Kind regards,
Bart

1 Like