Implemented Add unique html IDs based on the custom user field 'field id' to all the custom user fields displayed on a user profile

RobinHood

Well-known member
At the moment it's difficult to style this as every custom field is in a generic dl tag. And I can't apply styling based on nth order because the order will change per user depending on what fields they fill out.

It would make it a lot easier to style if each of these fields had a unique ID based on their field id.
 
Upvote 0
This suggestion has been implemented. Votes are no longer accepted.
It's not a generic dl tag, it has an ID embedded within it already via a HTML 5 data attribute.

It's possible to style based on these and this is sufficient and means a unique ID doesn't need to be provided.

Taking one of our custom fields as an example:
HTML:
<dl class="formRow formRow--customField formRow--input" data-field="favorite_feature">

You can target that with CSS in this way:
CSS:
dl[data-field="favorite_feature"]
{
    border: 2px solid red;
}

Result:

1594133842565.webp
 
Ah, yes, it does when editing the fields.

But I can't see anything unique for styling the output on the user profile when it gets displayed?

1594134136638.png
 
Sorry missed the point there somewhat. Consider that implemented for XF 2.2 but note if you utilise the new wrapper output HTML value in XF 2.2 then you'll need to add this attribute yourself or otherwise style the field manually.
 
Ahh cool! Thanks!

I've managed to figure out a way to do it for now by parsing the the fields using javascript and adding some IDs.

Will switch over the wrapper output value in 2.2 :)
 
Ahh cool! Thanks!

I've managed to figure out a way to do it for now by parsing the the fields using javascript and adding some IDs.

Will switch over the wrapper output value in 2.2 :)
Hi
Would you mind sharing how to add IDs to custom fields with Javascript?
I have the XF generated unique-id, but when I set.attribute the XF generated unique-id is deleted and I'm left with the ID I just set. Is the XF generated unique-id not necessary?

Thanks!
 
Last edited:
Top Bottom