Skip to Main Content

Java Development Tools

Announcement

For appeals, questions and feedback about Oracle Forums, please email oracle-forums-moderators_us@oracle.com. Technical questions should be asked in the appropriate category. Thank you!

How to implement styleClass to af|spacer

User_8PMDVAug 19 2021

Hello,
I am using jDeveloper 12.2.1.3 to develop an ADF application. When I tried to add styleClass to adf spacer, the styleClass has never been rendered to the DOM as indicated in the browser dev tool. I also tried to wrap the af|spacer inside af|outputText without luck. I am wondering how I can implement the styleClass to af|spacer tag.

Thanks

Comments

Timo Hahn

Can you tell us what you would like to skin (or style) on a more or less invisible component?
Have you tried to create a style class and add the style class to the spacer?

Timo

User_8PMDV

Thanks Timo. My plan is to add styleClass to change the spacer height according to device size, say 20px for web and 2px for mobile. I have added the styleClass to af|space and the related skin files without any change. Such as <af:spacer id="s1" styleClass="spacer" />

Timo Hahn

First, an af:spacer component can't be skinned. From the docs
af:spacer
The component cannot be skinned.
So, skinning won't work.
have you tried to add the styling to a component after the spacer?
What is the css you tried?
Timo

Dimitar Dimitrov

<af:spacer styleClass="MySpacer"/> does not render a "class" attribute in the generated HTML, so you are not able to do ADF skinning for HTML class="MySpacer". The resulting HTML will be something like:

<div>
  <span id="j_idt6"></span>
</div>

In order to add a "class" attribute to the generated HTML you can implement a workaround by adding a pass-through attribute to the af:spacer's component, for example:

<af:spacer>
  <af:passThroughAttribute name="class" value="MySpacer"/>
</af:spacer>

or even more simpler:

<f:view xmlns:p="http://xmlns.jcp.org/jsf/passthrough" ... >
  ...
  <af:spacer p:class="MySpacer"/>

It will generate the following HTML:

<div>
  <span class="MySpacer" id="j_idt6"></span>
</div>

and you can use a standard (non-ADF) CSS rule for it, for example:

.MySpacer { height:20px; display:block }

Of course, you should refine the CSS selector above with @media rules in order to conditionally change the spacer size depending on the target device.
Dimitar

1 - 4

Post Details

Added on Aug 19 2021
4 comments
90 views