Open hoiast opened 2 years ago
I have the same issue, only difference for me is the first child has the border but the rest do not
There is also another bug when the last Tab contains another accordion. Every Tab in the inner Accordion has rounded edges:
code that makes problems: (is in the themes files)
.p-accordion .p-accordion-tab .p-accordion-header .p-accordion-header-link {
border-radius: 0;
}
.p-accordion .p-accordion-tab .p-accordion-content {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.p-accordion
.p-accordion-tab:not(:first-child)
.p-accordion-header
.p-accordion-header-link {
border-top: 0 none;
}
.p-accordion
.p-accordion-tab:not(:first-child)
.p-accordion-header:not(.p-highlight):not(.p-disabled):hover
.p-accordion-header-link,
.p-accordion
.p-accordion-tab:not(:first-child)
.p-accordion-header:not(.p-disabled).p-highlight:hover
.p-accordion-header-link {
border-top: 0 none;
}
.p-accordion
.p-accordion-tab:first-child
.p-accordion-header
.p-accordion-header-link {
border-top-right-radius: 15px;
border-top-left-radius: 15px;
}
.p-accordion
.p-accordion-tab:last-child
.p-accordion-header:not(.p-highlight)
.p-accordion-header-link {
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}
.p-accordion .p-accordion-tab:last-child .p-accordion-content {
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}
a possible solution would be:
.p-accordion > .p-accordion-tab .p-accordion-header .p-accordion-header-link {
border-radius: 0;
}
.p-accordion > .p-accordion-tab:not(:last-child) .p-accordion-content {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.p-accordion >
.p-accordion-tab:not(:first-child) >
.p-accordion-header
.p-accordion-header-link {
border-top: 0 none;
}
.p-accordion >
.p-accordion-tab:not(:first-child) >
.p-accordion-header:not(.p-highlight):not(.p-disabled):hover
.p-accordion-header-link,
.p-accordion >
.p-accordion-tab:not(:first-child) >
.p-accordion-header:not(.p-disabled).p-highlight:hover
.p-accordion-header-link {
border-top: 0 none;
}
.p-accordion >
.p-accordion-tab:first-child >
.p-accordion-header
.p-accordion-header-link {
border-top-right-radius: 15px;
border-top-left-radius: 15px;
}
.p-accordion >
.p-accordion-tab:last-child >
.p-accordion-header:not(.p-highlight)
.p-accordion-header-link {
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}
.p-accordion > .p-accordion-tab:last-child > .p-accordion-content {
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}
rules like the following cause problems
.p-accordion
.p-accordion-tab:not(:first-child)
.p-accordion-header
because it also matches the inner accordion-tabs
The solution:
.p-accordion >
.p-accordion-tab:not(:first-child) >
.p-accordion-header
this specifies that only the direct child element matches and not a child of a child
Describe the bug
I am not sure about other themes, but with arya-orange there is a minor issue regarding nested accordions. A CSS rule is used to prevent duplicate borders for regular accordions, but it wrongly selects the first accordion header of tabs that are not always a first child. The 'culprit' :
A quick solution that I use is to include a new CSS Rule to re-add top borders to these first tabs on nested accordions:
Reproducer
https://codesandbox.io/s/quizzical-knuth-8b3odz
PrimeVue version
3.15.0
Vue version
3.x
Language
ALL
Build / Runtime
Vite
Browser(s)
Chrome 103
Steps to reproduce the behavior
Note: The only exceptions are the first tabs of nested accordions located on the first tab of their parent accordions through all nesting levels.
Expected behavior
First tabs on nested accordions will lack the top border.