[CSS] Show note when editing item

❓Help
#1

I usually have all notes set to hidden. But whenever I click on an item (to edit it), I want the corresponding note to be displayed in full, regardless of the current visibility setting.

This exceeds my limited CSS knowledge … could someone please help me?

#2

Found this topic, which helped me produce this:

/* Always show note of currently selected item. */
.Node-self:not(.is-contentRendered):not(.is-noteEmpty) > .Node-noteContainer
{
    display: block !important;
}

It works for the note visibility options Show and Hide, but not for 1st line. Does anyone know how I can make it work for all note visibility options?

#3

.Node-self:not(.is-contentRendered):not(.is-noteEmpty) > .Node-noteContainer
{
display: block !important;

}

.Node-self:not(.is-contentRendered):not(.is-noteEmpty) > .Node-noteContainer .Node-renderedNote {
height: auto !important;
}

#4

That did it - thanks a lot, @Piotr!

I narrowed down the selectors to .is-hidingNote and .is-showingNoteFirstLine and added some comments to make the intention more clear for potential future readers:

/* Show note of currently SELECTED (highlighted) item, when notes are hidden. */
.Node-self.is-hidingNote:not(.is-contentRendered):not(.is-noteEmpty) > .Node-noteContainer
{
  display: block !important;
}

/* Show note of currently SELECTED (highlighted) item, when notes are reduced to first line. */
.Node-self.is-showingNoteFirstLine:not(.is-contentRendered):not(.is-noteEmpty) > .Node-noteContainer .Node-renderedNote
{
  display: block !important;
  height: auto !important;
}
1 Like