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.
 Subscribe via email
Recent
Categories
Tags
View Replies (2)

Resolved Tag Field Type Styling Differently Than Other Fields

  1. Issue
  1. Steve Frise
    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)
example.png example.png
  1. css
  2. field settings
  3. tags
Accepted Answer
Steve Frise
Steve Frise
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"

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.
Attachments (1)
example2.png example2.png
  1. more than a month ago
  2. F2C field types
  3. # Permalink
Responses (2)
F2C webmaster
F2C webmaster
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.
Forums:
  1. All
  2. F2C Pre-installation questions 0
  3. Form2Content Lite & Pro 0
  4. F2C installation questions 0
  5. F2C Content type settings 0
  6. F2C field types 0
  7. F2C article templating 0
  8. F2C submission form templating 0
  9. F2C & Joomla plugin integrations 0
  10. F2C Front-end / menu settings 0
  11. F2C XML import/export 0
  12. Form2Content Search extension 0
  13. F2C Search settings 0
  14. F2C Search front-end 0
  15. F2C Search filtered article lists 0
  16. Form2Content KML Feeds extension 0
  17. Form2Content Related article plugins 0
  18. Form2Content feature requests 0
  19. Licensing & downloads 0