Change Width of a Form Element

  • Profile Image
    dpdeleon
    Asked on April 08, 2019 at 04:42 PM

    I would like to make my form horizontal in layout. I have two fields: email and message. I have them aligned horizontally by 'shrinking' the fields and I'd also like them to take up more room on the form. I've tried CSS etc but can't seem to adjust the size of the field to take up more room on the form yet have the two elements remain horizontal. 

    How do I do this?

  • Profile Image
    EltonCris
    Answered on April 08, 2019 at 06:43 PM

    Inject this CSS code to your form to expand the field in its container. Preview the form afterward to see the result.

    @import url('https://shots.jotform.com/elton/genericTheme.css');

    Guide: How to Inject Custom CSS Codes

    Result:

  • Profile Image
    dpdeleon
    Answered on April 09, 2019 at 02:14 PM

    thanks.

    Unfortunately the CSS doesn't work work in all resolutions. When I go to 768 it stacks vertically. Is there a way you can share the CSS so I can see if it can be revised?

  • Profile Image
    Nik_C
    Answered on April 09, 2019 at 03:44 PM

    According to my tests, it stacks on 671px width:

    1554838649Screen Shot 2019-04-09 at 9.37

    And it's part of the responsiveness CSS.

    You can try inserting the below CSS:

    @media screen and (max-width: 767px)

    .jotform-form .form-all {

        width: 101%!important;

    }

    That should decrease the width and form will stack on 625px width.

    Let us know if you have any further questions.

    Thank you!

  • Profile Image
    dpdeleon
    Answered on April 15, 2019 at 05:25 PM

    Sorry I didn't get back to this sooner. Perhaps I'm not saying it right but what I'm looking to do is use .form-textarea (message) and make it a bit wider than it presently appears. Same with .form-textbox (email).

    For some reason I can't get the CSS to work. It's as if there's a container that is keeping both from becoming wider. Any ideas? Thanks

  • Profile Image
    jherwin
    Answered on April 15, 2019 at 07:04 PM

    You can change the textbox and textarea width in your form advanced designer, see screenshot below.
    1555369294advancedesigner.png

    Guide:

    1.) Go to your form builder
    2.) Click form designer
    3.) Click the Advanced CSS editor
    1555369395access.png

    Please give it a try and let us know how it goes.