Need multiple columns on Purchase Order Form

  • Profile Image
    trialsofg
    Asked on May 29, 2020 at 10:22 PM

    My client has 21 items with various prices and I would like to use a purchase order form, but with three columns so the list is not too long. I am not finding a "duplicate" option for the purchase order widget element, so how do I make the items break into three columns instead of one?

    I have already gone into the designer and created the columns after shrinking the original column.

    Thank you,

    Tom


  • Profile Image
    roneet
    Answered on May 29, 2020 at 11:51 PM

    Please check this guide to be able to make the products fit in 2 columns:

    https://www.jotform.com/help/235-How-To-Have-Two-Column-Payment-Form

    Do you have any other products to be configured?

    Let us know how it goes.

    Thanks.


  • Profile Image
    trialsofg
    Answered on May 30, 2020 at 02:28 PM
    Thank you. This guide helped me get there. I had to adjust the width for three columns, but now all is well.
    Regards,
    Tom Grimes
    Avatar Website Design
    949-355-3617
    ________________________________
    ...
  • Profile Image
    trialsofg
    Answered on June 04, 2020 at 12:28 PM
    This worked initially, but out of the blue stopped working!
    Please let me know what you need to troubleshoot the css behavior.
    I also have been requested to add a background image this function is not working either.
    Regards,
    Tom Grimes
    Avatar Website Design
    949-355-3617
    ________________________________
    ...
  • Profile Image
    JohnRex
    Answered on June 04, 2020 at 03:16 PM

    Hello Tom - It seems the code no longer works. Let me check on this and provide you the right code to use.


  • Profile Image
    JohnRex
    Answered on June 04, 2020 at 09:20 PM

    Hi again Tom! I was able to find out where the issue is.


    Please try changing the float property of the product items from "center" to "left", then save.

    15913198942356800.png

    Also, regarding the background picture, that is being superseded by this code below. Kindly remove them:

    15913200352356800 2.png

    Let us know how it goes.

  • Profile Image
    trialsofg
    Answered on June 05, 2020 at 05:28 PM
    Thank you. This worked. Now, I just have to fuss with the width and colors for the client.
    Regards,
    Tom Grimes
    Avatar Website Design
    949-355-3617
    ________________________________
    ...
  • Profile Image
    JohnRex
    Answered on June 05, 2020 at 06:34 PM

    Great! Just let us know here if you need further assistance with this.