[Enhancement] Line up text items in icon list widget

[knireis]

When the text of a list item does not fit on 1 line, the text is displayed on a line below it. This is good, but the text starts full left side of the widget below the icon of the list item.
It looks better if there is an ident and the text on line 2 continues same ident as the first line. See image

[WPDevHQ]

We resolved this with a bit CSS trick here: https://www.facebook.com/groups/Elementors/permalink/976594989132954/

But this should be built in to the plugin so I'll +1 it

[knireis]

Thanks, but i can't get it to align properly

[WPDevHQ]

Do you have a link we can take a look at?

You may need to adjust the values and target the correct element. For the solution linked to we are targeting the .elementor-element.elementor-element-jzyvoci element which will be different on your site.

[knireis]

http://digna.computerhulpnieuw-vennep.nl/ it is now without the css

I did change the class for the target element and also tried some different
values. But it basically only got worse.... Probably my lack of knowledge

Regards, Jasper

2016-11-14 14:23 GMT+01:00 Zulfikar Nore notifications@github.com:

Do you have a link we can take a look at?

You may need to adjust the values and target the correct element. For the
solution linked to we are targeting the .elementor-element.elementor-
element-jzyvoci element which will be different on your site.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
#822 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACk68IK5F8tUW2lMzWnz-fnVREXkc62uks5q-GDtgaJpZM4KsREt
.

[WPDevHQ]

Try this....had to do some adjustment due to the inline styling.

.elementor-element.elementor-element-5h3n5vn .elementor-icon-list-icon { width: 8%; margin-right: 2%; float: left; clear: left; } .elementor-element.elementor-element-5h3n5vn .elementor-icon-list-text { width: 90%; float: left; padding-left: 0; } .elementor-element.elementor-element-5h3n5vn .elementor-icon-list-text { text-indent: 0; } .elementor-element.elementor-element-sewis5j .elementor-widget-container { margin-top: 140px; }

For some strange reason the applied :not(:last-child) margin is lost so I had to apply one to the top of the button.

[knireis]

thanks, that is pretty close, only the button jumps to the side, see
attachment

Regards

2016-11-14 16:01 GMT+01:00 Zulfikar Nore notifications@github.com:

Try this....had to do some adjustment due to the inline styling.

.elementor-element.elementor-element-5h3n5vn .elementor-icon-list-icon {
width: 8%;
margin-right: 2%;
float: left;
clear: left;
}
.elementor-element.elementor-element-5h3n5vn .elementor-icon-list-text {
width: 90%;
float: left;
padding-left: 0;
}
.elementor-element.elementor-element-5h3n5vn .elementor-icon-list-text {
text-indent: 0;
}
.elementor-element.elementor-element-sewis5j .elementor-widget-container {
margin-top: 140px;
}

For some strange reason the applied :not(:last-child) margin is lost so I
had to apply one to the top of the button.
[image: icontextalign]
https://cloud.githubusercontent.com/assets/16872407/20269453/04705258-aa7b-11e6-8451-5236a6051098.png

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
#822 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACk68OoCaZUaht7eSG5QU_lUh6YSRgTfks5q-HfZgaJpZM4KsREt
.

[WPDevHQ]

In the advance section of the button you have margins set as 0px change that to 140px 0px 0px 0px and remove the last line of the code I posted to see if it helps.

[knireis]

Thank you, that works fine.

Can i ask one more question? Why is the button text on my phone on 2 lines?
See printscreen. There is plenty of room to the left and right of the
button.

Regards, Jasper

2016-11-14 16:13 GMT+01:00 Zulfikar Nore notifications@github.com:

In the advance section of the button you have margins set as 0px change
that to 140px 0px 0px 0px and remove the last line of the code I posted to
see if it helps.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
#822 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACk68IvuyCwgIEJ8leV39jS_sQaO17e7ks5q-HqAgaJpZM4KsREt
.

[WPDevHQ]

There's no screenshot attached.

I would has a gues that you may need to change the padding for lower resolution screens.

[WPDevHQ]

@arielk - Looking at frontend.css and changing the code from line 918 to the following addresses this issue.

.elementor-widget-icon-list span.elementor-icon-list-text { width: 90%; float: left; }
.elementor-widget-icon-list span.elementor-icon-list-icon { width: 8%; margin-right: 2%; float: left; }
.elementor-widget-icon-list .elementor-icon-list-text { display: inline; vertical-align: middle;}
.elementor-widget-icon-list .elementor-icon-list-icon i { width: 1em; padding-top: 3%; line-height: 1; vertical-align: middle; display: inline-block; text-align: center;}

[knireis]

Hi,

There is an image as attachment included in the previous mail, maybe you
can look again?
It is not about the same widget, this question is about a button further
down the page.

Regards, Jasper

​

2016-11-14 17:02 GMT+01:00 Zulfikar Nore notifications@github.com:

There's no screenshot attached.

I would has a gues that you may need to change the padding for lower
resolution screens.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
#822 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACk68NGS3csWO6gPDzr8pUxuwP3G875Oks5q-IX4gaJpZM4KsREt
.

[WPDevHQ]

Sorry @knireis but I'm not seeing the screenshot....check the emails I'm getting from the thread and there's nothing there either.

[knireis]

Sorry, didn't know you cannot send images with the email. Here it is

[WPDevHQ]

What handset is that?

I've just tested your site with Blisk and everything seem to render correctly on the free provided handsets (iPhone 7 and Samsung s6-7 not available)

[knireis]

http://www.gsmarena.com/huawei_honor_6-6461.php

using chrome browser

[bainternet]

solved a while ago.

[haniobaid]

We resolved this with a bit CSS trick here: https://www.facebook.com/groups/Elementors/permalink/976594989132954/

But this should be built in to the plugin so I'll +1 it

Sadly this is a big damper on a really stellar plugin and still happening 3 years later. I am using the latest elementor pro, the latest price table widget and the latest wordpress as of today 27-Feb-2019. If it was ever fixed as the 24-Apr-2018 post says, the fix must have been accidentally rolled back. See screenshot. The permalink to the facebook workaround link doesn't work anymore either it goes to the main group page.

[rajnish71]

Almost 4 years and the issue is unresoved

[weedhead69]

Add this to your css:
.elementor-price-table .elementor-price-table__features-list svg { display: table-cell; float: left;} .elementor-price-table__feature-inner span { display: table-cell;}

I know float with table-cell is not best solution, but it works for me.

[vegasgreg]

This code worked for me. Found at - #11057 (comment)

.elementor-price-table__feature-inner{
display: inline-flex;
}