How to add special Bootstrap Classes to Elements?

[slashmaster]

Hi,

i'm just playing around with the new Fabrik for 3.1. The page i'm currently developing on uses Bootstrap 3.0.0 as Framework. For generating a correct Design, i need to add custom classes to my elements like .form-control. (I'm Building the form one by one, because i need the scaffolding abillities).

Well, 2 liter of Coffe and 5 hours of searching are gone, but i can't figure out, where the

<?php echo $element->element;?>

references to, so where i could kick in to add my classes.

The output doesn't change and uses the default provided classes from Component Setting:

<input id="dk7zl_fabrik_kontakt___vorname" class="input-medium fabrikinput inputbox text" type="text" value="" maxlength="255" size="20" name="dk7zl_fabrik_kontakt___vorname">

Also, i need to completely remove the 'size' argument.

In the End, it should look something similiar to this:

<div class="row">
    <div class="col-lg-12">
        <form>" id="kontakt">
            <!--*******************************
                Kontaktdetails
                *******************************-->
            <div class="panel">
                <fieldset>
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="InputVorname">Vorname</label>
                                <input type="text" class="form-control" id="InputVorname" placeholder="Ihr Vorname">
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label for="InputNachname">Nachname</label>
                                <input type="text" class="form-control" id="InputNachname" placeholder="Ihr Nachname">
                            </div>
                        </div>
                    </div>

Where in label and Input Elements should be generated by Fabrik including my Custom classes.
Thanks in Advance!

Cheers
Martin

 

[slashmaster]

Update: Solved
Okay the classes get added via /root/plugins/fabrik_element/field/field.php
line 130

$bits['class'] .= ' ' . 'form-control' . ' ' . $params->get('text_format');

Maybe this helps others.

 

[troester]

You shouldn't hack fabrik core files.
It's impossible to debug hacked versions and your hack will be overriden with the next update.
If you want to use fabrik you mustn't change element ids and HTML structure, you'll break any JS.

For custom form layout add custom CSS to an existing fabrik template or create your own custom template.
http://www.fabrikar.com/forums/index.php?wiki/form-and-details-templates/

 

[slashmaster]

Yep, that's a point, thanks. I already read that part, but it seems not well enough
Is it possible to use template overrides from your link for the plugin files as described above?

I tested the core hack, and everything seems to work fine (JS Ajax validation etc.). I mean, i didn't remove any fabrik classes or IDs but only added some specific classes.
I think there is no possibility to add these specific element classes to fabrik without modifing the plugin files, because the template just renders the element via php echo.
The Structure of the Element is not build within the template but before.

Sorry, if i missed something, haven't digged that deep in fabrik before

 

[troester]

As long as you only add the class it doesn't break the structure but if you would realize this

<input type="text" class="form-control" id="InputVorname" placeholder="Ihr Vorname">

it would.
You don't need template override better copy an existing template, rename and modify (and select as form template)
In default_group_xxx.php you could add your classes.

 

[slashmaster]

That's correct. This was was the initial structure I thought about, following the bootstrap guidelines.
But it was easier to accomplish with Fabriks Group / columns functionality, so it now just has the classes added.
I'll try your suggestion, thanks!

 

[Sophist]

Hmmm ... I am not sure whether you are asking the correct question or looking at the correct solution.

Firstly, Joomla 3 and Fabrik only support Bootstrap 2. Using Bootstrap 3 is courageous (to use a Yes Minister euphemism). The form-control is a class introduced only in BS3.

I am really not sure what other issues you will find trying to use BS3 with J3 / F3.1, but since BS3 is quite different, I expect that there will be many more. My recommendation to you is to switch back to BS2.

S

 

[slashmaster]

Hm, well I now use template overrides for the plugins and yes to be honest also for some Joomla components and modules. Currently everthing is up and working, only tooltips and ajax verifiing are struggeling at some points - but i like riddles .
Since everything is tracked via git, there should'nt be that much problems, when updating to new Fabrik / Joomla versions.

BS3 is just pure awesomeness, so it just has to be in my project . When i switch from local dev to live stage, i can post a link, so you can have a look on what's working and what not (when youre interested in, of course!).

Cheers

 

[Sophist]

Everyone thought BS2 was pure awesomeness when it first came out.

Obviously it is your choice about whether to use BS2 or BS3 and if BS3 to make whatever changes you like to Fabrik to make it work. (That is what is so great about Open Source!!)

Good luck.

S

 

[slashmaster]

Hehe, yep that's true. OpenSource Rocks! - but i guess that's off-topic
I'll do my best.

 

[rob]

You can set the field class to span12 in the admin which will have the same behavior as form-control i think.
As Joomla uses bootstrap2 we wont be directly supporting bootstrap3 for now though so you may encounter issues