adjust text fields according to form collapse width

  • Profile Image
    born
    Asked on December 06, 2012 at 11:01 AM

    How do I adjust the width of the form fields, not to the form with but to the width of a form collapse?

    I got a bunch of form collapse, underneath each is a HTML field and underneath that a few name, text box & email fields. Those form fields are too long and more in width of the whole form and I need to bring them in a bit, to fit with the form collapse ones.

    I'm a CSS novice and have only made this form from plowing relentlessly through of the forums (which is brilliant for copy and paste).

    My form has a transparent background in case you wonder https://secure.jotformeu.com/form/22793469152360

    Thanks

  • Profile Image
    Welvin
    Answered on December 06, 2012 at 01:23 PM

    Hi,

    You can edit the HTML field and hit "Enter" on your keyboard to bring down some words into new line and to fit it on your form.

    Or, inject this custom CSS codes to your form;

    .form-html {

    width: 390px !important;

    }

    Adjust the width value if needed.

    Thanks

  • Profile Image
    guest_23403625391045
    Answered on December 06, 2012 at 01:44 PM

    Thanks but I'm referring to the text, name and email fields, not the HTML box which I have manage to control by CSS.

    Need to have everything lined up with the collapse boxes.

    Please have a look here on the form https://secure.jotformeu.com/form/23405511364344

  • Profile Image
    EduardoMendez
    Answered on December 06, 2012 at 02:50 PM

    Hi there, 

    Here is a clone of your form:

    http://form.jotformpro.com/form/23405853228958'

    I changed the CSS a little bit.

    The line of CSS that lines up the fields is highlighted in yellow.  Let us know if you need further assistance!

    .form-collapse-table {

    background-image:none;

    background-color:black;

    }.form-collapse-mid {

    text-shadow:none;

    }

    .form-collapse-table:hover {box-shadow:none;

    text-shadow:none;

    background: #114CDF;}a {

    color: #FE0000

    }

    .form-line {

    padding-left: 50px;

    }

    .form-all {

    padding-top: 0;

    }

    .form-html {max-width: 530px;width: 530px;

    margin-left: 40px;

    }

  • Profile Image
    born
    Answered on December 06, 2012 at 03:32 PM

    Many thanks!