elementor/elementor

Icon List - Alignment - Inline?

pingram3541 opened this issue · 8 comments

pingram3541 commented

I thought this was requested before but had a hard time finding it. Is it possible to make an icon list display inline without custom css? Thx

pingram3541 commented

After doing a little playing around this is a known quirk of using flex model with inline elements. I found that if you add an option to toggle the elements inline, just also toggle the ul to have following properties:

here is the css output:

Inline - justify right

selector .elementor-icon-list-items {
    display: flex;
    justify-content: flex-end;
}

Inline - justify left

selector .elementor-icon-list-items {
    display: flex;
    justify-content: flex-start;
}

Inline - justify center

selector .elementor-icon-list-items {
    display: flex;
    justify-content: center;
}

And of course the logic should be smart enough to set inline for only specific modes and when not inline for a particular device width, we remove the flex props from the ul and everything works as it does now.

This would give the utmost design flexibility for icon lists both vertical and horizontal. Thanks.

  • 👍1
pingram3541 commented

Yes, please see my response on the other thread, they are similar yet still individual. Thx - #1601 (comment)

muzaffarsiddiqui commented

Hi,
Very nice tip. It solves my problem too except a little problem. I need to have space in between icon list items. Not the first one and last one.

What will be the css code?

I will appreciate your help.
Thanks
Muzaffar

sigersmit commented

@muzaffarsiddiqui I used:

.elementor-icon-list-item:not(:first-child) {
    padding-left: 10px;
}

This would be a great enhancement!

  • 👍1
maxwellhibbert commented

Need this.

vongoh commented

+1. Just realized Elementor Icon List element doesn't have an inline option

pingram3541 commented

It's the simple things that take the longest to curate

arielk commented

Done for the next version #3522

  • 🎉2