[Resolved] Toolset Admin CSS messes up button display in Gravity Forms 2.5

[Author]

Posts

[Robert]

I love the Toolset plugin and the direction that you're taking with integrating into Gutenberg. Keep up the good work!

I am filing a quick bug report here about a WordPress admin CSS conflict with the new Gravity Forms 2.5. When Toolset is installed, it has some renegade CSS that forces the display of all [data-icon] text, which clutters and messes up the display of the Gravity Forms field buttons: hidden link

I've set up a quick test site so that you can see the bug in action!

What it should look like: hidden link
After Toolset is activated (notice the extra text on the buttons on the right): hidden link

I filed a bug report with Gravity Forms and this is what they reported:

-----

Hi Robert,

Thanks for that! It's definitely coming from onthegosystems-icons.css; this particular line is the issue:

[data-icon]::before {
content: attr(data-icon);
}

it's basically taking the data-icon and making it visible, possibly for WPML purposes, since there's a whole block of content for displaying those coming from ToolSet:

[data-icon]::before, .icon-access::before, .icon-access-logo::before, .icon-bootstrap::before, .icon-bootstrap-logo::before, .icon-bootstrap-original-logo::before, .icon-bootstrap-pagination::before, .icon-breadcrumbs::before, .icon-btn-dropdowns::before, .icon-buttons::before, .icon-conditional-alert::before, .icon-conditional-if::before, .icon-content-template::before, .icon-cred::before, .icon-cred-logo::before, .icon-input-groups::before, .icon-labels::before, .icon-layouts::before, .icon-layouts-genesis::before, .icon-layouts-genesis-logo::before, .icon-layouts-logo::before, .icon-list-group::before, .icon-many-to-many::before, .icon-module::before, .icon-module-logo::before, .icon-navbar::before, .icon-one-to-many::before, .icon-one-to-one::before, .icon-packager::before, .icon-packager-logo::before, .icon-panels::before, .icon-toolset::before, .icon-toolset-blocks::before, .icon-toolset-export::before, .icon-toolset-genesis-logo::before, .icon-toolset-logo::before, .icon-toolset-map::before, .icon-toolset-map-logo::before, .icon-types::before, .icon-types-logo::before, .icon-views::before, .icon-views-logo::before, .icon-wells::before, .icon-wpml-logo::before {
display: inline-block;
font-family: "onthegosystems-icons";
font-style: normal;
font-weight: normal;
font-variant: normal;
line-height: 1;
text-decoration: inherit;
text-rendering: optimizeLegibility;
text-transform: none;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
}

I'd suggest opening that up as a ticket with Toolset.

[Waqar]

Hi Robert,

Thank you for contacting us and glad that you like the new direction Toolset is heading.

During troubleshooting, I was able to confirm that this conflict with Toolset's CSS code in the admin area is already reported.

I've updated this report in the context of the Gravity Forms plugin, to our internal ticket as well.

For now, a workaround can be to override those styles, using some custom code:

add_action('admin_head', 'my_custom_CSS');
 
function my_custom_CSS() {
	echo '<style>
	.gform-admin [data-icon]:before {
		display: none;
	}
	</style>';
}

The above code snippet can be included through either Toolset's custom code feature ( ref: https://toolset.com/documentation/adding-custom-code/using-toolset-to-add-custom-code/ ) or through the active theme's "functions.php" file.

regards,
Waqar