Discussions
Categories
- 197K All Categories
- 2.5K Data
- 546 Big Data Appliance
- 1.9K Data Science
- 450.8K Databases
- 221.9K General Database Discussions
- 3.8K Java and JavaScript in the Database
- 31 Multilingual Engine
- 552 MySQL Community Space
- 479 NoSQL Database
- 7.9K Oracle Database Express Edition (XE)
- 3.1K ORDS, SODA & JSON in the Database
- 556 SQLcl
- 4K SQL Developer Data Modeler
- 187.2K SQL & PL/SQL
- 21.4K SQL Developer
- 296.4K Development
- 17 Developer Projects
- 139 Programming Languages
- 293K Development Tools
- 110 DevOps
- 3.1K QA/Testing
- 646.1K Java
- 28 Java Learning Subscription
- 37K Database Connectivity
- 158 Java Community Process
- 105 Java 25
- 22.1K Java APIs
- 138.2K Java Development Tools
- 165.3K Java EE (Java Enterprise Edition)
- 19 Java Essentials
- 162 Java 8 Questions
- 86K Java Programming
- 81 Java Puzzle Ball
- 65.1K New To Java
- 1.7K Training / Learning / Certification
- 13.8K Java HotSpot Virtual Machine
- 94.3K Java SE
- 13.8K Java Security
- 205 Java User Groups
- 24 JavaScript - Nashorn
- Programs
- 468 LiveLabs
- 39 Workshops
- 10.2K Software
- 6.7K Berkeley DB Family
- 3.5K JHeadstart
- 5.7K Other Languages
- 2.3K Chinese
- 175 Deutsche Oracle Community
- 1.1K Español
- 1.9K Japanese
- 233 Portuguese
How to implement styleClass to af|spacer

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
Answers
-
Timo Hahn Senior Principal Technical Consultant - Oracle ACE Director Member, Moderator Posts: 38,587 Red Diamond
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
-
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 Senior Principal Technical Consultant - Oracle ACE Director Member, Moderator Posts: 38,587 Red Diamond
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
-
<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