Using CSS to change the height of af:panelBox header - can do ?

Question

Using JDev 11.1.1.3; want to change the render of the panelBox component; understand skinning is the way to do this ... so headed into the markup via Firebug, and by updating the settings in the browser, I can produce the results that I want, but having some difficulty finding the right selector settings in the application skin/CSS file. The markup contains the following ...
<div class="af_panelBox p_AFStretched" style=... height: auto; ...
...<div style=... height: 25px;
......<table class="af_panelBox_table p_AFCore p_AFDefault" ... style=height: 25px
...<div class="af_panelBox_center p_AFCore p_AFDefault" style=... top: 25px;
If I change the three references of 25px to 20px, I get the result I want, but if I add (using styles or ADF selectors) ...
.af_panelBox_center.p_AFCore.p_AFDefault {
top: 20px;
.af_panelBox_table {
height: 20px;
... to the application skin CSS, then the settings get essentially ignored, Firebug reporting my settings in the hierarchy, but overridden by ...
element.style {
top: 25px;
Thinking then that this 25px setting derives from a higher level setting, I work back up the div hierarchy, but the "af_panelBox p_AFStretched" div is where the panel box starts, and the height setting of auto there clearly isn't what I'm after.
I've heard others say that you can pretty much change anything with skinning - is this an exception or have I missed something ?
Thanks,
Edited by: robli on Sep 10, 2010 11:16 AM
Edited by: robli on Sep 10, 2010 11:17 AM
Edited by: robli on Sep 10, 2010 11:17 AM

Answer 1

Thanks Frank. I guess the question was more about whether this is something that can be changed (ie: height of the panel box header).
As noted in the original post, there appear to be three 25px settings in the markup that need to be changed (changing all 3 via Firebug confirms the render changes as required). Whether I use the ADF selectors or the styles in my skinning CSS I can't actually get to all three of these settings, because some of them aren't styled, but rather encoded in 'inline' div style settings. I did set the af|panelBox::center:core:default { top: 20px; } into the skin and retried it, but it doesn't change anything, because of what Firebug reports as element.style settings which override it & come from the <div class=.. style=top: 25px setting.
When the markup is created, it doesn't appear that the 20px skin setting is honored. Setting these three heights via the skin seems unsupported, but before concluding this, I wanted to inquire of the community.
Thanks,