View Full Version : Accordian Header Header Gradient?

7 Feb 2014, 7:30 AM
I'm finding that a ui for a panel that renders a gradient background in IE does not render in FF as part of an accordian layout. In this case the $base-color is rendered and the ui is ignored. Anyone know why??

any advice appreciated!!!


Gary Schlosberg
11 Feb 2014, 5:54 PM
I haven't heard of that kind of issue with Firefox. Can you post your panel UI?

12 Feb 2014, 6:52 AM
Seems to default to accordian CSS Vars which don't have header background gradients.

@include extjs-panel-ui(
$ui-label: 'citiriskfixedpanel',
$ui-header-color: #000000,
$ui-header-background-gradient: color-stops(#f9f9fe,#f1f4f9,#eef1f6,#eaedf2,#d6d9de),
$ui-border-width: 1px,
$ui-header-padding: 5px,
$ui-body-border-width: 1px,
$ui-body-border-color: #CCCCCC,

Gary Schlosberg
13 Feb 2014, 3:18 PM
I see, I guess header gradients aren't supported yet for accordion panels. Have you tried using CSS to create it?

14 Feb 2014, 4:09 AM
thanks Gary.

what's odd that the gradient is preserved in IE but not in FF - probably due to image slicing I guess. My CSS skills aren't at that level. Got any samples?


Gary Schlosberg
14 Feb 2014, 12:57 PM
I threw the accordion example from the docs into a Fiddle and added some CSS I found:

Click on the icon at lower left to see the acc.css file. Hopefully that's enough to get you going to where you need to be.