1

I have a lightning select dropdown which iterates over a list of objects containing colour details, specifically the colour label and it's HEX value.

I want to be able to display the hex value as a colour swatch next to the colour label, so the two are side by side in the drop down option.

I can achieve both of these individually (see screenshot below) but I cannot put them both in the same dropdown. I believe the reason is because the css to display the swatch is not allowed within the Lightning Select. Is this correct? Is there a workaround that can be done instead? I have tried with UI:Select and simple HTML and still no joy..

Here is my attempt:

 <div class="slds-container_medium slds-p-around_small"><strong> <span style="requiredindicator;color:rgb(194, 57, 52);"></span>Colour</strong>
                        <lightning:select name="colours" onchange="{!c.handleColourChange2}">
                            <option text="Choose colour" value="" />
                            <aura:iteration items="{!v.prodColours}" var="option" indexVar="index">
                                    <option text="{!option.label + ' ' }" style="{!'background-color : #'+option.swatch.HEX}" value="{!option.label}" index="{!index}"/>
                            </aura:iteration>
                        </lightning:select>
                    </div>

Screenshot

1

You could add an image to each select option using javascript -- there's a jQuery UI module for it -- but you'd need to know what colors you wanted and have an image for each created in advance. It seems like you're going for something more dynamic here.

I've been able to get pretty close by using a (non-gradient-ed) background gradient, which you can set the color of dynamically for each option:

<aura:iteration items="{!v.prodColours}" var="option" indexVar="index">
    <option text="{!option.label + ' ' }" 
            style="{!'background: linear-gradient(90deg, #' + option.swatch.HEX + ' 35px, #000000 1px, #FFFFFF 36px)'}" 
            value="{!option.label}" 
            index="{!index}"/>
</aura:iteration>

My version isn't very pretty, but you can definitely tweak it and make it look better!

Not a very pretty screenshot

  • Hi Shane, thanks so much for the info. I was not able to get this working in my dropdown but that may be down to my jQuery being a bit rusty. I have used a workaround whilst I learn a bit more about it. Many thanks again! – Jay Oct 4 '18 at 16:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.