Spread two fields over three columns

  • Profile Image
    diamontejets
    Asked on December 14, 2018 at 11:09 AM

    I have a form that has three columns, but I would like to have two fields that span across the three columns. Is this possible? 

  • Profile Image
    david
    Answered on December 14, 2018 at 12:34 PM

    It is indeed possible to have a column form with 2 fields side by side.  The easiest way to do so is to use a spacer on the top and bottom of those two widgets to separate them from the fields above and below:

    1544808827Capture.PNG

    That will prevent any of the fields above or below the two fields from being placed on the same line.

  • Profile Image
    diamontejets
    Answered on December 14, 2018 at 01:56 PM

    Hi David, 

    Many thanks for your prompt reply! Please see image below, where form has three columns (as most clearly seen by Departing, Time and Passengers on bottom row).

    However, I'd like the 'From' and 'To' fields to better use the white space to the right, and would effectively like that row to be treated as 'two columns'. 

    Is there a work around that'll allow me to do this?

    1544813635tempform.jpg


  • Profile Image
    david
    Answered on December 14, 2018 at 02:17 PM

    If you'd like to push the "To" field a bit more to the right, add the following code to your form:

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    #id_3 {
        margin-left : 100px;
    }

    Here is how the form would look with the code added:

    https://form.jotform.com/83476054130957

  • Profile Image
    diamontejets
    Answered on December 15, 2018 at 11:46 AM

    Many thanks - this works well in every view except portrait mobile. Would I have to write a device width specific bit of code for this? 

  • Profile Image
    DonaldHag
    Answered on December 15, 2018 at 04:02 PM

    Make use of media queries to add device-specific CSS. For the field above, add the following CSS to align the fields correctly on mobile portrait and landscape view.

    @media screen and (max-width: 992px){

      #id_3 {

        margin-left : 2px;

    }

    }

    }

    @media screen and (max-width: 600px){

      #id_3 {

        margin-left : 2px;

    }

    }

    This resets the margin for the field such that it aligns correctly on mobile.