Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

Coral 3 Select dropdown renders icons twice when using SVGs

Avatar

Avatar
Validate 1
Level 1
arthurcavallari
Level 1

Likes

3 likes

Total Posts

2 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 3
Boost 1
View profile

Avatar
Validate 1
Level 1
arthurcavallari
Level 1

Likes

3 likes

Total Posts

2 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 3
Boost 1
View profile
arthurcavallari
Level 1

15-05-2019

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.

1753825_pastedImage_1.png

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>

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,275 likes

Total Posts

3,151 posts

Correct Reply

887 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,275 likes

Total Posts

3,151 posts

Correct Reply

887 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
Arun_Patidar
MVP

16-05-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));

Answers (2)

Answers (2)

Avatar

Avatar
Validate 1
Level 1
arthurcavallari
Level 1

Likes

3 likes

Total Posts

2 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 3
Boost 1
View profile

Avatar
Validate 1
Level 1
arthurcavallari
Level 1

Likes

3 likes

Total Posts

2 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 3
Boost 1
View profile
arthurcavallari
Level 1

16-05-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;

}

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,275 likes

Total Posts

3,151 posts

Correct Reply

887 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,275 likes

Total Posts

3,151 posts

Correct Reply

887 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
Arun_Patidar
MVP

17-05-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();