Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

✅ 🐞 Icon is not vertically aligned when the line-height of the text is greater than the font-size in the Button widget #30606

Closed
5 of 6 tasks
Chris-0816 opened this issue Mar 21, 2025 · 2 comments · Fixed by #30651
Closed
5 of 6 tasks

✅ 🐞 Icon is not vertically aligned when the line-height of the text is greater than the font-size in the Button widget #30606

Chris-0816 opened this issue Mar 21, 2025 · 2 comments · Fixed by #30651
Labels
bug Indicates a bug with one or multiple components. control/group/typography References the Typography group settings control. mod/b* [Temp.] For internal use only. mod/svh* [Temp.] For internal use only. mod/v* [Temp.] For internal use only. mod* [Temp.] For internal use only. solved Indicates that an Issue has been Solved, or a Feature Request has been Released. status/evaluating Indicates when an Issue or Discussion is under evaluation or analysis. type/layout Indicates when a topic is related to a component’s Layout. type/styles Indicates when a topic is related to the styles or design of a component. widget/button References the Button widget.

Comments

@Chris-0816
Copy link

Chris-0816 commented Mar 21, 2025 •
edited by nicholaszein
Loading

Prerequisites

  • I have searched for similar issues in open and closed tickets and cannot find a duplicate.
  • I have troubleshooted my issue, and it still exists against the latest stable version of Elementor.

Description

The error occurs when a value is set for "Line-Height". The icon the icon remains fixed at the top of the button.
Tested in a blank new Wordpress site. Only Hello- Theme and Elementor installed.
Screenrecord.

Image

Steps to reproduce

Clean new Wordpresss Website
Hello Theme active
Elementor active,
Insert Button Widget and change Typography "Line Height"

Expected behavior

The icon remains fixed at the top of the button only the text moves with the line-height settings.

Isolating the problem

  • This bug happens when only the Elementor (and Elementor Pro) plugins are active.
  • This bug happens with the Hello Elementor theme active.
  • I can reproduce this bug consistently by following the steps I described above.

Elementor System Info

Click to reveal 
== Server Environment ==
	Operating System: Linux
	Software: nginx/1.27.1
	MySQL version: mariadb.org binary distribution v10.11.11-MariaDB-ubu2204
	PHP Version: 8.1.31
	PHP Memory Limit: 256M
	PHP Max Input Vars: 1000
	PHP Max Post Size: 60M
	GD Installed: Yes
	ZIP Installed: Yes
	Write Permissions: All right
	Elementor Library: Connected

== WordPress Environment ==
	Version: 6.7.2
	
	WP Multisite: No
	Max Upload Size: 60 MB
	Memory limit: 40M
	Max Memory limit: 256M
	Permalink Structure: /%postname%/
	Language: en_US
	Timezone: 0
	
	Debug Mode: Inactive

== Theme ==
	Name: Hello Elementor
	Version: 3.3.0
	Author: Elementor Team
	Child Theme: No

== User ==
	Role: administrator
	WP Profile lang: en-US
	User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:136.0) Gecko/20100101 Firefox/136.0

== Active Plugins ==
	Elementor
		Version: 3.28.0
		Author: Elementor.com


== Must-Use Plugins ==
	ZipWP Client MU
		Version: 1.2.7
		Author: ZipWP.com


== Elementor Experiments ==
	Inline Font Icons: Active by default
	Additional Custom Breakpoints: Active by default
	Container: Active by default
	Optimized Markup: Inactive by default
	Load Google Fonts locally: Active by default
	Header & Footer: Active by default
	Nested Elements: Active by default
	Editor Top Bar: Active by default
	Pages Panel: Inactive by default
	Element Caching: Active by default
	Elementor Home Screen: Active by default
	Elementor Editor Events: Inactive by default
	Atomic Widgets: Inactive by default
	Global Classes: Inactive by default
	Launchpad Checklist: Active by default
	Cloud Library: Inactive by default


== Log ==
	
JS: showing 1 of 1JS: 2025-03-21 09:01:22 [error X 1][../elementor/assets/js/editor.min.js?ver=3.28.0:3:797843] elementor.getCurrentElement().model is undefined 



== Elementor - Compatibility Tag ==
```

Agreement

  • I agree that my issue may be closed without action if it doesn't meet all the requirements.
@Chris-0816 Chris-0816 added the status/awaiting_triage Indicates when an Issue, Pull Request, or Discussion awaits to be triaged. label Mar 21, 2025
@nicholaszein nicholaszein changed the title Icons in button misaligned after update to 3.28.0 ⌛ 🐞 Icon is not vertically aligned when the line-height of the text is greater than the font-size in the Button widget Mar 22, 2025
@nicholaszein nicholaszein added bug Indicates a bug with one or multiple components. control/group/typography References the Typography group settings control. type/styles Indicates when a topic is related to the styles or design of a component. type/layout Indicates when a topic is related to a component’s Layout. widget/button References the Button widget. mod* [Temp.] For internal use only. mod/e* [Temp.] For internal use only. mod/b* [Temp.] For internal use only. mod/v* [Temp.] For internal use only. status/evaluating Indicates when an Issue or Discussion is under evaluation or analysis. and removed status/awaiting_triage Indicates when an Issue, Pull Request, or Discussion awaits to be triaged. labels Mar 22, 2025
@nicholaszein
Copy link
Member

Hello @Chris-0816!

Thank you for submitting your issue! 🙏

🏷️ We've labeled this issue and our team will take a look at it. If there is indeed a problem, they'll work on fixing it. We can't say exactly when it'll be sorted out, but we kindly ask for your patience.

Meanwhile you can use the following custom CSS as a temporary workaround:

.elementor-button-icon {
    align-items: center;
}

Thanks for understanding!

Best regards

@nicholaszein nicholaszein added the mod/svh* [Temp.] For internal use only. label Mar 22, 2025
@rami-elementor rami-elementor mentioned this issue Mar 25, 2025
Merged
rami-elementor added a commit that referenced this issue Mar 26, 2025
@rami-elementor @elementorbot
Fix: Icons in button widgets are not vertically aligned when changing…
a610f93 
… text line-height [ED-18653] (#30651)

Fixes: #30606

---------

Co-authored-by: ElementorBot <[email protected]>
@rami-elementor rami-elementor mentioned this issue Mar 26, 2025
Merged
rami-elementor added a commit that referenced this issue Mar 26, 2025
@rami-elementor @elementorbot
Fix: Icons in button widgets are not vertically aligned when changing…
07d94c8 
… text line-height [ED-18653] (#30664)

Fixes: #30606

Co-authored-by: ElementorBot <[email protected]>
@nicholaszein nicholaszein changed the title ⌛ 🐞 Icon is not vertically aligned when the line-height of the text is greater than the font-size in the Button widget ✅ 🐞 Icon is not vertically aligned when the line-height of the text is greater than the font-size in the Button widget Apr 1, 2025
@nicholaszein nicholaszein added solved Indicates that an Issue has been Solved, or a Feature Request has been Released. and removed mod/e* [Temp.] For internal use only. labels Apr 1, 2025
@nicholaszein
Copy link
Member

Hi @Chris-0816!

We have great news! 🙌

📢 We're happy to announce that the issue you raised was resolved in Elementor Core v3.28.2! 🥳

✅ Feel free to check it out and update your plugin to the new version!

Check the changelog for more information:
Changelog of Elementor and Elementor Pro

Cheers 🥂

@elementor elementor locked as resolved and limited conversation to collaborators Apr 1, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
bug Indicates a bug with one or multiple components. control/group/typography References the Typography group settings control. mod/b* [Temp.] For internal use only. mod/svh* [Temp.] For internal use only. mod/v* [Temp.] For internal use only. mod* [Temp.] For internal use only. solved Indicates that an Issue has been Solved, or a Feature Request has been Released. status/evaluating Indicates when an Issue or Discussion is under evaluation or analysis. type/layout Indicates when a topic is related to a component’s Layout. type/styles Indicates when a topic is related to the styles or design of a component. widget/button References the Button widget.
Projects
None yet
Milestone
No milestone
2 participants
@Chris-0816 @nicholaszein