Forum Stats

  • 3,839,643 Users
  • 2,262,518 Discussions
  • 7,901,029 Comments

Discussions

Categories

How to implement styleClass to af|spacer

User_8PMDV
User_8PMDV Member Posts: 25 Green Ribbon
in JDeveloper and ADF

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

Tagged:
· Share on TwitterShare on Facebook

Answers

  • Timo Hahn
    Timo Hahn Senior Principal Technical Consultant - Oracle ACE Director Member, Moderator Posts: 38,596 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

    · Share on TwitterShare on Facebook
  • User_8PMDV
    User_8PMDV Member Posts: 25 Green Ribbon

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

    · Share on TwitterShare on Facebook
  • Timo Hahn
    Timo Hahn Senior Principal Technical Consultant - Oracle ACE Director Member, Moderator Posts: 38,596 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

    · Share on TwitterShare on Facebook
  • Dimitar Dimitrov
    Dimitar Dimitrov Member Posts: 921 Bronze Trophy
    edited Aug 22, 2021 10:25PM

    <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

    · Share on TwitterShare on Facebook