Adjust width of first column (i.e. label) on fabrik form

[amitfalana]

Hello.
The labels of my forms are pretty long and I need to adjust the width of the column showing the labels. How can I do so... Currently they look like as attached, which is surely not the best looking!

 

[lousyfool]

That's set by CSS, typically from your Joomla template. Use your browser inspector to find out.

 

[juuser]

Add something like this to your form template custom.css:

.fabrikLabel {
    max-width: 300px !important;
    width: auto !important;
}

 

[lousyfool]

Add something like this to your form template custom.css:

Sorry, but I don't think this is good advice. Without seeing and inspecting the form page, it's a shot in the dark at best. Actually, a bad shot, because:
1. As indicated, it depends on the Joomla template what current CSS is. Can't explain all best CSS practices here, but depending on existing CSS the properties should be chosen accordingly and the selectors may be more refined, not least to avoid !important.
2. It's incomplete as it's neither including CSS for the "control" class, nor media queries -- again, likely depending on template CSS.

So, it won't help the OP. If anything, it may rather make things worse as he/she is obviously not entirely familiar with CSS matters.

@amitfalana, as mentioned, use your browser inspector and familiarize yourself with CSS, or hire someone to do it for you.

 

[juuser]

I agree it's not the best possible and a universal solution, but in 99% of the cases it should be fine enough. "fabrikLabel" class should be the same for all standard templates. I also agree that the OP should make him/herself more familiar with CSS.

Sorry, but I don't think this is good advice. Without seeing and inspecting the form page, it's a shot in the dark at best. Actually, a bad shot, because:
1. As indicated, it depends on the Joomla template what current CSS is. Can't explain all best CSS practices here, but depending on existing CSS the properties should be chosen accordingly and the selectors may be more refined, not least to avoid !important.
2. It's incomplete as it's neither including CSS for the "control" class, nor media queries -- again, likely depending on template CSS.

So, it won't help the OP. If anything, it may rather make things worse as he/she is obviously not entirely familiar with CSS matters.

@amitfalana, as mentioned, use your browser inspector and familiarize yourself with CSS, or hire someone to do it for you.

 

[troester]

An other possibility is to select "Labels above " in form or group setting. So you'll get the full form width for the labels and can set 'options in row ' for the answers as you need.


Gesendet von meinem SM-G930F mit Tapatalk

 

[lousyfool]

Sure true what @troester says.

But if you want to keep a horizontal layout:

@amitfalana: Just to draw a line and get this straight, and to get you you an idea for "better" and complete CSS for this case:

Based on
- Joomla's default Protostar (and typically any other Bootstrap 2) template
- valid for Fabrik forms and details only (but all of them), if "horizontal" (means "Labels position" in form layouts is set to "Left")
- for use in a custom CSS file, e.g. the one of your template

.fabrikGroup.form-horizontal .control-label {
    width: 120px;
}
.fabrikGroup.form-horizontal .controls {
    margin-left: 140px;
}

 

[amitfalana]

Thanks to all who responded.
@juuser... Unfortunately your suggestion only shifted the first line on a multi-line radio button.
@lousyfool... Thanks for your suggestion... This worked perfectly.
Although combining suggestions from @juuser and @lousyfool... I managed to make all other changes which I was intending to.

And @troester... THanks for your suggestion... I keep exploring and point out to new controls within the fabrik UI. It's an amazing product. Thanks again!
I shall close the thread now.