XF 2.2 How to display custom thread fields on the same row?

sbj

Well-known member
Hey,

so normaly if we use custom thread fields, they are displayed like this:

So I have 3 fields.
Birthday: 25th January
Birthyear: 1971
Birthplace: Washington

Instead, I want it to be displayed as:

Birthday: 25th January 1971
Birthplace: Washington

How can I display a field on the previous line/row? As you see 1971 is displayed on the same row as the first field.

I can use display:none css selector to not show the title. But I can't get the value to display on the row above instead of its own row.
I tried several stuff but can't get it to work.

Anyone has any idea?

Thanks.
 
Try this in extra.less. Tested on the default XF theme:
CSS:
.pairs.pairs--columns { display: inline; }
.pairs.pairs--columns.pairs--fixedSmall > dt { width: auto; }
.pairs--customField[data-field="birthYear"] dt { display: none; }
.pairs--customField[data-field="birthPlace"] { display: block; }
You may need to change the data-field="X" names to the exact ID of the custom fields to work.
 
Last edited:
  • Like
Reactions: sbj
Thanks for the help.
Doesn't work? Did you forget a > maybe on line 3?
Also have you tested this by having the fields on the thread status block?
 
Ok, fixed it. Only thing is this will affect the layout of all custom thread fields on your site which may not be desirable.
Unfortunately not only it affects eveywhere but also it breaks everything and lists everything after one another.
I still want everything on its own row, just except for that one field. This css puts everything into a single row.
Still thanks, maybe we could fix it somehow.
 
Ah, weird, I'd need to see a live example to maybe have a clue then. I am very much a novice at XF customization and try to make CSS do as much as possible.
 
  • Like
Reactions: sbj
Back
Top Bottom