CSS element class suffix

[avinette]

Hello,

Is there a way to add a suffix to the mf_element class for a specific element for CSS formatting? Something like adding a menuclass/moduleclass suffix in Joomla modules. I understand I can build a template but this seems more complex and less efficient compared to CSS.

Target Format Goal
--------------------------------------------------------
Name: (inputbox)
--------------------------------------------------------
E-Mail: (inputbox)
--------------------------------------------------------
Telephone: (inputbox) Extention: (inputbox)
--------------------------------------------------------

If the Extention (ELEMENT) could have a suffix (ex. -extention) the source output would be:

<div class="mf_element" > <!-- NAME -->
<div class="fabrikerror"></div>
<div class="fabrikLabel" ...</div>
<input class="inputbox text" ...>
</div>

<div class="mf_element" > <!-- EMAIL -->
<div class="fabrikerror"></div>
<div class="fabrikLabel" ...</div>
<input class="inputbox text" ...>
</div>

<div class="mf_element" > <!-- TELEPHONE -->
<div class="fabrikerror"></div>
<div class="fabrikLabel" ...</div>
<input class="inputbox text" ...>
</div>

<div class="mf_element-extention" > <!-- EXTENTION -->
<div class="fabrikerror"></div>
<div class="fabrikLabel" ...</div>
<input class="inputbox text" ...>
</div>

I could then add .mf_element-extention{float:right;} to my group#.css file to achieve the target format without having to build a template.

Hope this makes sense! Thanks!

[rob]

Hi

Each element has an id, so you can reference that as opposed to the class

e.g.

<select id="mf_el_jos_fsupport_tickets___status_id" class="inputbox" size="1" name="jos_fsupport_tickets___status_id">


could be accessed via the css:

#mf_el_jos_fsupport_tickets___status_id{
color:red;
}


the format for the id's are:

"mf_el" & table_name & "___" & elementName

hope that makes sense

Rob

[LeberMac]

Does this work in Fabrik 1.4? I'm adding code like that to the css stylesheet in (components/com_fabrik/tmpl/form/mint/template.css) and it's not working properly.

For example, I have an element called "book" that I want to show up as red while the rest of the "mf_element" stuff on the form viewonly page stays normal.

adding a css entry like so:
#mf_el_jos_fabrik_formdata_7___book {color: red;}

Does not work. Any ideas?

Oh, OK it seems to work in the form field version when you're entering data. How can I get it to work in the form field when it's view only?