[SOLVED] A label after a field

[yodam]

Hi,
I want to put a label (like euro, dollars, kilometers, miles,etc.) after an input field/element. So:

Distance: |____________| Kilometers

How to do?

Thanks!

 

[Bauer]

The easiest way would probably be to do this via jQuery.

E.g. Use the jQuery after() function to insert text (or html) after the input.
Insert this line in the requirejs(['fab/fabrik'], function () in the form_#.js file...
jQuery("input#tablename___element_name").after(" Kilometers");

You could always put that in a span and add a class name if you want to add some styling
jQuery("input#tablename___element_name").after("<span class=\"addendum\"> Kilometers</span>");

 

[yodam]

Thanks!

 

[troester]

You can also use the "Format string" in element "Formatting" settings.

 

[Bauer]

You can also use the "Format string" in element "Formatting" settings.

I'm still learning, troester.
Could you please elaborate on this method by providing an example of just exactly what would be entered as the 'Format string' in order to accomplish what yodam wants to do?

I have never been able to figure out how to use that 'Format string' feature myself - and there is nothing in the Wiki to explain, other than "Applies the PHP sprintf function to the string when displaying the data in the list view or detailed view."

And even if you could come up with a sprintf 'Format string' to make that work, would it work in the normal form view (as I believe yodam is looking for) - or just in the "list view or details view" as stated in the Wiki???

 

[troester]

You are correct, this "Formatted string" is only displayed in list and details view.
So in form view you'll need JS or a custom template.

To use it: the simplest one
%s Kilometers
will display
10 Kilometers

other possibilities see the sprintf documentation

 

[Bauer]

Thanks troester.
Got it - and its all coming back to me.
I now recall using the sprintf feature and abandoning it for this exact reason (not shown in form view).
It may very well have been you who explained it to me the first time. Oh my mind.

 

[cheesegrits]

Applying the format string to the form view just doesn't make sense / isn't possible. It's intended for display purposes. Take currency, for example ... you don't want the currency symbol inside the input ... or distance, you don't want the 'miles' or 'km' inside the input field.

If you do that, such that the element's form input is "5 kilometers" ... then you take that value and apply a format to it for display, you get "5 kilometers kilometers".

Best approach (IMHO) if you want to make it clear that an input is (say) distance in kilometers is to use an HTML 5 placeholder ("distance in kilometers"), and apply the "%s kilometers" format string to it for display in list and details view.

The only other potential solution is to use an input mask, but again, that raises all kinds of potential gotchas.

I did consider, a while back, adding a "suffix label" to elements, so you could add text after the input field, but that's a lot of work tweaking a lot of element layouts.

-- hugh

 

[Bauer]

For as little as it's used, I still think the jQuery solution is best. It's one line of code added to the js file - and it works just fine.