Configurable list: How to style it with CSS

  • Profile Image
    scottpiag
    Asked on February 08, 2018 at 02:04 PM

    Hello, I am working on a very complex form for a printing competition and learning there are some very strange requests to accommodate for this year.  You will see my form "Print Excellence Form" that there are several things happening throughout the form.  So let me break down my questions: 


    Submissions Page - Attached a screenshot and questions.  Overall, can a configurable list be re-formatted to be easier to read than what I currently have.  Can one entry take two lines?  Can the items under the Equipment section be put into two columns?  Can "Other" include a text box for them to supply information?  

    Also on this page I am trying to figure out how to put a price on each entry line and then have a total for them to print off and send us their money.  Is that possible?  

    Thanks


  • Profile Image
    Richie_P
    Answered on February 08, 2018 at 03:14 PM

    The configurable list can be formatted using custom css.

    You can add a price for each but you need payment integration to be able to sell the item.

    Here is an article on payment integration. Mastering-Payment-Form-Integrations-with-JotForm

    I'll get back to you with the custom css code for the configurable list.


  • Profile Image
    Richie_P
    Answered on February 08, 2018 at 04:08 PM

    You need to add these css codes into your configurable list widget.

    th.col4{
    position:absolute;
    margin-left:-680px;
    margin-top:100px;

    }
    td.col4{
    margin-top: 110px!important;
        margin-left: -612px!important;
      
    display:block;
    }
    th.col3{

    position:absolute;
    margin-left:-380px;
    margin-top:100px;
    }
    td.col3{
    display:block;
    position:absolute;
    margin-top: 110px;
        margin-left: -390px;

    }
    th.col5{
    position:absolute;
    margin-left:-220px;
    margin-top:100px;
    }
    td.col5{
    position:absolute;
    display:block;
    margin-top:-290px;
    margin-left:-235px;

    }
    th.col6{
    position:absolute;
    margin-left:-95px;
    margin-top:100px;
    }
    td.col6{
    display:block;
    position:absolute;
    margin-left:-100px;
    margin-top: -290px;
    }

    Here is a sample output.

  • Profile Image
    scottpiag
    Answered on February 09, 2018 at 02:13 PM

    Thank you!  I put in the CSS code and this is what mine looked like.  Did I do something wrong?  Also, can two of the fields be rearranged?  1518203625Screen Shot 2018-02-09 at 1.41

  • Profile Image
    Richie_P
    Answered on February 09, 2018 at 02:48 PM

    Kindly re-enter this css codes :


    th.col4{
    position:absolute;
    margin-left:-680px;
    margin-top:100px;

    }
    td.col4{
    margin-top: 110px!important;
        margin-left: -612px!important;
      
    display:block;
    }
    th.col3{


    }
    td.col3{


    }
    th.col5{
    position:absolute;
    margin-left:-420px;
    margin-top:100px;
    }
    td.col5{
    position:absolute;
    display:block;
    margin-top:-300px;
    margin-left:-440px;

    }
    th.col6{
    position:absolute;
    margin-left:-278px;
    margin-top:100px;
    }
    td.col6{
    display:block;
    position:absolute;
    margin-left:-290px;
    margin-top: -300px;
    }
    th.col7{
    display:none;
    }

    td.col7:before{
      content: "Return";
    color: #5957A6 !important;

    display:block;
    }
    td.col7{

    display: block;
        position: absolute;
        margin-top: -320px;
        margin-left: -80px;
    }

    Please also remove the word "Return" in your Fields configuration.

    Let us know how it goes.

  • Profile Image
    scottpiag
    Answered on February 09, 2018 at 03:51 PM

    This is what I got: It looks good but I lost the color for the headers. 


    1518209485Screen Shot 2018-02-09 at 3.50

  • Profile Image
    aubreybourke
    Answered on February 09, 2018 at 04:55 PM

    td.col7{

    font-weight: bold;

    display: block;

        position: absolute;

        margin-top: -320px;

        margin-left: -80px;

    }

    th{

    color: #5957a6!important;

    }

    OK, here is the color for the headers and the Return header in bold. The yellow is what you have already. And the green is the new CSS code.

     


  • Profile Image
    scottpiag
    Answered on February 13, 2018 at 05:31 PM

    I somehow lost one of the headers...


    1518561054Screen Shot 2018-02-13 at 5.30

  • Profile Image
    Jim_R
    Answered on February 13, 2018 at 07:31 PM

    Change the CSS codes you have for th.col4

    The margin-left value was too much, thus causing the EQUIPMENT label to disappear. Changing it to -610px should fix it.