Skip to Main Content
Forums

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!

Interested in getting your voice heard by members of the Developer Marketing team at Oracle? Check out this post for AppDev or this post for AI focus group information.

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
#adf, #application-development-in-java, #jdeveloper-and-adf
4 comments
88 views
1 mention