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.

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

Different behavior when there is no Tab icon (preview vs website) #25902

Open
6 tasks done
vladninja opened this issue Apr 29, 2024 · 0 comments
Open
6 tasks done

Different behavior when there is no Tab icon (preview vs website) #25902

vladninja opened this issue Apr 29, 2024 · 0 comments
Labels
status/awaiting_triage Indicates when an Issue, Pull Request, or Discussion awaits to be triaged.

Comments

@vladninja
Copy link
Contributor

vladninja commented Apr 29, 2024

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

There is a problem when there is no icon for the tabs on the website.
In the preview editor there is a CSS property which prevents that bug:
.elementor-widget-n-tabs .e-n-tab-title .e-n-tab-icon:empty
On the webiste it is the same but the rendering result in the DOM is different.
In the preview there is an empty div for the icon, but on the website there is a newline separator. That means that on the website the CSS rule for the empty state is ignored.
The problem is on the line https://github.com/elementor/elementor/blob/main/modules/nested-tabs/widgets/nested-tabs.php#L1109
so new lines was added and the DOM element is not an empty on the website.
image

Steps to reproduce

  1. Place a nested Tab widget
  2. Save the changes

Expected behavior

The 'e-n-tab-icon' element must be empty and the CSS rule for .elementor-widget-n-tabs .e-n-tab-title .e-n-tab-icon:empty must be applied

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

== Server Environment ==
	Operating System: Linux
	Software: Apache/2.4.54 (Debian)
	MySQL version: MySQL Community Server - GPL v8.0.31
	PHP Version: 7.4.33
	PHP Memory Limit: 256M
	PHP Max Input Vars: 1000
	PHP Max Post Size: 8M
	GD Installed: No
	ZIP Installed: Yes
	Write Permissions: All right
	Elementor Library: Connected

== WordPress Environment ==
	Version: 6.2.4
	Site URL: http://localhost:8083
	Home URL: http://localhost:8083
	WP Multisite: No
	Max Upload Size: 2 MB
	Memory limit: 40M
	Max Memory limit: 256M
	Permalink Structure: /%postname%/
	Language: en_US
	Timezone: 0
	Admin Email: wwww@0pppp.com
	Debug Mode: Active

== 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/124.0.0.0 Safari/537.36

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

	Elementor Pro
		Version: 3.20.1
		Author: Elementor.com

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

== Integrations ==
	


== Elementor Experiments ==
	Improved Asset Loading: Active
	Improved CSS Loading: Active
	Inline Font Icons: Active
	Additional Custom Breakpoints: Active
	admin_menu_rearrangement: Inactive by default
	Flexbox Container: Active
	Upgrade Swiper Library: Active
	Grid Container: Active
	Default to New Theme Builder: Active
	Hello Theme Header & Footer: Active
	Editor Top Bar: Inactive
	Optimized Gutenberg Loading: Active by default
	Build with AI: Active by default
	Landing Pages: Active
	Nested Elements: Active
	Lazy Load Background Images: Active
	Optimize Image Loading: Active by default
	Notes: Active
	Display Conditions: Active
	Form Submissions: Active
	Menu: Active
	Taxonomy Filter: Inactive by default


== Log ==
	


== Elementor - Compatibility Tag ==
	
	Elementor Pro: Compatibility not specified

== Elementor Pro - Compatibility Tag ==

Agreement

  • I agree that my issue may be closed without action if it doesn't meet all the requirements.
@vladninja vladninja added the status/awaiting_triage Indicates when an Issue, Pull Request, or Discussion awaits to be triaged. label Apr 29, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
status/awaiting_triage Indicates when an Issue, Pull Request, or Discussion awaits to be triaged.
Projects
None yet
Development

No branches or pull requests

1 participant