Customization Of Joomla! Form Fields In Frontend (Tag Field Specifically)

Question

Is there anyway to customize how a standard Joomla! field type displays in the front end? I have created a form and every field looks fine EXCEPT the "tag" field type which for some reason is styling differently than the other forms (I've attached an image below).

In the form.xml the "tag" field is written like so:

<field name="tags" type="tag" label="JTAG" description="JTAG_DESC" class="inputbox" multiple="true" />

If I change the type from "tag" to anything else the field looks fine but doesn't function correctly (I am using ajax to lookup tags). There is also an inline bit of CSS that renders that field to "width: 42px" and I have looked everywhere and cannot find where that inline code is coming from.

In a nutshell: where does Joomla! get the code to render/stylize the "tag" type? I have looked every where and can't seem to find an answer.

Thank you!

Answer 1

Ok I figured it out! Rather than delete this question I'll post the solution in case anyone else has this problem in the future.

As it turns out the inline style is actually coming from the site's javascript. I am sure there is a good reason for this but if you ask me it's an incredible pain in the ass to have that code deciding your style for the field. I am not a javascript expert by any means so if anyone has any comments on the following please do so.

To fix this, open up "/media/jui/js/chosen.jquery.min.js" and change the following lines of code (after UN-minifiying):

Line 193:

style: "width: " + this.container_width() + ";",

change to:

style: "width: <YOUR_DESIRED_WIDTH>",

and on line 406 delete:

u = t.width() + 25,

and change:

width: u + "px"

to:

width: "<YOUR_DESIRED_WIDTH>"

After a bit of CSS styling (you'll need to adjust chosen.css in "/media/jui/css/" since this field is not governed by the same style sheet") and you're good to go.