Select list greybar 12.25?

[Jane]

I'm converting an app from 11.47 to 12.25.

For a droplist entry field, the old app lists the items with a greybar effect.  The rows alternate with a SelectList1 and SelectList2 class.

12.25 just has a uniform light blue background in the list.  Those classes no longer exist in Base/nettalk-ui-css.

Is there an easy way to restore the greybar to this droplist?

Thanks.

Jane

[Jane]

So I added some lines to my custom css file:

.nt-select-height>.ui-menu-item:nth-child(odd){
background-color: #EEEEEE;color: #333;   
}
.nt-select-height>.ui-menu-item:nth-child(even){
background-color: #FFFFFF;color: #333;
}

Is there an easier way?

[Bruce]

Hi Jane,

the greenbarring is handled by some css in jquery-ui.theme.css circa line 482;

.nt-select-height>.ui-menu-item:nth-child(odd){
   background-color:var(--select-droplist-background);
}
.nt-select-height>.ui-menu-item:nth-child(even){
   background-color:var(--select-droplist-background-2);
}
.nt-select-height>.ui-menu-item:hover{
   background-color:var(--select-droplist-background-hover);
}

notice the use of css variables here;
--select-droplist-background
and
--select-droplist-background-2

All the css variables are defined and set in nt-theme.css

In the base theme they are declared circa line 580;
   --select-droplist-background:var(--lightest-primary);
   --select-droplist-background-2:var(--lightest-secondary);

so yes, the easier way is just to adjust your nt-theme.css file.
You can put direct colors in here if you like, or you could use one of the defined palette colors (which you'll see declared near the top of the file, and which you can also inspect in the themer example.)

If you like I can walk through this with you in the User Group webinar.

cheers
Bruce

[Jane]

Dang-it, Bruce.  I hunted for that.
Thanks!

Easier for me is to put the tweaked variables into my custom CSS rather than modifying nt-theme.css.  That way I don't have to redo if you ship a new version of nt-theme.css.

Now, is there a similar variable that will squeeze the line height a bit on those dropdowns without modifying the --Line-height value for the entire site?

Cheers,

Jane

[Bruce]

Hi Jane,

As with most (all?) CSS you can override earlier settings in your custom.css file.
In this case you are "setting" CSS variables, and that's done inside the :root tag. So in other words;

:root{
  --font-size:14pt;
}

I would likely limit this approach to a smallish number of variables - there's a point at which you are just creating a new theme, and it's better to clone the theme to some new name, and go from there. but for a small number of settings this approach should be fine.

cheers
Bruce