Duplicate the row above

Home Forums Quform WordPress Duplicate the row above

This topic is: resolved
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #34347
    MOVOX
    Participant

    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.
    #34358
    Ally
    Support Staff

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

    #34359
    MOVOX
    Participant

    Hi Ally,

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

    #34361
    Allan
    Support Staff

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

    #34362
    MOVOX
    Participant

    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.
    #34364
    Allan
    Support Staff

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

    #34365
    MOVOX
    Participant

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

    #34366
    MOVOX
    Participant

    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.
    #34368
    MOVOX
    Participant

    Allen,

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

    #34369
    Ally
    Support Staff

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

    #34370
    MOVOX
    Participant

    Hi Ally,

    Your latest code works. Thank you.

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.
Be inspired. © 2020 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy