Please note that Form2Content is no longer being developed. All files from the latest version can be found on Github.

Form2Content Forum

Questions and answers for Form2Content, a Joomla CCK.
  1. Steve Frise
  2. F2C field types
  3. Thursday, 02 February 2017
  4.  Subscribe via email
(Joomla! 3.6.5 - F2C 6.12.0 Pro)

I cannot figure out how to change how the F2C_TAGS field displays in a front end submission form. 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 fields (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 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. The CSS from the source is:

<div class="chzn-container chzn-container-multi" style="width: 42px;" title="" id="jform_tags_chzn">

Adjusting chosen.css has no effect on this bit of inline code that is coming from...somewhere. I imagine this is coming from Joomla! and not F2C but that doesn't explain to me how the other standard Joomla! fields (like Title and Author) look fine.

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

Thank you!
Attachments (1)
Accepted Answer
Accepted Answer Pending Moderation
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 this has nothing to do with F2C even though I was using the F2C_TAGS field. 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"



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.
Attachments (1)
  1. more than a month ago
  2. F2C field types
  3. # Permalink
Responses (2)
Accepted Answer Pending Moderation
Thank you for sharing the solution!! :)
Please read the F2C documentation before asking questions! Thank you if you've done so ;)
  1. more than a month ago
  2. F2C field types
  3. # 1
  • Page :
  • 1

There are no replies made for this post yet.
However, you are not allowed to reply to this post.