-
garymichaelAsked on April 2, 2017 at 8: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?
-
IanReplied on April 2, 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.
-
garymichaelReplied on April 2, 2017 at 11:45 PMLord Jesus, I sure hope this works... awesome! Thanks.
... -
garymichaelReplied on April 2, 2017 at 11:45 PMOh 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?
... -
Chriistian Jotform SupportReplied on April 3, 2017 at 3: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.
-
garymichaelReplied on April 6, 2017 at 1: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?
-
liyamReplied on April 6, 2017 at 2: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.
-
garymichaelReplied on April 7, 2017 at 4: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!*
... -
Kevin Support Team LeadReplied on April 7, 2017 at 7: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.
-
Gary MichaelReplied on April 8, 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.
-
Mike_G JotForm SupportReplied on April 8, 2017 at 4: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.
-
Mike_G JotForm SupportReplied on April 8, 2017 at 5: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.
-
garymichaelReplied on April 8, 2017 at 6:44 PMNevermind 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, alsothe Designer is just hanging on save!! You may want to check
that out as well.
... -
Welvin Support Team LeadReplied on April 9, 2017 at 2: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.
-
Mike_G JotForm SupportReplied on April 9, 2017 at 5: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.
-
Mike_G JotForm SupportReplied on April 9, 2017 at 6: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.