SQL Developer Data Modeler

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" />

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