Format the Label

[mrmcbobit]

Hello all,

I've got a fairly long label that is that auto line breaking after about 3 words and its really throughing off the look of the form.

I set the group to 1 column and manually put the column width to 100% but it doesn't seem to change it.

Any thoughts?

I'm running Joomla 2.5.3, Fabrik 3.0.4, and you can see the form here: https://foxapts.com/index.php/forms/tenant-application

Thanks,
Bob

 

[sgorney]

You need to adjust the CSS div around the label. If you look at the code you'll see the HTML for the label is formatted like this:

<div class="leftcol">
<label for="element">
</div>

And the CSS for the leftcol class is:

.leftcol {
width:130px;
}

So setting the width of the label to 100% means it's 130px. You need to change this value in the template's css. I recommend duplicating the template and renaming it, so it doesn't get overwritten when doing updates later.

 

[mrmcbobit]

Can I assign a different class to that or is my only option to modify the template.css file?

Thanks,
Bob

 

[cheesegrits]

You'll need to override it.

BTW, as of about a week ago, I re-added the concept of custom CSS files on a per template basis. It's something we used to do in f2, decided not to do in f3 (decided to use the 'themes' override method in J!) ... but then decided a custom CSS is the easiest and safest way to allow for small tweaks to standard templates.

So, if you udpate to latest github, you'll find a custom_css_example.php in the default template folder. Copy that to custom_css.php, and modify it to override the width ...


.leftcol {
width:200px !important;
}

... or whatever.

-- hugh

 

[mrmcbobit]

I just uploaded the latest via github, however i couldn't find the custom_css_example.php file. can you be more specific on where is should be?

Thanks,
Bob

 

[cheesegrits]

./components/com_fabrik/views/form/tmpl/default

https://github.com/Fabrik/fabrik/tree/master/components/com_fabrik/views/form/tmpl/default

-- hugh

 

[mrmcbobit]

Thank you!!

 

[Monicaaraujo]

Where do I find these files so I can change it?
Can I do this for each group have a specific label width?

You need to adjust the CSS div around the label. If you look at the code you'll see the HTML for the label is formatted like this:

<div class="leftcol">
<label for="element">
</div>

And the CSS for the leftcol class is:

.leftcol {
width:130px;
}

So setting the width of the label to 100% means it's 130px. You need to change this value in the template's css. I recommend duplicating the template and renaming it, so it doesn't get overwritten when doing updates later.

 

[troester]

This is an outdated thread, the mentioned CSS is not longer used in the standard Fabrik templates.
But here is how to create customized templates
http://www.fabrikar.com/forums/index.php?wiki/form-and-details-templates/