Intrusive Admin Styles

Hi,

I’ve been setting up a site using Food Store and everything has been going pretty smoothly so far. I did have to fix an issue with $post in the plugin but that was promptly pushed into an update and is no longer an issue.

Now I’m trying to use ACF on an unrelated admin page and I’m getting styles spilling over from admin.css, messing with the width of select2.

The original code in wp-content/plugins/food-store/assets/css/admins.css is:

css
.foodstore .form-table input[type=text],
.foodstore .form-table input[type=number],
.foodstore .form-table input[type=tel],
.foodstore .form-table input[type=email],
.select2-container {
  width: 400px !important;
}

It’s the last line in the selector which is bothering me. Why does this need to be !important? It wouldn’t be an issue if .select2-container was inside of .foodstore.

I’m sure I don’t need to go into why !important is bad practice, could you please update the stylesheet so that the selector in question looks like:

css
.foodstore .form-table input[type=text],
.foodstore .form-table input[type=number],
.foodstore .form-table input[type=tel],
.foodstore .form-table input[type=email],
.foodstore .select2-container {
  width: 400px !important;
}

This will avoid breaking UI from other plugins which also use select2 and should keep the intended functionality within your plugin.

I’ve made the change in my code but I’m all too aware that it will be lost when the plugin updates.

Also, I haven’t noticed any issues caused directly by the selector on line 17 but I’m sure that will fall under the same umbrella. Wrapping it in .foodstore would be appreciated!

Thanks for your time,

Govi