[CONTEDIT-78] CollapsibleCompositeFieldDefinition styling works only for last one Created: 31/Mar/17  Updated: 11/Apr/17  Resolved: 11/Apr/17

Status: Closed
Project: Content Editor
Component/s: None
Affects Version/s: None
Fix Version/s: None

Type: Bug Priority: Neutral
Reporter: Mariusz Chruscielewski Assignee: Unassigned
Resolution: Duplicate Votes: 0
Labels: None
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Issue Links:
Relates
relates to CONTEDIT-87 Multiple collapsible fields aren't fo... Closed
supersession
is superseded by CONTEDIT-74 Adding multiple collapsable meta data... Closed
Template:
Acceptance criteria:
Empty
Task DoD:
[ ]* Doc/release notes changes? Comment present?
[ ]* Downstream builds green?
[ ]* Solution information and context easily available?
[ ]* Tests
[ ]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Bug DoR:
[ ]* Steps to reproduce, expected, and actual results filled
[ ]* Affected version filled
Date of First Response:

 Description   

Hi,

when I add more than one CollapsibleCompositeFieldDefinition to app, styling works only for last one, it's because in CSS style is applied to :last-of-type.

First one works (you can fold/unfold) but without any styling.



 Comments   
Comment by Stef te Winkel [ 05/Apr/17 ]

I applied a quick patch (added and not editted, not to get overridden by new release of css.
It's a fix for our specific set-up, where the last but also the one before last is a collapsible field.
So not very robust at all...

.app-content-editor .content-editor-panel .outline-form .v-form-field-section:nth-last-of-type(2) {
    border: 1px solid #c1c1c1;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 0 11px;
}

.app-content-editor .content-editor-panel .outline-form .v-form-field-section:nth-last-of-type(2) .v-form-field-label {
    display: none;
}

.app-content-editor .content-editor-panel .outline-form .v-form-field-section:nth-last-of-type(2) .v-slot-toggle-button {
    padding: 0 4px;
}

.app-content-editor .content-editor-panel .outline-form .v-form-field-section:nth-last-of-type(2) .v-slot-toggle-button .toggle-button {
    padding: 15px;
    margin: 0 -15px;
    width: 100%;
    text-align: left !important;
    text-transform: none;
    background-color: transparent;
    color: #c1c1c1;
    outline: none;
}

.app-content-editor .content-editor-panel .outline-form .v-form-field-section:nth-last-of-type(2) .v-slot-toggle-button .toggle-button::after {
    font-family: MagnoliaIcons, fantasy;
    content: "\e609";
    color: #c1c1c1;
    transform: rotateX(0) scale(1.25);
    position: absolute;
    right: 15px;
    font-size: 16px;
    transition: transform 200ms;
}

.app-content-editor .content-editor-panel .outline-form .v-form-field-section:nth-last-of-type(2) .collapsed .toggle-button::after {
    transform: rotateX(180deg) scale(1.25);
}

.app-content-editor .content-editor-panel .outline-form .v-form-field-section:nth-last-of-type(2) .toggle-content {
    margin-bottom: 15px;
    border-top: 1px solid transparent;
    box-shadow: 0 -5px 0 -4px #efefef;
}

I also tried with :nth-last-child(-n+2) but couldn't get it to work

If somehow we could get an extra class in the field to create a more specific selector, a more robust solution would be possible

Generated at Mon Feb 12 00:16:51 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.