Adding images to dropdownOptionStyle

Thank you so much, I found something after going though that page : Change color for each option based on some category for Perspective Dropdown Component - #6 by Elizabeth_Engler
In the end my Code looks kind of like this:

# for extra styling of the dropdown content
	dropdownOptionStyle = {       
		"background-color"		: "transparent",
   	 	"line-height"			: "50px",
   	 	"padding-left"			: "10px",
    	"fontStyle"				: "italic",
    	"color"					: "green",
    }
    
    # define the variable here to "save" complete HTML string
	markDownStyle= ""
	
	#Get locals
	locals = package.getAvailableLocales()
	
	# import all needed images from the Image Management (pictures have to be uploaded FIRST !)
	imgUrlUK = '/system/images/contryIcons/united-kingdom.png'
	imgUrlDE = '/system/images/contryIcons/german.png'
	
	# create an optionlist with all locals
	optionList = []
	# for each option 1.build the option and 2. add style
	for option in locals:
		# cast java.Locale to string
		option = str(option)
		optionList.append({
		"value": option,
		"label": option,
		})
		
		# choose imageUrl depending on option
		imgUrl = ""
		if option == "de":
			imgUrl = imgUrlDE
		elif option == "en":
			imgUrl = imgUrlUK
			
		markDownStyle = markDownStyle + """.iaDropdownCommon_options [data-label=""" + option + """
						]:before { content: url(""" + imgUrl + """);}"""
	
	# build the styling with the accumulated markDownStyle
	markDowncode =  """<style>
				""" + markDownStyle + """
				</style>"""
	
	# format the string nicer, to make sure the HTML is valid
	markDowncode = markDowncode.replace("\n", " ").replace("\t", "")
	
	# set the properties
	self.getChild("root").getChild("FlexContainer_top").getChild("DD_languageTag").props.options = optionList
	self.getChild("root").getChild("FlexContainer_top").getChild("DD_languageTag").props.dropdownOptionStyle = dropdownOptionStyle
	self.getChild("root").getChild("FlexContainer_top").getChild("Markdown").props.source = markDowncode

Thank you very much for your help. :grinning:
Edit: forgot to add image:

2 Likes