• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

Set Option Background Color Using Select2

 
Ranch Hand
Posts: 2223
2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I am building the html select string on the server side.
I am using a field value to add a class property to the option when a particular condition is met.

On the client side I am setting the select2 to the list.
When the list is displayed the background color gets removed.

How can I fix this?

Example of server side HTML string I am building:



The client side code:

 
Marshal
Posts: 4542
572
VSCode Eclipse IDE TypeScript Redhat MicroProfile Quarkus Java Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
It took me a while to understand what you were doing since I don't use jQuery or Select2,  It appears like there is no way to inherit the styling for the <option> elements, so instead, you need to insert yourself in to the rendering process by providing a templating callback which creates an replacement object which includes the class names referenced in the <option> elements.

This is what I tried which I believe addresses your problem:

html:js:css:

Here's a JSFiddle example
 
Ron McLeod
Marshal
Posts: 4542
572
VSCode Eclipse IDE TypeScript Redhat MicroProfile Quarkus Java Linux
  • Likes 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
In case I wasn't clear, this is what you would need to add to your Select2 configuration options:
 
Steve Dyke
Ranch Hand
Posts: 2223
2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I have attempted to use the suggested code.
However, the elements of the List show as empty lines.
When you hover over the empty lines they will highlight and I can even click them.
 
Ron McLeod
Marshal
Posts: 4542
572
VSCode Eclipse IDE TypeScript Redhat MicroProfile Quarkus Java Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
If you can share the server-generated HTML and the CSS, I might be able to help further.
 
Steve Dyke
Ranch Hand
Posts: 2223
2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
This is the place in the server side HTML select list element where the redBG class starts showing.
These two line are in natural order when using the Inspection tool of MS Edge.

 
Steve Dyke
Ranch Hand
Posts: 2223
2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
To explain the last post.
The line without the redBG class shows as expected in the dropdown list.
The line with the redBG shows up as a blank line.
However when I hover over the blank line it higlights.
 
Steve Dyke
Ranch Hand
Posts: 2223
2
  • Likes 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I was able to get this to work:

 
Ron McLeod
Marshal
Posts: 4542
572
VSCode Eclipse IDE TypeScript Redhat MicroProfile Quarkus Java Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Good to see that you got it to work.  It seems like the browser you are testing with doesn't support template literals.

Which browser are you using - Internet Explorer?
 
Steve Dyke
Ranch Hand
Posts: 2223
2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Ron McLeod wrote:Which browser are you using - Internet Explorer?



MS Edge
 
reply
    Bookmark Topic Watch Topic
  • New Topic