[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: |
|
||||||||||||||||
| 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.
.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 |