Insert and show whitespace in ADF Faces Components (panelBox, showDetailItem etc)

This post is about a small trick
How to show whitespace in ADF Faces component properly ?
Recently i found a question on OTN about this
 How can I and spaces in the text property of a showDetailItem?
so thought to document it here for future reference

There is one more post about showing whitespace , check it
Showing white-spaces properly in ADF table column- 11g & 12c

Sometimes we need to insert some whitespace in between of some text as panelBox name, tab name in showDetailItem etc
In this case space appears in page editor but it doesn't appear on page and you can not put spacer at these points because there is only one component



Suppose you have a panelBox and requirement is to show Oracle    ADF as it's header text . In this case providing space in propertyInspector doesn't work , HTML entity for space   also doesn't work because of no DOCTYPE declaration

See here i added normal spaces in property of panelBox

 But is doesn't work :(

Now what to do ?
After lots of hit and tries finally i found that it work with equivalent entity number for  
and this magic number is  -  
So tried this -

 <af:panelBox text="Oracle&#160;&#160;&#160;&#160;&#160;&#160;&#160;ADF" id="pb1">
                    <f:facet name="toolbar"/>
                </af:panelBox>

and output is

This is the small trick , sometimes you may need this :)
Cheers, Happy Learning :)

Showing white-spaces properly in ADF table column- 11g & 12c

Hello All,
This posts talks about a requirement of showing white-spaces before any text/number in an af:table
Suppose i have , form and table of a ViewObject on page

Case 1- both table and form are editable , in this case you can see that white spaces are properly visible in both form and table

but normally in applications we have a read-only table and editable form so in this case you can see that white-spaces are not visible in table

But sometimes we need to show spaces in table same as in form so to do this select that field and go to property inspector and select component

Now set it's contentStyle (for input component as- af:inputText) or inlineStyle (for display component as- af:outputText)- white-space:pre;

now run your page and see-

 Cheers :-)