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

✅ 🐞 Bug Report: The icon in the Menu Cart widget does not vertically align to the center #21844

Closed
5 tasks done
Michaelgimii opened this issue Mar 30, 2023 · 7 comments
Closed
5 tasks done

✅ 🐞 Bug Report: The icon in the Menu Cart widget does not vertically align to the center #21844

Michaelgimii opened this issue Mar 30, 2023 · 7 comments
Labels
bug Indicates a bug with one or multiple components. component/inline-font-icons References the Inline Font Icons experimental feature. integration/woocommerce References any component related to Elementor Pro’s WooCommerce Builder. mod/b* [Temp.] For internal use only. mod/v* [Temp.] For internal use only. mod* [Temp.] For internal use only. product/pro Indicates if the referenced component is part of the Elementor Pro plugin. release/3.28 [Temp.] References Issues or Discussions related to Elementor and Elementor Pro version v3.28. solved Indicates that an Issue has been Solved, or a Feature Request has been Released. status/merged Indicates when a Pull Request has been merged to a Release. type/experiment Indicates when a topic is related to a Stable or Unstable Feature or Experiment. 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. widget/wc/menu-cart References the WooCommerce Menu Cart widget (Pro) often referred as the Mini Cart.
Milestone
3.28.0

Comments

@Michaelgimii
Copy link

Michaelgimii commented Mar 30, 2023 •
edited by nicholaszein
Loading

Prerequisites

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

Description

If we use a custom icon in the Menu cart widget, this icon is not located vertically in the center. In fact, there is an extra space at the bottom. See the image below :

menu cart

By checking the css codes in this widget, it seems that the icon in this widget has line height by default. By adding line-height:0px; This problem has been resolved.

m

The problem does not end here.

If we select the svg icon and set the padding of the Menu cart icon to 0, there will always be an extra space at the bottom, which can only be solved by you.

b

Steps to reproduce

  1. Add the menu cart widget. The default icon is completely centered.
  2. Add an icon from the Elementor icon library. Again, no problem.
  3. Now select an svg icon for it. In this case, you can see that the svg icon is not centered vertically.

According to the image above, if you set the line height for the icon to 0, the error will be solved.

Please fix this problem. Because it makes us always have problems in alignment with other widgets. thanks

Isolating the problem

  • This bug happens with only Elementor plugin active (and Elementor Pro).
  • This bug happens with a Blank WordPress theme active (Hello theme).
  • I can reproduce this bug consistently following the steps above.

System Info

System Info 
== Server Environment ==
Operating System: WINNT
Software: Apache/2.4.38 (Win32) OpenSSL/1.1.1a PHP/7.3.2
MySQL version: mariadb.org binary distribution v5.6.42-84.2
PHP Version: 7.3.2
PHP Memory Limit: 128M
PHP Max Input Vars: 1000
PHP Max Post Size: 64M
GD Installed: Yes
ZIP Installed: Yes
Write Permissions: All right
Elementor Library: Connected

== WordPress Environment ==
Version: 6.1.1
Site URL: [http://localhost:80/elementor](http://localhost/elementor)
Home URL: [http://localhost:80/elementor](http://localhost/elementor)
WP Multisite: No
Max Upload Size: 64 MB
Memory limit: 40M
Max Memory limit: 256M
Permalink Structure: /%year%/%monthnum%/%day%/%postname%/
Language: en-US
Timezone: Europe/berlin
Admin Email: [[email protected]](mailto:[email protected])
Debug Mode: Inactive

== Theme ==
Name: Hello Elementor
Version: 2.7.1
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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36

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

Elementor Pro
	Version: 3.12.0
	Author: Elementor.com

	WooCommerce
		Version: 7.5.0
		Author: Automattic



== Features ==
Custom Fonts: 0
Custom Icons: 0

== Integrations ==

woocommerce: Active

== Elementor Experiments ==
Optimized DOM Output: Active
Improved Asset Loading: Active
Improved CSS Loading: Active
Inline Font Icons: Inactive
Accessibility Improvements: Inactive
Additional Custom Breakpoints: Inactive
admin_menu_rearrangement: Inactive by default
Flexbox Container: Active
Upgrade Swiper Library: Active
Default to New Theme Builder: Inactive
Hello Theme Header & Footer: Inactive
Editor Top Bar: Active
Landing Pages: Inactive
Nested Elements: Active
Lazy Load Background Images: Inactive by default
Page Transitions: Inactive
Notes: Inactive
Loop: Active
Scroll Snap: Inactive
Menu: Active

== Log ==

Log: showing 20 of 322023-02-27 01:30:44 [info] elementor::elementor_updater Started
2023-02-27 01:30:44 [info] Elementor/Upgrades - _on_each_version Start
2023-02-27 01:30:44 [info] Elementor/Upgrades - _on_each_version Finished
2023-02-27 01:30:44 [info] Elementor data updater process has been completed. [array (
'plugin' => 'Elementor',
'from' => '3.11.1',
'to' => '3.11.2',
)]
2023-03-20 01:11:35 [info] Elementor data updater process has been queued. [array (
'plugin' => 'Elementor',
'from' => '3.11.2',
'to' => '3.11.5',
)]
2023-03-20 01:11:36 [info] Elementor data updater process has been queued. [array (
'plugin' => 'Elementor Pro',
'from' => '3.11.2',
'to' => '3.11.6',
)]
2023-03-20 01:11:36 [info] elementor-pro::elementor_pro_updater Started
2023-03-20 01:11:36 [info] Elementor/Upgrades - _on_each_version Start
2023-03-20 01:11:36 [info] Elementor Pro/Upgrades - _on_each_version Start
2023-03-20 01:11:36 [info] Elementor Pro/Upgrades - _on_each_version Finished
2023-03-20 01:11:36 [info] Elementor data updater process has been completed. [array (
'plugin' => 'Elementor Pro',
'from' => '3.11.2',
'to' => '3.11.6',
)]
2023-03-29 11:53:48 [info] Elementor data updater process has been queued. [array (
'plugin' => 'Elementor',
'from' => '3.11.5',
'to' => '3.12.0',
)]
2023-03-29 11:53:48 [info] elementor::elementor_updater Started
2023-03-29 11:53:48 [info] Elementor/Upgrades - _on_each_version Start
2023-03-29 11:53:48 [info] Elementor/Upgrades - _on_each_version Finished
2023-03-29 11:53:48 [info] Elementor data updater process has been completed. [array (
'plugin' => 'Elementor',
'from' => '3.11.5',
'to' => '3.12.0',
)]
2023-03-29 14:37:27 [info] Elementor data updater process has been queued. [array (
'plugin' => 'Elementor Pro',
'from' => '3.11.6',
'to' => '3.12.0',
)]
2023-03-29 14:37:27 [info] Elementor Pro/Upgrades - _on_each_version Start
2023-03-29 14:37:27 [info] Elementor Pro/Upgrades - _on_each_version Finished
2023-03-29 14:37:27 [info] Elementor data updater process has been completed. [array (
'plugin' => 'Elementor Pro',
'from' => '3.11.6',
'to' => '3.12.0',
)]

PHP: showing 4 of 4PHP: 2023-03-02 02:31:28 [error X 1][C:\xampp\htdocs\elementor\wp-content\plugins\elementor-pro\modules\theme-builder\classes\conditions-manager.php::295] Uncaught Error: Call to a member function update_meta() on bool in C:\xampp\htdocs\elementor\wp-content\plugins\elementor-pro\modules\theme-builder\classes\conditions-manager.php:295
Stack trace:
#0 C:\xampp\htdocs\elementor\wp-content\plugins\elementor-pro\modules\theme-builder\classes\conditions-manager.php(168): ElementorPro\Modules\ThemeBuilder\Classes\Conditions_Manager->save_conditions(NULL, Array)
https://github.com/elementor/elementor/pull/1 [internal function]: ElementorPro\Modules\ThemeBuilder\Classes\Conditions_Manager->ajax_save_theme_template_conditions(Array, Object(Elementor\Core\Common\Modules\Ajax\Module))
https://github.com/elementor/elementor/pull/2 C:\xampp\htdocs\elementor\wp-content\plugins\elementor\core\common\modules\ajax\module.php(175): call_user_func(Array, Array, Object(Elementor\Core\Common\Modules\Ajax\Module))
https://github.com/elementor/elementor/pull/3 C:\xampp\htdocs\elementor\wp-includes\class-wp-hook.php(308): Elementor\Core\Common\Modules\Ajax\Module->handle_ajax_request('')
https://github.com/elementor/elementor/pull/4 C:\xampp\htdocs\elementor\wp-includes\class-wp-hook.php(332): WP_Hook->apply_filters('', Array)
https://github.com/elementor/elementor/pull/5 C:\xampp\htdocs\elemen [array (
'trace' => '
#0: Elementor\Core\Logger\Manager -> shutdown()
',
)]
PHP: 2023-03-11 14:20:00 [error X 4][C:\xampp\htdocs\elementor\wp-content\plugins\elementor\modules\safe-mode\module.php::11] Maximum execution time of 30 seconds exceeded [array (
'trace' => '
#0: Elementor\Core\Logger\Manager -> shutdown()
',
)]
PHP: 2023-03-17 21:02:19 [notice X 1][C:\xampp\htdocs\elementor\wp-content\plugins\elementor-pro\modules\theme-builder\classes\conditions-manager.php::168] Undefined index: editor_post_id [array (
'trace' => '
#0: Elementor\Core\Logger\Manager -> shutdown()
',
)]
PHP: 2023-03-29 14:38:36 [notice X 3][C:\xampp\htdocs\elementor\wp-content\plugins\elementor\core\common\modules\ajax\module.php::175] Undefined index: data [array (
'trace' => '
#0: Elementor\Core\Logger\Manager -> shutdown()
',
)]

JS: showing 6 of 6JS: 2023-03-03 20:14:54 [error X 2][http://localhost:80/elementor/wp-content/plugins/elementor/assets/js/editor.min.js?ver=3.11.2:3:719506] Cannot read properties of undefined (reading 'widgets_settings')
JS: 2023-03-04 12:28:29 [error X 10][http://localhost:80/elementor/wp-admin/load-scripts.php?c=1&loadchunk_0=underscore,jquery-core,jquery-migrate,backbone,jquery-ui-core,jquery-ui-mouse,wp-api-request,regenerator-runtime,wp-polyfill,wp-&loadchunk_1=hooks&ver=6.1.1:4:51824] Cannot read properties of undefined (reading 'replace')
JS: 2023-03-09 11:53:29 [error X 3][http://localhost:80/elementor/wp-content/plugins/elementor/assets/js/editor-modules.min.js?ver=3.11.2:2:14150] An invalid argument supplied as multiple control value [array (
'category' => 'InvalidElementData',
'tag' => 'Element undefined got as icon value. Expected array or object.',
)]
JS: 2023-03-19 21:43:38 [error X 2][http://localhost:80/elementor/wp-content/plugins/elementor/assets/js/editor.min.js?ver=3.11.5:3:1087291] Cannot read properties of null (reading 'getBoundingClientRect')
JS: 2023-03-29 10:08:23 [error X 2][http://localhost:80/elementor/wp-content/plugins/elementor-pro/assets/js/editor.min.js?ver=3.12.0:2:63837] Cannot read properties of undefined (reading 'createTemplate')
JS: 2023-03-29 10:27:09 [error X 40][http://localhost:80/elementor/wp-content/plugins/elementor/assets/js/df16c9d56464dd4f0800.bundle.min.js:2:7826] Cannot read properties of null (reading 'dataset')

== Elementor - Compatibility Tag ==

Elementor Pro: Incompatible
== Elementor Pro - Compatibility Tag ==
@Michaelgimii Michaelgimii added the status/awaiting_triage Indicates when an Issue, Pull Request, or Discussion awaits to be triaged. label Mar 30, 2023
@nicholaszein nicholaszein changed the title In the menu cart widget, the icon is not in the center (vertical alignment) 🐞 Bug Report: The icon in the Menu Cart widget does not vertically align to the center Mar 30, 2023
@nicholaszein nicholaszein added bug Indicates a bug with one or multiple components. product/pro Indicates if the referenced component is part of the Elementor Pro plugin. integration/woocommerce References any component related to Elementor Pro’s WooCommerce Builder. type/styles Indicates when a topic is related to the styles or design of a component. widget/wc/menu-cart References the WooCommerce Menu Cart widget (Pro) often referred as the Mini Cart. and removed status/awaiting_triage Indicates when an Issue, Pull Request, or Discussion awaits to be triaged. labels Mar 30, 2023
@nicholaszein
Copy link
Member

Hello @Michaelgimii!

Thank you for submitting your issue! 🙏

🏷️ This issue has been labeled and will be forwarded to the team for validation and possible solution. Please keep in mind that we can't provide any ETA on when this issue could be fixed if it is validated. We ask for patience.

Best regards

@Michaelgimii
Copy link
Author

Hi @nicholaszein

How can I add system in as a toggle option?

@nicholaszein
Copy link
Member

Hi @Michaelgimii,

I'm not sure I understand you. What do you mean?

@Michaelgimii
Copy link
Author

@nicholaszein

How can I display system info like this so that it takes up less space?

s

@nicholaszein
Copy link
Member

@Michaelgimii

Oh, got it! You can use the following code:

<details>
<summary>System Info</summary>

 ` ` `txt

<!--- Your text goes here --->

 ` ` `

</details>

You can use the ``` (without spaces) to make it a code box, where everything in between the ``` will be converted to code, and the txt is the language of the code you're showing (could be used for CSS, or PHP like so ```css; ```php). 😉

@nicholaszein nicholaszein added the mod* [Temp.] For internal use only. label Apr 18, 2023
@nicholaszein nicholaszein added the mod/b* [Temp.] For internal use only. label Jun 3, 2024
@wslwconnect
Copy link

hi @nicholaszein
Any idea when this will be fixed?

@nicholaszein nicholaszein added this to the 3.28.0 milestone Mar 1, 2025
@nicholaszein nicholaszein added status/merged Indicates when a Pull Request has been merged to a Release. type/layout Indicates when a topic is related to a component’s Layout. widget/button References the Button widget. type/experiment Indicates when a topic is related to a Stable or Unstable Feature or Experiment. component/inline-font-icons References the Inline Font Icons experimental feature. mod/v* [Temp.] For internal use only. release/3.28 [Temp.] References Issues or Discussions related to Elementor and Elementor Pro version v3.28. labels Mar 1, 2025
@nicholaszein nicholaszein changed the title 🐞 Bug Report: The icon in the Menu Cart widget does not vertically align to the center ✅ 🐞 Bug Report: The icon in the Menu Cart widget does not vertically align to the center Mar 18, 2025
@nicholaszein nicholaszein added the solved Indicates that an Issue has been Solved, or a Feature Request has been Released. label Mar 18, 2025
@nicholaszein
Copy link
Member

Hi everyone!

We have great news! 🙌

📢 We're happy to announce that this feature was released with Elementor v3.28.0! 🥳

Now all button icons across different Elementor elements, including the Menu Cart widget are correctly aligned vertically! 💪

✅ 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 Mar 18, 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. component/inline-font-icons References the Inline Font Icons experimental feature. integration/woocommerce References any component related to Elementor Pro’s WooCommerce Builder. mod/b* [Temp.] For internal use only. mod/v* [Temp.] For internal use only. mod* [Temp.] For internal use only. product/pro Indicates if the referenced component is part of the Elementor Pro plugin. release/3.28 [Temp.] References Issues or Discussions related to Elementor and Elementor Pro version v3.28. solved Indicates that an Issue has been Solved, or a Feature Request has been Released. status/merged Indicates when a Pull Request has been merged to a Release. type/experiment Indicates when a topic is related to a Stable or Unstable Feature or Experiment. 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. widget/wc/menu-cart References the WooCommerce Menu Cart widget (Pro) often referred as the Mini Cart.
Projects
None yet
Milestone
3.28.0
Development

No branches or pull requests
3 participants
@Michaelgimii @nicholaszein @wslwconnect