Configurable list over 2 lines

  • Profile Image
    tracyalexander
    Asked on March 11, 2016 at 10:40 AM

    https://form.jotformeu.com/60675308484361

    The configurable list for cattle entries is too squashed.  I would like the AI, AI Class and Sire Name to go onto a second line.

    Also is it possible for AI Class and Sire Name only to be shown when AI has Yes selected?

    Thank you for your help

    Tracy

  • Profile Image
    Kiran
    Answered on March 11, 2016 at 12:15 PM

    Unfortunately, it is not possible to apply conditions with Configurable list widget. I'm working on the CSS code to be applied to the widget in order to display the fields in two lines. I'll get back to you once I complete the CSS code to your form. 

    Thank you for your patience. 

  • Profile Image
    Kiran
    Answered on March 11, 2016 at 01:09 PM

    Thank you for being patient. Please inject the following CSS code to the widget to split the columns into two lines.

    #list > tbody > tr:first-child {

        display: none;

    }

    td.col1:before {

         content: "Class No";

         display: block;

    }

    td.col2:before {

         content: "Name of Animal";

         display: block;

    }

    td.col3:before {

        content: "Tag No";

        display: block;

    }

    td.col4:before {

         content: "AI";

         display: block;

    }

    td.col5:before {

         content: "AI Class";

         display: block;

    }

     

    td.col6:before {

         content: "Name of Sire (If In AI Section)";

         display: block;

    }

    td.col4 {

         float: left;

         left: -310px;

         position: relative;

         top: 55px;

    }

    td.col5 {

         float: left;

        left: -300px;

        position: relative;

        top: 55px;

    }

    td.col6 {

        float: left;

        left: -280px;

        position: relative;

        top: 55px;

    }

    td.col7 {

         left: -200px;

         position: relative;

    }

    tr {

        height: 110px;

    }

    After applying the CSS code above to the widget, it should be displaying the columns in two lines as shown below: 

    You may change the numbers to change the position as per your requirement.

    Please get back to us if you need any further assistance. We will be happy to help. 

  • Profile Image
    Kiran
    Answered on March 11, 2016 at 01:12 PM

    Though you may be aware, just to let you know that the CSS code is to be injected to the Custom CSS section of the Configurable List widget. Please see the screenshot below:

    Please let us know if we can be of any further help. Thank you! 

  • Profile Image
    tracyalexander
    Answered on March 11, 2016 at 02:00 PM

    That is great thank you,

    only thing is my field headings are now not bold - how can i make them bold
  • Profile Image
    Charlie
    Answered on March 11, 2016 at 02:07 PM

    I have opened a separate thread for the follow up concern that you have, this is to better discuss and help you on it. Please refer to this link instead: http://www.jotform.com/answers/792927. We will address it accordingly. Thank you.

  • Profile Image
    tracyalexander
    Answered on March 11, 2016 at 02:18 PM

    I have been trying to move my fields about but they in a muddle now.

    I need text class one to be in one line but dont reduce the size of my other fields in that line

    I need Name of Sire to come up on the same line as AI and AI Class.  I also want name of sire to be same length as Name of Animal.  AI and AI Class can be closer together

    I have copied my CSS code in below

    Thank you very much

    #list > tbody > tr:first-child {

     

        display: none;

     

    }.col2 input[type=text] {

    width: 300px;

    }

    }

    .col1 {

     

    width: 70px;

     

    }

    td.col1:before {

     

         content: "Class No";

     

         display: block;

     

    }

     

    td.col2:before {

     

         content: "Name of Animal";

     

         display: block;

     

    }

     

    td.col3:before {

     

        content: "Tag No";

     

        display: block;

     

    }

     

    td.col4:before {

     

         content: "AI";

     

         display: block;

     

    }

     

    td.col5:before {

     

         content: "AI Class";

     

         display: block;

     

    }

    td.col6:before {

     

         content: "Name of Sire (If In AI Section)";

     

         display: block;

    }

     

    td.col4 {

     

         float: left;

     

         left: -428px;

     

         position: relative;

     

         top: 45px;

     

    }

     

    td.col5 {

     

         float: left;

     

        left: -380px;

     

        position: relative;

     

        top: 45px;

     

    }

     

    td.col6 {

     

        float: left;

     

        left: -350px;

     

        position: relative;

     

        top: 45px;

     

    }

     

    td.col7 {

     

         left: -200px;

     

         position: relative;

     

    }

     

    tr {

     

        height: 110px;

     

    }

  • Profile Image
    Kiran
    Answered on March 11, 2016 at 03:06 PM

    Please remove the CSS code from the Custom CSS code in the widget and add the following CSS code to align the fields properly and to have bold labels for headings.

    #list > tbody > tr:first-child {

        display: none;

    }

    .col2 input[type=text] {

    width: 300px !important;

    }

    .col6 input[type=text] {

    width: 300px !important;

    }

    .col1 {

    width: 70px;

    }

    td.col1:before {

         content: "Class No";

         display: block;

         font-weight: bold;

    }

    td.col2:before {

         content: "Name of Animal";

         display: block;

         font-weight: bold;

    }

    td.col3:before {

        content: "Tag No";

        display: block;

        font-weight: bold;

    }

    td.col4:before {

         content: "AI";

         display: block;

         font-weight: bold;

    }

    td.col5:before {

         content: "AI Class";

         display: block;

         font-weight: bold;

    }

    td.col6:before {

         content: "Name of Sire (If In AI Section)";

         display: block;

         font-weight: bold;

    }

    td.col4 {

         float: left;

         left: -504px;

         position: relative;

         top: 45px;

    }

    td.col5 {

         float: left;

        left: -482px;

        position: relative;

        top: 45px;

    }

    td.col6 {

        float: left;

        left: -350px;

        position: relative;

        top: 7px;

    }

    td.col7 {

         left: -200px;

         position: relative;

    }

    tr {

        height: 110px;

    }

    It should be displaying now as shown below:

    Hope this information helps! Please get back to us if you need any further assistance. We will be happy to help. 

  • Profile Image
    tracyalexander
    Answered on March 11, 2016 at 04:27 PM

    Hi

    I deleted the code  had and copied and pasted yours in but Its not showing right (see image) - If I could have it as you show above but have the second line indented in so it starts in line under name of animal that would be perfect

  • Profile Image
    Nik_C
    Answered on March 11, 2016 at 05:15 PM

    I modified my colleague's code as you requested, the second line on your form should be indented when you inject the custom CSS code i provided.  

     

    #list > tbody > tr:first-child {

     

        display: none;

     

    }

     

    .col2 input[type=text] {

     

    width: 300px !important;

     

    }

     

    .col6 input[type=text] {

     

    width: 300px !important;

     

    }

     

    .col1 {

     

    width: 70px;

     

    }

     

    td.col1:before {

     

         content: "Class No";

     

         display: block;

     

         font-weight: bold;

     

    }

     

    td.col2:before {

     

         content: "Name of Animal";

     

         display: block;

     

         font-weight: bold;

     

    }

     

    td.col3:before {

     

        content: "Tag No";

     

        display: block;

     

        font-weight: bold;

     

    }

     

    td.col4:before {

     

         content: "AI";

     

         display: block;

     

         font-weight: bold;

     

    }

     

    td.col5:before {

     

         content: "AI Class";

     

         display: block;

     

         font-weight: bold;

     

    }

     

    td.col6:before {

     

         content: "Name of Sire (If In AI Section)";

     

         display: block;

     

         font-weight: bold;

     

    }

     

    td.col4 {

    padding-left: 75px;

         float: left;

     

         left: -504px;

     

         position: relative;

     

         top: 45px;

     

    }

     

    td.col5 {

     

         float: left;

     

        left: -482px;

     

        position: relative;

     

        top: 45px;

     

    }

     

    td.col6 {

     

        float: left;

     

        left: -350px;

     

        position: relative;

     

        top: 7px;

        padding-left: 50px;

    }

     

    td.col7 {

     

         left: -200px;

     

         position: relative;

     

    }

     

    tr {

     

        height: 110px;

     

    }

    To inject custom CSS code you need to add the CSS code to your Custom CSS field in the Configurable list widget wizard.

    NOTE: You will have to delete any CSS code that was in the Custom CSS tab text field previously before pasting the new CSS code for this to work.

    Please let me know if this this works for you.

  • Profile Image
    tracyalexander
    Answered on March 11, 2016 at 05:39 PM

    Thanks for trying to help me

    I deleted all the css code in the configurable list then copy and pasted the code given but it still not looking right?

     

     

  • Profile Image
    Kiran
    Answered on March 11, 2016 at 05:57 PM

    I've added the following code to your JotForm directly and see that the configurable list is displaying the fields properly.

    .col1 select {

        width: 80px;

    }

    and reduced the left margin to -325px for td.col6.

    Please check you JotForm now and let us know if you need any further assistance. We will be happy to assist. 

    Thank you! 

  • Profile Image
    tracyalexander
    Answered on March 12, 2016 at 02:38 AM

    That is perfect

    Thanks very much for your help, I appreciate it

  • Profile Image
    tracyalexander
    Answered on March 25, 2016 at 03:39 PM

    Hi

    I have just noticed that the 'Delete Entry' button for this configurable list that you made for me is off the page - can you please fix this for me?

     

    https://form.jotformeu.com/60675308484361

    Thanks

    Tracy

     

  • Profile Image
    Kiran
    Answered on March 25, 2016 at 03:48 PM

    I've now changed the CSS code for Delete Entry field to display correctly. This is how the button Delete entry is displayed on your form now.

    Please let us know if we can be of any further help. Thank you!