1

How could I expand the space between the tabs of a Primefaces AccordionPanel ?

rapt
  • 11,810
  • 35
  • 103
  • 145

1 Answers1

3

According to my Chrome web developer toolset,

enter image description here

you just have to change the margin-top of the .ui-accordion .ui-accordion-header.

E.g., to 20px:

.ui-accordion .ui-accordion-header {
    margin-top: 20px;
}

See also:

Community
  • 1
  • 1
BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • Thanks BalusC! I also had to override the display property: `display: block;` since that div that your screenshot highlights was set to `display: none;` (which resulted in no space between tabs). One problem though: when I close tabs after I opened them, the div returns to be `display: none;`, i.e. no space. Probably by the javascript. How can I keep that space displayed after I close a tab?? – rapt Feb 01 '13 at 03:44
  • Hmm right, totally overlooked that. Better set the top margin on the accordion header. E.g. `.ui-accordion .ui-accordion-header { margin-top: 10px; }`. Does that what you want? – BalusC Feb 01 '13 at 03:57
  • Close to perfect. It's what I want, except for the uppermost tab, for it I don't want that `margin-top` space... what I tried to do: defined css style: `.ui-accordion .ui-accordion-header .do-nothing { margin-top: 0; }`, and on the first `p:tab` of `p:accordionPanel` I defined `styleClass="do-nothing"` - however I still get the space above the first accordion tab.. what am I doing wrong here? – rapt Feb 01 '13 at 05:06
  • 1
    You should use `titleStyleClass` attribute and `.ui-accordion .ui-accordion-header.do-nothing` selector respectively. – BalusC Feb 01 '13 at 10:43
  • I changed the attribute of `p:tab` (of `p:accordionPanel`) to `titleStyleClass="do-nothing"` but it changed nothing. Firebug still shows that this tab has `margin-top: 10px;`. Is there some bug? Using latest stable primefaces. – rapt Feb 01 '13 at 14:22
  • 1
    Apparently you haven't fixed the selector. Note that the `.do-nothing` should be set on the element matching `.ui-accordion.header` and not as a child of it. See my previous comment for the proper selector (just remove the space). – BalusC Feb 01 '13 at 14:23
  • That made the difference! I wasn't aware of the difference that the space in the CSS selector can make. Thanks a lot! You solved the problem and also taught me something new about CSS. – rapt Feb 01 '13 at 14:28
  • 1
    You're welcome. A space in CSS selector indicates a child. See also http://www.w3.org/TR/CSS2/selector.html#pattern-matching You could by the way also have used the `:first-child` pseudoselector without the need for a new class, but that doesn't work in IE6/7 (which shouldn't be a problem if you don't support those browsers anyway). – BalusC Feb 01 '13 at 14:30
  • Thanks! Also for the `:first-child` tip. – rapt Feb 01 '13 at 14:52