Coral 3 Select dropdown renders icons twice when using SVGs | Community
Skip to main content
arthurcavallari
arthurcavallari
Level 1
May 16, 2019
Solved

Coral 3 Select dropdown renders icons twice when using SVGs

  • May 16, 2019
  • 3 replies
  • 2835 views

Hi all,

I'm running AEM 6.4.4 and I'm trying to create a select dropdown with custom svg icons using the the new Coral 3 Select component (Select — Granite UI 1.0 documentation ), but the icons always get duplicated when the component is rendered.

Does Coral-Icon support SVGs? If not, what is the proposed solution to render a select dropdown with icons?

My previous implementation was setting the icons using javascript, but I got excited when I saw the Coral 3 component had an icon property.

Here's what happens when I set the icon attribute to an svg, vs an icon built in to AEM.

Here's a snippet of the dialog xml for this component

<select
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/coral/foundation/form/select"
   fieldLabel="Select Icon"
   name="./iconTest">
  <items jcr:primaryType="nt:unstructured">
     <option1
        jcr:primaryType="nt:unstructured"
        icon="/etc/designs/sitename/assets/svgs/icon-document.svg"
        selected="{Boolean}true"
        text="Icon set to custom SVG"
        value="value1"/>
     <option2
        jcr:primaryType="nt:unstructured"
        icon="actions"
        text="Icon set to 'actions'"
        value="value2"/>
  </items>
</select>
    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by arunpatidar

    Hi,

    I think this is a bug.

    but you can remove the extra icon as soon as dialog loads using js.

    (function ($, $document) {

        "use strict";

          $document.on("dialog-ready", function() {

    $(".cq-dialog-content coral-selectlist-item").each(function( index ) {

      $(this).children('coral-icon').find('img.coral3-Icon-image:nth-child(2)').remove();

    });

    });

    })($, $(document));

    3 replies

    arunpatidar
    Community Advisor
    arunpatidarCommunity AdvisorAccepted solution
    Community Advisor
    May 16, 2019

    Hi,

    I think this is a bug.

    but you can remove the extra icon as soon as dialog loads using js.

    (function ($, $document) {

        "use strict";

          $document.on("dialog-ready", function() {

    $(".cq-dialog-content coral-selectlist-item").each(function( index ) {

      $(this).children('coral-icon').find('img.coral3-Icon-image:nth-child(2)').remove();

    });

    });

    })($, $(document));

    Arun Patidar
      arthurcavallari
      arthurcavallariAuthor
      Level 1
      May 16, 2019

      Ah I see, I was hoping I was just using it wrong.

      Your javascript fix only removes the duplicates from the select options and misses the currently selected item, you could just hide them all using CSS

      img.coral3-Icon-image:nth-child(2) {
          display: none;
      }
        O
        omari94252573
        March 4, 2022

        this css solution is way better, it works even on page wizard creation

        arunpatidar
        Community Advisor
        arunpatidarCommunity Advisor
        Community Advisor
        May 17, 2019

        yes, css would do a trick as well.

        anyways here is complete js code if others are seeking

        $(".cq-dialog-content coral-selectlist-item").each(function( index ) {

          $(this).children('coral-icon').find('img.coral3-Icon-image:nth-child(2)').remove();

        });

        $(".cq-dialog-content button.coral3-Select-button").find('coral-icon').find('img.coral3-Icon-image:nth-child(2)').remove();

        Arun Patidar
        Terms & ConditionsAccessibility statement

        Loading footer...