SOLVED: Extra Spans in Social Icons Element

[zestjosh]

Bricks Version: 1.3.7b
Browser: Chrome 90
OS: Windows

Minor bug: the social icons element has a span inside of the li, but the span doesn’t get closed (line 237 is missing the slash). Maybe I am mistaken, but it doesn’t seem like the span is needed.

Also, I’m not sure if it’s currently possible but could the CSS get applied directly to the link (if one is set) instead of the

? That way, backgrounds around social icons links will also be clickable.

Screenshot one highlights the span issues and shows that only the icon itself is clickable, whereas screenshot 2 shows updated html and css.

[timmse]

Hi Josh,

Thank you for your report!

As far as I can see, the span is closed

Honestly, I don’t know why they are there, especially the outer and empty span, but we’ve decided to remove them. So if something doesn’t work anymore soon, it’s your fault Just kidding, we will test it before release, of course.

Best regards,
timmse

[zestjosh]

I think that’s just Chrome autocompleting the tag.

Feel free to blame me if anything goes wrong!

[timmse]

Hi Josh, the spans are gone in Bricks 1.3.7

Best regards,
timmse

[zestjosh]

Great! Any chance the updating the CSS selectors to target the link instead of the list item if applicable? Looks like the updates would need to be made in both social-icons.php and frontend.min.css. Maybe helper classes would be beneficial (see below)?

.bricks-element-social-icons li.icon-only,
.bricks-element-social-icons li.has-link a, {
    align-items: center;
    display: flex;
    flex: 1;
    justify-content: center;
}

[zestjosh]

Wanted to bump this up to see if there’s a chance to update the selector so the entire icon is clickable (see above) in 1.4 release?

[timmse]

Hey Josh,
Thank you very much for the great suggestion!

We will implement it in 1.4

Best regards,
timmse

[zestjosh]

This is so close to being perfect in 1.4 RC! I’m using the style tab to set the border-radius of 100px and the background color BUT enabling :hover psuedo class (to change the background color), the background color changes when you hover over the element instead of the icon.

If you set the colors in the individual icons, then the border-radius does not take effect. For example, have a look at https://dev.zestsms.com/. The social icons at the top have the colors set in style tab and the social icons at the bottom have the colors set on the individual icons.

[timmse]

Hi Josh,
I’m unable to reproduce the issue: https://vimeo.com/704495728/c39a9b20d9

Can you please clear your cache, switch to external files, then back to inline styles and see if it works then?

The border-radius works as expected if the item doesn’t contain a link. For items with a link, there is an issue (the radius needs to be applied to the li, not the a).

Best regards,
timmse

[zestjosh]

@timmse

The border-radius works as expected if the item doesn’t contain a link. For items with a link, there is an issue (the radius needs to be applied to the li, not the a).

Yep, that’s what I was referring to. Additionally, being able to set the colors in the style tab (as a default for the icons) is nice and I would expect that setting the colors for the hover pseudo class would work the same way and target the icon and not the container.