How to do Advanced positioning with CSS?

  • Profile Image
    omaruko
    Asked on November 23, 2017 at 11:12 PM

    Hi there

    I refer to the following article.

    https://www.jotform.com/help/328-How-to-Position-Fields-in-JotForm

    Of which, I pick up the following part.

    https://gyazo.com/7760f5027554b51b614c06a02ee3c4fa

    Let me ask you field, left and  CSS, right

    Field

    1.What is the meaning of 1+2,5+4・・?

    2.What is the meaning of 

    〇1〇8

    〇2〇9

    〇3〇1

    〇4〇54

    Once I got the meaning of these, I would understand others.

    CSS

    1.Can you elaborate 1→?

    2.Can you elaborate 2→?

    3.How is .form-radio-item label{ connected both field and CSS?

    4.Padding, margin and so on mean the list of necessarily CSS in case we customize the format, correct?

    What about HTML code? You mean we do not need injecting HTML code, right?

    Looking forward to having your reply.

  • Profile Image
    Nik_C
    Answered on November 24, 2017 at 01:33 AM

    1.What is the meaning of 1+2,5+4・・?

    Those are just labels of those fields, that's how they are named.

    2.What is the meaning of 

    〇1〇8

    〇2〇9

    〇3〇1

    〇4〇54

    Those are field options, so each radio field is represented with an option to choose.

    1.Can you elaborate 1→?

    Those are CSS classes of the selected radio button fields on the left-hand side.

    2.Can you elaborate 2→?

    It's a place where you can insert Custom CSS to change the certain design in your form.

    3.How is .form-radio-item label{ connected both field and CSS?

    Here the label of .form-radio-item class field is selected and you can change various CSS options for it.

    4.Padding, margin and so on mean the list of necessarily CSS in case we customize the format, correct?

    Those are basic CSS rules that you can use in order to change the alignment of a certain field, padding will adjust the field based on the border of the element where the field is in. And margin will define the element's space outside of any defined border of the element.

    Regarding the HTML, you cannot customize the form with HTML in the builder. The only way to do so is to download Source code of the form and do the HTML coding there, but then you will have to store your form on your server.

    Let us know if you have any further questions.

    Thank you!

  • Profile Image
    Nik_C
    Answered on November 25, 2017 at 02:42 AM

    >labels of those fields

    I roughly got your reply.If so, there are so many fields such as 68.


    Meanwhile, 0,-3 cannot exist. What are these?

    I'm not sure I understood this. If you have radio button fields in the form, you can change the labels and put whatever you want.

    1511595699screencast.gif


    >Those are CSS classes of the selected radio button fields on the left-hand side.

    Confirmed.In this case,.form-radio-item a label was selected, correct?

    That is correct.

    >It's a place where you can insert Custom CSS to change the certain design in your form.

    Confirmed. While we are inserting CSS code there, can we check how the left-hand side changes?

    Yes, you will see the live changes on the left-hand-side.

    No, DropBox or Google Drive will not work, you have to have a web server.

    Thank you.

  • Profile Image
    Nik_C
    Answered on November 26, 2017 at 07:23 AM

    >l>abels of those fields

    It is not a serial number from 1 to 68.The form owner can freely set the number.

    Correct, you can set whatever you want, number, text, anything.

    >>Moreover, what are those that I marked in red allows the following image?

    https://gyazo.com/799d211befb89cae5e1fdcec8c7f2756

    I didn't see anything marked in red here, so I wasn't sure what were you referring to.

    If you have any additional questions please let us know.

    Thank you!