Win a copy of Kotlin in Action this week in the Kotlin forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic

Need to add linebreak in label of f:selectItems  RSS feed

anthony Tom
Posts: 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi there,

I'm using f:selectItems inside h:selectManyCheckbox. I need to add a linebreak (something like <br>) in the label string of f:selectItems.

e.g. The label string currently is as "Purchase ID: 20102 Purchase from Individual". I would like to display this checkbox item as follows:

x(checkbox) Purchase ID:20102
Purchase from individual

I tried many options but no luck so far. Can anyone help me out?

Thanks in advance
Tim Holloway
Posts: 18705
Android Eclipse IDE Linux
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
SelectItems do not support raw HTML, which rules out adding linebreak tags, color/font tags, and so forth. The selectItem value is only concerned with data, not presentation. In JSF, presentation is primarily the job of CSS and not JSF itself.

The selectManyCheckbox tag does 2 things. 1) provides a container for a set of checkbox controls (the HTML renderer generates a TABLE). 2) maps a SelectItem collection to serve as the value-mapping models for generated checkbox controls. It is specifically intended to present (and enforce) a limited UI.

You can escape this limitation by using a dataTable containing individual checkbox controls. Instead of a selectItem list, pairing value/label, you'd need a dataModel, but the upside is that the dataModel is more flexible, since you can create rowmodel object such as "label/line1/line2".

In any event, I don't recommend using raw HTML in JSF. It corrupts the boundaries between Model and View in the MVC paradigm, for one thing.
Brendan Healey
Ranch Hand
Posts: 218
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
The thing is, if you've got to do it, you've got to do it. Firstly try outputting a label in the format "helloXXXworld". It
probably won't work, but you never know! The next thing is to try and style the label with "white-space: pre", or maybe
"white-space: pre-wrap". You need to take a look in firebug/dev tools to see the dom. If you had <h:selectManyCheckbox
id="chk1" then you could have a css class like:

(In place of XXX use 'ampersand hash 10;' - no spaces)

#chk1 label {
white-space: pre;

I'm doubtful that it will initially work, only because anything like this takes ages to get right, but you should eventually
get something going.

If you can't get a css class to match the last resort would be jQuery, where you can do anything. You need to play
around a bit with this. Good luck.

  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!