PDA

View Full Version : Accordian Header Header Gradient?



jeffbattershall
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!!!

Jeff

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?

jeffbattershall
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-border-color:#CCCCCC,
$ui-header-padding: 5px,
$ui-body-border-width: 1px,
$ui-body-border-color: #CCCCCC,
$ui-header-border-color:#cccccc,
$ui-header-inner-border-width:0px,
$ui-body-background-color:#FFFFFF,
$ui-header-font-weight:600
);

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?

jeffbattershall
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?

Jeff

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:
https://fiddle.sencha.com/#fiddle/3lj

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.