Inline TV fields

How would I go about customizing the appearance of the TV fields. I've got about 12 fields that look a bit off being one beneath the other, when I"d only need about 4 characters max to fill them in.


Is it possible to group them and have them in-line, and perchance add a heading to the group?

In theory, you could use some JavaScript that executed after the rest of the page's JS to set their CSS attributes to display inline and, if necessary, add some margin and/or padding.

You'd probably have to look at the page in Chrome dev. tools or Firebug to find out the IDs. "View Source" usually won't show them to you because they're created on-the-fly by the MODX JS.

If you put them in the front end with NewsPublisher, it's a little easier because NewsPublisher uses standard IDs for them (which you *can* see with "View Source"), and you could probably use regular CSS to format them.

Is there a possibility of writing a plugin or hooking on to some of the events to generate the layout there?

Probably use the OnDocFormRender event, and as Bob says, load some javascript to re-position the fields. You can use $modx->regClientScript() or one of its variants in a plugin to load your Javascript. That would put your Javascript at the end of the generated Manager page, so it would override other styling and positioning.

Code for inspiration: http://rtfm.modx.com/revolution/2.x/case-studies-and-tutorials/adding-custom-fields-to-manager-forms

Thanks, just getting back to modx after years of absence, and I'm having a hard time getting back into it, especially when supporting an existing project.

I'v realized that I've used a snippet instead of plugin, and then haven't checked the calls of the plugin, so I've been able to run this eventually



any resources you could point me to to only use in a certain template, and how to edit the layout?
I'm thinking of just applying a css that targets the 'tr #tv!!-tr` where !! is the id of the tv I'm targeting. I suppose this would not need to check whether the right template is used in the first place. And I can probably use plain javascript to insert headings.

Thanks!

got it to work pretty well with adding these



and bunch of these


and

If possible, it would be awesome if you share the screenshot!

screenshot:

Nicely done!