3

Good Evening, i want to know how to insert space between JSF components that lies in same <div> without using <h:outputText value="&#160;" /> i used it and in order to insert the desired space that i want i repeated these tag around 50 times! what are the alternative approaches to do that, these is the <div> :

<div style="width: 100%; font-size: 20px; line-height: 30px; background-color: gray"> <h:outputText value="&#150;" /> <h:outputLabel value="Notifications "> <h:graphicImage value="/resources/images/lunapic_136698680056094_2.gif" /> </h:outputLabel> /// insert space here <h:outputLink id="lnk" value="#"> <h:outputText value="Welcome,Islam"></h:outputText> </h:outputLink> <p:tooltip for="lnk"> <p:graphicImage value="/resources/images/sofa.png" /> </p:tooltip> </div>
Improve this question
2
  • What is wrong with <br/>? or &nbsp;, if you mean horizontal spacing Commented Apr 26, 2013 at 18:08
  • it inserts a new line, i want a space not a new line Commented Apr 26, 2013 at 18:09

2 Answers 2

Reset to default
10

This is normally to be achieved using CSS, e.g. via the margin property. CSS works on HTML and JSF is in the context of the current question merely a HTML code generator. You should ignore the JSF part in the question and concentrate on the JSF-generated HTML output in order to achieve the requirement. You can see it by rightclick, View Source in a webbrowser. If the HTML needs some altering, then change the JSF source code in such way that it generates exactly the desired HTML.

E.g.

<h:outputLabel value="Notifications" style="margin-bottom: 100px;">

(please note that using style is a poor practice; CSS should preferably be declared in a .css file which you import via <h:outputStylesheet> and reference via styleClass attribute)

Again, this all has nothing to do with JSF. JSF is in the context of this question merely a HTML code generator. If you're brand new to basic HTML/CSS and thus doesn't exactly understand what JSF is producing, then I strongly recommend to take a JSF-pause and learn those basics first.

Unrelated to the concrete problem, the <h:outputLabel> generates a HTML <label> element, but you don't seem to have any HTML input element associated with it. You're in essence abusing the label element for the wrong purpose. Understanding basic HTML and how to write semantic HTML and knowing what HTML output those JSF components exactly generate should push you far in the right direction. In this particular case, you should likely be using <h:outputText> instead.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

-1

To insert spaces between components in the same line, you can use img tag with a 1x1 clear image. (Note: this should be the last resort until other options exhausted, see discussion below)

<img width="100" height="10" src="/path-to/dot_clear.gif" /> e.g. <img width="100" height="10" src="https://raw.githubusercontent.com/jonathanluo/jsf/master/images/dot_clear.gif" />

Enter desired width; for height any number between 1 to 10 will do. By default, the unit of width and height is pixel

To get a copy of the dot clear image and save it to local resources from https://raw.githubusercontent.com/jonathanluo/jsf/master/images/dot_clear.gif

Right click on the content area and Save as...

Improve this answer

5 Comments

Why is this better/more modern than using css? For me doing things like this is from the pre IE8 era (or IE7). Browsers have since advanced a lot and quirks are not needed to be fixed with workarounds like this
@Kukeltje I just provided a solution and gave a choice to users, not comparing it with css or other better solutions. BTW, as of PrimeFaces 5.3.RC2, <p:spacer> use img tag behind the scenes, same idea I mentioned
Yes, but think of visibly impared users. Pages with all kinds of (to them) useless images, makes the page impossible to use. See w3.org/TR/WCAG20-TECHS/C18.html . The fact that the p:spacer exists does not mean it should be used. There is (afaics) no valid reason today to use a solution like this.
We had a project which used complicated css, in order to insert desired spaces between components in a page, developers tried margins, padding, block, etc. w/o success, they caused issues in layout, font color, background color, etc. Image spacer was the solution at that time. Agreed with you points though, I updated the answer with a note.
Thanks... downvote removed (still no upvote though ;-))

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.