How do I set the display size for custom fields?

Question

I have a profile that combines built-in fields with custom fields, both alphanumeric. The custom field displays shorter than the built-in fields which, when I examine the page source, are size="30".

How can I set the display size of the custom field to match that of the built-in fields? I can't find a setting for it in the custom field edit area.

Thanks.

Answer 1

The Add/Edit custom field doesn't provide facility to add additional attributes but the Custom field table does have a column to store this attributes and this field is used while rendering the custom field. You can do this by any one of the method below

1. Create a extension and use buildform() hook to add the attribute field on Add/Edit Custom field form. Once its added on the form after submit it will be automatically processed and stored in db by Civi.

2. Once you have created the custom field you can use API explorer(CiviCRM >> Support >> Developer >> API Explorer) to update the attribute for a custom field as shown in below screenshot

Note: Make sure you add space at the end for each attribute as this is concatenated with other attributes while rendering the field.

Thanks

Pradeep

Answer 2

I just use CSS to make the fields the width that I want. For instance:

#custom_92 { width: 236px; }

I just use the "inspect" feature on my web browser (Chrome: right click on an item, choose Inspect on the menu) to see the pixel width of the field I want to match to. Then I set it to be that same width in my CSS.