Bug Multifield Layout

Berga85 16 Jul, 2015
I created three fields text box.
In the first field I put the label on top. While in the second and third field does not want any label. I would like the 3 fields next to each other on the same line but you have this problem:

This is what I would get:

I believe the problem is caused because I did not put the label in the second and third field.
How can I avoid this problem?

Thanks in advance
GreyHead 17 Jul, 2015
Hi Paul,

Please try putting a space in the label for the second and third boxes - though I suspect that this will show *s that you don't want. In that case I think that the only practical options is to copy the HTML into a Custom Code element and edit that :-(

Berga85 17 Jul, 2015
They leave the * and remain displaced. Thanks anyway.
I have two requests:
- In the textbox I want to control the minimum and maximum number of characters inserted. I found this article that is just for me:
I have tried to put the string in the textbox CLASS but it does not work! Where should I put this string ??

- It 'can be restricted in a textbox only certain content?

The two things you can do anything that needs seems Load Java Script that I put before you in HTML On Load but do not understand how to configure it with the textbox ...
There is a guide for Load Java Script?

Thanks again and good day
GreyHead 17 Jul, 2015
Hi Berga85,

I experimented and got this to work:

+ put   in the second and third labels - this fixes the alignment problem.

+ add CSS like this - you'll need to check the form HTML to get the exact div ids
/* Hide all of the asterisks */
div#form-row-multi-1 .fa {
    display: none;
/* re-display the first one only */
div#fitem-text1 .fa {
    display: inline-block;

I'll look at the length validation later - have you checked the Masking options in CFv5 they may well do what you need?

GreyHead 18 Jul, 2015
Hi Berga85,

This works as a mask allowing 4-12 characters. Add it to the Extra Params box of the input that you want to mask:
data-inputmask='mask' : '*{4,12}', 'greedy': false, 'clearIncomplete': true


Note: I found this mask from Robin Herbot's reply to this GitHub issue.
This topic is locked and no more replies can be posted.