Copying form fields

  • Profile Image
    garymichael
    Asked on April 02, 2017 at 08:11 PM

    Hi, Is there a way to copy and form field and keep the styling placed on it?  Currently, when I copy a field I have to redo the enter styling in the css section.

    Is there a way to do this, or will I always have to change the styling one by one?

  • Profile Image
    Ian
    Answered on April 02, 2017 at 10:05 PM

    If you are referring to the styling done through custom CSS written for a field then there is a workaround.

    Instead of copying and redoing styling for the new field, you can add the field id to the existing class definition, using a comma separator.

    Hope this helps.

  • Profile Image
    garymichael
    Answered on April 02, 2017 at 11:45 PM
    Lord Jesus, I sure hope this works... awesome! Thanks.
    ...
  • Profile Image
    garymichael
    Answered on April 02, 2017 at 11:45 PM
    Oh but the problem with this is, I'm not entering the css on this screen,
    I'm entering it in the Designer and you can't copy the fields in there!
    You can only create the fields in editor, not the designer. What are your
    thoughts?
    ...
  • Profile Image
    Chriistian
    Answered on April 03, 2017 at 03:54 AM

    Yes, you are right. You can create or copy fields in the Editor, but not on the Designer. However, if you mean that you do not want to style each field because you have copied it, I'm sorry to say but you need to style every field on the designer if you want to achieve the preferred style of your form fields. 

    Regards.

  • Profile Image
    garymichael
    Answered on April 06, 2017 at 01:10 PM

    Ok then, I see... I'll just have to designate each section with comments so I know which is which... then get the field details in the Main screen... then click the css on the Main screen (not in the Designer) and just paste next to the field I want to copy the style from.

    Does that make sense?

  • Profile Image
    liyam
    Answered on April 06, 2017 at 02:50 PM

    Hello garymichael,

    I'm not sure I'm understanding your idea on designating each section with comments. But so long as you don't get to confuse yourself and how you will be able to achieve what you wish in the end.

    Like for me, my way of creating my form and styling would be just add the fields I want, and my way of identifying each field would be via the Chrome browser's console.

    So I press right-click on the field that I wish to identify and style.

     

    And I find it easier that by selecting each line or hovering my mouse over the specific line on the browser's console, it highlights the specific field on the form

    Once I have identified each ID that I want to style, I try to open the form designer and insert my CSS there.

    In any case, if you need assistance, just let us know. Even if what you want is to let us do the styling for you, please don't hesitate to ask. We'll be more than happy to assist.

    Thanks.

  • Profile Image
    garymichael
    Answered on April 07, 2017 at 04:45 PM
    ​​
    Hey, I have another question; please take a look at the Resident Survey
    form I'm working on now. On the second radio button selection row it
    starts with - Marital Status. I can't seem to get it to space out
    properly. *I noticed if it's a radio label (.form-radio-item), then they
    are connected and cannot be separated individually for styling!*
    Here's what I played around with:
    .form-radio-item label - the width does nothing
    .form-line (#id_25) - width does nothing either
    *Can you check it out see if you can space these horizontally!*
    ...
  • Profile Image
    Kevin_G
    Answered on April 07, 2017 at 07:17 PM

    If you need to increase the field's width then you need to apply the code to the entire  field directly which ID is "id_25". 

    Example: 

    If you need to affect the labels, then you could simply right click on the label option and copy its field ID, to do it, please follow the instructions given by my colleague above. 

    This is how that would work: 

    If the code you're injecting does not take effect on your field, you could also add the "!important" rule in order to override other width values that were injected to the form. 

    Hope this helps. 

  • Profile Image
    Gary Michael
    Answered on April 08, 2017 at 11:46 AM

    Okay, yes I understand that... but it's when they are horizontally aligned.  I changed them to vertical just because it was taking a long time.  If you move single or multiple button items to horizontally align, then you'll see what I'm talking about. 

    When you space them out it doesn't move them apart.  Maybe I'm doing something wrong.  But can you try it and tell what I missed.  Thanks for your help, I appreciate it.

  • Profile Image
    Mike_G
    Answered on April 08, 2017 at 04:41 PM

    Thank you for the additional information, we appreciate it. 

    Please give us some time to further inspect your form and find what's necessary to meet your requirements.

    We will get back to you as soon as possible.

    Thank you.

  • Profile Image
    Mike_G
    Answered on April 08, 2017 at 05:42 PM

    I would like to apologize for any inconvenience, however, I have checked your form and I believe I may need to clarify things a bit with regards to what you're trying to achieve.

    Can you help us understand your concern further by explaining what you mean when you say horizontally align and vertically align, please? Are you referring to how the options in the radio button fields are listed? Are you trying to spread the options in the radio button field into multiple columns?

    Also, are you trying to create a larger space between the input (radio button) and its option label?

    Any specific details that you think would help us better understand your requirements, please provide it to us and that would be greatly appreciated. If possible, you can also include screenshots in your next reply describing what you would like to happen.

    We will wait for your response.

    Thank you.

  • Profile Image
    garymichael
    Answered on April 08, 2017 at 06:44 PM
    Nevermind I figured it out. It's when you take a radio list from vertical
    to horizontal using column toggle in the settings. I set it to 3 columns
    going horizontally and I couldn't space them out, while staying even with
    the 3 columns aligned vertically. Like this:
    Column 1 Column 2 Column 3
    Column 1 Column 2 Column 3
    Column 1 Column 2 Column 3
    Now if I try to space these columns out across the page. But I figured it
    out... you have to do it like this:
    #id_50 {
    width : 288px;
    }
    #id_51 {
    width : 368px;
    }
    #id_52 {
    width : 369px;
    }
    #id_53 {
    width : 175px;
    But it's hard to see because you have to barely put your mouse on the
    list.. it's barely there because there is really 4 layers you can move :-)
    But they have to separately moved because they are connected when it's a
    list. But there's a teeny small box around the radio button & label, and
    it's an (ID).
    Thanks, also
    the Designer is just hanging on save!! You may want to check
    that out as well.
    ...
  • Profile Image
    Welvin
    Answered on April 09, 2017 at 02:14 AM

    That's great to know. You can also just change the width of the specific column in the radio button field. 

    As for the designer, we've already reported the matter to our developers. We are now waiting for an update. 

  • Profile Image
    Mike_G
    Answered on April 09, 2017 at 05:50 AM

    I have decided to create a new thread for the issue you are having with the Advanced Form Designer so it can be monitored separately.

    Please click this link to go to that thread.

    Thank you.

  • Profile Image
    Mike_G
    Answered on April 09, 2017 at 06:02 AM

    Apologies for any inconvenience. I just saw the thread you opened regarding the issue you're having with the Advanced Form Designer.

    Please disregard my previous message.

    Thank you.