Duplicate the row above

[MOVOX]

I would like to add a button (or icon) at the end of a row of text fields that will replicate the fields and place them in the next row as blank fields. (see image 1 attached)

I have tried to create this feature with a text field and check box in row 1. With the checkbox option 1 having the qicon-add_circle icon when unselected and the fa fa-check when selected. I’ve then copied the text field and check box into additional rows, 2, 3, 4 etc. and used conditional logic to display rows 2, 3, 4 etc when the checkbox is selected in the row above.

This is working ok, however I’m having trouble lining up the icon so it it inline with the text field.. When I adjust the top padding I’m getting a second fa fa-check icon in the background. (see image 2 attached).

The CSS styles I have added are:

Option icon:
text-align: center;
vertical-align: middle;
font-size: 20px;
color: #9dc408;

Option label (when selected):
text-align: center;
vertical-align: middle;
font-size: 20px;
color: #9dc408;

Option outer wrapper:
text-align: center;
vertical-align: middle;
font-size: 20px;
color: #9dc408;

Is there a better way to implement this feature? And can you assist with the alignment and hiding the second fa fa-check icon in the background?

Attachments:

You must be logged in to view attached files.

[Ally]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[MOVOX]

Hi Ally,

Can I send you a link to the form via the feedback field below?

[Allan]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[MOVOX]

Thanks Allan,

Form export is attached. The issue relating to the two icons showing is on pages 3 and 4.

Attachments:

You must be logged in to view attached files.

[Allan]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[MOVOX]

I’m using Chrome Version 102.0.5005.63 (Official Build) (64-bit).

[MOVOX]

I’ve removed the CSS from row elements 1, 2 and 3 and added the following Global CSS for Option Icons and Option Icons (when selected):

font-size: 20px;
color: #9dc408;
text-align: center;
vertical-align: middle;

The CSS for Option Icons (when selected) in rows 4 and 5 is:

text-align: center;
vertical-align: middle;
font-size: 20px;
color: #9dc408;
padding-top: 5px;
position: relative;

You can see the result in the attached image. Note that rows 4 and 5 remain the same. I have also checked IE and Chrome with identical results.

Attachments:

You must be logged in to view attached files.

[MOVOX]

Allen,

I’ve found that it’s the Option input tick that is being displayed, even though I have “hide input” selected.

[Ally]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[MOVOX]

Hi Ally,

Your latest code works. Thank you.

[Author]

Posts