Unable to delete an entry from the cog dropdown in composer

Contribute UX

AI-generated summary

The original poster, b481, was struggling to delete the “Hide Details” entry from the cog dropdown in the composer through CSS. They tried using the element’s selector but were unable to achieve the desired result without affecting other lists on the site.

Johani suggested using an attribute selector to target the element’s unique data-value attribute, providing the following code:

.d-editor-button-bar [data-value="insertDetails"] {
  display: none;
}

This solution worked for b481, who thanked Johani for their help.

1

I’ve been trying to get rid of the “Hide Details” entry from the cog dropdown in the composer, as it’s seldom used on my forum. However, I’m having a hard time trying to do so.

After finding the entry and it’s selector in the Chrome Developer tools, I tried this

div.select-kit-body > ul.select-kit-collection.ember-view  > li:nth-child(1)
{display:none}

However, that would take the first entry off of much of the lists on the entire site, so I tried to expand it based on the selector of the element above it (highlighted in blue).

deq
deq706×280 20.2 KB

resulting in this.

button.select-kit-header.single-select-header.btn-default.dropdown-select-box-header.btn.no-text.btn-icon.ember-view > div.select-kit-body > ul.select-kit-collection.ember-view  > li:nth-child(1)
{display:none}

However, this doesn’t work and just brings back the entry I’m trying to get rid of. I should add I’ve also tried it without the “ember-view” at the end, same result.

If anyone could help with or has prior experience with this, I’d be very grateful.

2

That element doesn’t have a unique class since this hasn’t come up before.

It does have a unique attribute, though, so you can use that to create an attribute selector that only targets that element like so

.d-editor-button-bar [data-value="insertDetails"] {
  display: none;
}
3 Likes
3

this worked! thanks a million @Johani.

1 Like