Crocoblock / suggestions

The suggestions for CrocoBlock project
191 stars 78 forks source link

JetTabs Classic Accordion Dynamic Icon not appearing #4498

Open remygfx opened 2 years ago

remygfx commented 2 years ago

Describe the bug When using JetTabs (2.1.14) with the Dynamic data add-on (1.3.3) , the custom icons specified in metafields specified in the JetEngine CPT do not appear in the toggl control section of the classic accordion widget

To Reproduce Steps to reproduce the behavior:

  1. Create a CPT with Icon Picker meta fields specifying the open and closed states of the classic accordion, a repeater field for the tab titles and content (in this case accordion-closed and accordion-open )
  2. Instantiate an JetTabs classic accordion widget on the single post template
  3. Assign the accordion-closed metafields under the Dynamic Settings of the widget the ELementor editor in the single post template Style the icon color so that it will appear on the default icon background (in my case white)
  4. the text and other tab content appears but the icon assigned is ignored

Expected behavior If no custom icons are assigned at least the default + and - icons should appear. If a custom icon is assigned (in this case using the JetEngine Iconpicker field) it should appear as expected in the accordion icon toggle control. It would seem that merely assigning a dynamic source makes any icon not appear as expected/ is ignored, at the very least the dynamic widget should always have a fallback to the default + and - icons, as it stand the accordion is somewhat useless a sthere is no visual indication that the object is meant to be a collapsible accordion per user expectations.

Screenshots Webkit browser output

crocblok_jtabs_dyn_icon_issue00

CPT fields

crocblok_jtabs_dyn_icon_issue01

Elementor Dynamic Settings crocblok_jtabs_dyn_icon_issue02

Plugin/Module Versions

crocblok_jtabs_dyn_icon_issue03

Desktop (please complete the following information):

Smartphone (please complete the following information):

Additional context two different (Hostinger/ NGIX and Siteground/Apache webserver) installs of WP display the behavior Using both default OceanWP theme and Elementor Hello theme (shown)

remygfx commented 2 years ago

I've also included the iconpicker metafields inside the repeater (which i didn't do above) and made sure that Font Awesome Support is enabled in Elementor settings, tried differing icons, rebuild css etc, all I can get is a rectangle placeholder icon crocblok_jtabs_dyn_icon_issue04

remygfx commented 2 years ago

Ok applying the following custom css to the tabs widget in elementor seems to fix it

selector i{ font-family: "Font Awesome 5 Free" !important; font-weight: 900 !important; font-style: normal; }

Nevertheless, the widget code should be selecting the proper library, seems to be a legacy code issue imo