Gear icon not visible in manage display drupal 9

Same situation for me

Drupal 9.5.7

The issue comes from https://stackpath.bootstrapcdn.com/bootstrap/scss/_reboot.scss

*::after {
  box-sizing: border-box; // 1
}

Applied on
<div class="field-plugin-settings-edit-wrapper">.......</div>

changed to drupal core as the project as move to drupal core

working on it

Not reproducible. Could you please share the steps to reproduce in detail?

Not able to reproducible it attaching screenshot below. can you please share the steps in brief so to that i can look and fix it.

Hello @Santosh_Verma
When Claro is enabled, the gear icons are not displayed.
The issue comes from https://stackpath.bootstrapcdn.com/bootstrap/scss/_reboot.scss

*::after {
box-sizing: border-box; // 1
}

In you case, does your drupal also uses this file _reboot.scss?

#superlolo95, The file "bootstrap/scss/_reboot.scss" is not part of the default installation of Claro theme in Drupal 9.5.x.

Hello @Mav_fly, @superlolo95.

The issue is not with default installation.
The issue may be due to the style file's weight and style priority.

May I know your method to add Bootstrap for the Claro Admin theme?

This issue doesn't seem to be reproducible. Can you please share the steps you are taking? Can you also test on a fresh install?

Hello,
First answer
I am using the bootstrap5 theme (added using composer) and the bootstrap_library (Version : 2.0.2) using a CDN.
If I disable the use of a CDN in bootstrap_library configuration page, the issue disapears.
As the issue comme from https://stackpath.bootstrapcdn.com/bootstrap/scss/_reboot.scss I guess this is the reason why not using a CDN is fixing the issue.

I am facing exactly the same issue. I've temporarily added CSS Asset Injector to get around it, but it should be fixed in the theme itself.

.field-plugin-settings-edit {
  width: auto !important;
}

The original CSS contains this code:

.field-plugin-settings-edit {
    width: var(--space-m); // this is breaking the gear icon
    margin: 0;
    padding: 1px 0.5rem;
}

Line 55 of /core/themes/claro/css/theme/field-ui.admin.css.

I am facing the issue on Drupal & Claro 10.1.6

Checked "Manage form display" from Drupal+Claro version 10.1.6, and its showing the gear icons properly (see attached screenshots). I checked it from both Ubentu Firefox and Chrome. May be this is a browser related issue. Which browser and OS are you using?

@sijumpk Chrome 120.0.6099.62 (Official Build) (arm64), MacOS Ventura 13.6.2

Steps to reproduce without a contrib theme are needed.

We'll have to close this issue as won't fix as we have the situation here that CSS styles from a contrib theme/module are leaking into core (claro).

That said I'd suggest you to open an issue in the bootstrap theme/module to address this issue instead.

Thanks!

I found that having box-sizing: border-box causes the gear to not display. Setting the value to initial worked for me.

I had similar issue and in my case the reason was ckeditor5-stylesheets in the front-end custom theme, which was added in the admin claro theme when on manage display; and with that library, the reboot bootstrap was comming in.