Configurable List: how to put fields in two rows?

  • Profile Image
    deanburden
    Asked on February 19, 2020 at 02:43 PM

    I have completed a form but cannot get the Configurable List onto two lines...I've searched the forum and found some CSS designs and attempted to adapt them. They did put it onto two lines but messy...


    I'd like to put location / work carried out / working with onto a new line (with possibly of adding more)1582141315Screenshot 2020-02-19 at 19.40

    Any help greatly appreciated.

  • Profile Image
    gerardw
    Answered on February 19, 2020 at 06:22 PM

    Please allow me some time to get you the suitable CSS code to achieve your requirement and I'll revert via this thread.

  • Profile Image
    gerardw
    Answered on February 20, 2020 at 01:02 AM

    First go to the field properties and increase field width to 700:

    15821783682002_26.png

    Then please insert the CSS code below into the CSS tab of the Configurable List widget:

    th {

        display: none;

    }

    td.col1,

    td.col2,

    td.col3,

    td.col4,

    td.col5,

    td.col6,

    td.col7 {

        display: inline-block;

        float: left;

        font-weight: bold;

        padding: 20px 15px 1px 1px;

    }

    .col1:before {

        content: "Date";

        display: block;

    }

    .col2:before {

        content: "Start";

        display: block;

    }

    .col3:before {

        content: "Finish";

        display: block;

    }

    .col4:before {

        content: "Total";

        display: block;

    }

    .col5:before {

        content: "Location";

        display: block;

    }

    .col6:before {

        content: "Work carried out";

        display: block;

    }

    .col7:before {

        content: "Working with";

        display: block;

    }

    td.col1 {

        width: 30%;

    }

    td.col2 {

        width: 20%;

    }

    td.col3 {

        width: 20%;

    }

    td.col4 {

        width: 20%;

    }

    td.col5 {

        width: 20%;

    }

    td.col6 {

        width: 20%;

    }

    Related Guide: How-to-Inject-CSS-Codes-to-Widgets 

    Result:

    15821784832002_27.png

    Here is a demo form: https://form.jotform.com/200497092293963

    You can clone it if required: https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL 


  • Profile Image
    deanburden
    Answered on February 27, 2020 at 02:28 PM

    Thank you very much for your help. As you can probably see from my form I have been able to move things into a more manageable format from your help...

     

    I'd like it to be formatted suitable for mobile phones with the below fields on each line:

     

    1582832061Screenshot 2020-02-27 at 19.30

     

    Date / Status

    Start / Finish / Total

    Location of Work

    Work Carried Out

    Working With / Working With

     

    One line break between last field and '+ Add Further Date'

     

    I'd also like the list total to keep left - but can't get it to [can be be made to look smarter?] - with a visual background - white then slight grey to show each different form entry?

     

    A lot to ask but hopefully not impossible. Thanks in advance.

  • Profile Image
    FelipeSantana
    Answered on February 27, 2020 at 05:28 PM

    Hi @deanburden!

    Just to clarify, for the mobile view you would like to have the Date and Status fields to be aligned next to each other? And the same would go for the Worked With and Working With fields?

    Please do verify that these are the changes you'd like so that we can work on a CSS solution for you.

    As for the line break and the counter, you may use the following CSS code to adjust these sections for the mobile view:

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


    td.col9 {

    width: 80%;

    padding-bottom: 20px


    }


    tr::before{

    position: relative;

      left: -50px;

      top: -10px;

    }

    }

    Also, if you'd like the counter to be on the left side in the desktop view I would suggest adding this CSS before the @media code:

    tr::before{

    position: relative;

      left: -130px;

      top: -10px;

    }

    Please do test the CSS I have provided and let us know what other changes you'd like to see so that we can continue to assist you. We look forward to your response!

  • Profile Image
    IvayloK
    Answered on February 28, 2020 at 09:29 AM

    In order to make the Configurable list widget mobile responsive, please try to inject the following CSS code:

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

    #list tbody:first-child > tr:first-child {display: none;} #list {width: 100%; border-collapse: collapse;} #list tbody:first-child > tr > td{display:block; padding: 6px 0;} #list tbody:first-child > tr + tr + tr {border-top: 1px solid #ccc;} #list > tbody:first-child tr td.col1 {padding-top: 20px;} .mobileColumnName {display: inline-block; padding-bottom: 4px; width: 40%; box-sizing: border-box;} .mobileColumnName + input, .mobileColumnName + textarea, .mobileColumnName + select, .mobileColumnName + .radio-container, .mobileColumnName + .checkbox-container, .mobileColumnName + .dateContainer {width: 60%; display: inline-block; box-sizing: border-box; vertical-align:top; box-shadow:none;} .buttonsColumn {text-align: right;}

    }

    You should inject this CSS code in the widget.

    Can you please provide a screenshot, in order to illustrate your other question?

    We will wait for your response.

  • Profile Image
    deanburden
    Answered on March 02, 2020 at 12:31 PM

    IvayloK, 

     

    The above did not make any changes visible...

     

    These are the changes I'd like to make to the existing form. Col1 keeps recognising the list count [1] and then won't allow the Status to align?

     

    As long as Status goes next to date...I'm happy. If they could both fit on the page for mobiles.

    Additionally - worked with too.... My CSS is above in my previous post.

    1583169944Screenshot 2020-03-02 at 17.21

    Ideally I'd like a background colour change to separate each entry....

     

    [1] Date, Status, Start, Finish....etc [WHITE BACKGROUND]

    [+ Add Further Date]

    [2] Date Status, Start, Finish....etc [GREY BACKGROUND]

    [+ Add Further Date]

    [3] Date, Status, Start, Finish....etc [WHITE BACKGROUND]

    ....

     

    I worry my above CSS maybe contains an error? Can you check it and then post corrections with new CSS as required above please????

  • Profile Image
    FelipeSantana
    Answered on March 02, 2020 at 02:20 PM

    Hello @deanburden!

    I have tested the CSS that you added in your earlier response and I have found that it does work however it keeps each field in a separate line. You may try the following CSS to move the Date / Status and Worked with fields

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

    td.col1 {


        width: 40%;

        padding: 0


    }


    td.col2 {

        position: relative;

        left: 110px;

        width: 40%;

        padding: 0


    }

    td.col9 {

        width: 45%;

        padding-bottom: 20px;

        position: relative;

        left: 30px;

    }

    }

    You may also try the following CSS code for the background color changes you wish to make after a new time is created.

    tr:nth-child(even){

        background: white;

    }

    tr:nth-child(odd){

        background: gray;

    }

    tr:first-child{

        background: white;

    }

    Please do let us know if the above code solves your request. If not, we can certainly continue to assist you with making these changes. We look forward to your response!

  • Profile Image
    deanburden
    Answered on March 02, 2020 at 04:05 PM

    Hi FelipeSantana,



    Thank you for your code! The grey and white works brilliantly and latter two 'Worked With' - although the list now over-lays into the wrong place. 

    158318446350246A33-6C4C-4B36-9695-B03D12

  • Profile Image
    FelipeSantana
    Answered on March 02, 2020 at 05:52 PM

    Hello,

    My apologies for missing the counter section when editing the CSS. You can try the following code to move the counter to the top left of the section.

    tr:before{

    position: relative;

    top: -20px;

    left: -195px;

    }

    However, I have just noticed as I was running some tests that the "x" button to delete a date section is being blocked off by the status field. Please see the following screenshot of the mobile view of the form for reference:

    1583188711Screen Shot 2020-03-02 at 2.35 

    Unfortunately, there isn't sufficient space on the top to make these sections fit on the same line, however, you may want to move the "x" button to the bottom as a workaround. Please replace the previous CSS code with this one and let us know if you'd like any further adjustments:

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

    td.col1 {


        width: 40%;

        padding: 0


    }


    td.col2 {

        position: relative;

        left: 100px;

        width: 40%;

        padding: 0


    }

    td.col9 {

        width: 45%;

        padding-bottom: 20px;

        position: relative;

        left: 15px;

    }

    tr:before{

    position: relative;

    top: -20px;

    left: -195px;

    }

    td{

    vertical-align: bottom

    }

    }

    This is the outcome:

    1583189541Screen Shot 2020-03-02 at 2.51

  • Profile Image
    deanburden
    Answered on March 03, 2020 at 12:49 PM

    Im concerned there's been so much CSS injected into the form some parts are now conflicting with new entries. The background colours now don't display properly. Are you able to look at the CSS and make sure everything that's there should be and isn't conflicting?

    1583257422Screenshot 2020-03-03 at 17.43

    The position of the 'X' even at the bottom overlaps the 'Worked With' - could we add another carriage return to the below?

     

    The preview in the form maker actually presents differently to a mobile phone too - the counter looks correct on the preview but on mobile telephone its off-set from the left still. 

     

    1583257606IMG_2671.PNG

     

  • Profile Image
    FelipeSantana
    Answered on March 03, 2020 at 04:22 PM

    Hello @deanburden,

    I have checked your form and I am certain that the CSS is not conflicting, there may just be a difference in the styles based on the browser that you are using. May we know what browser you are opening the form in on your mobile device?

    After some further testing, I am seeing that the "X" button was overlapping with the "Worked With" field at the bottom and that the number at the top was also a bit off. I have made some adjustments to the mobile responsive CSS and here is the updated code:

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

    td.col1 {


        width: 40%;

        padding: 0


    }


    td.col2 {

        position: relative;

        left: 100px;

        width: 40%;

        padding: 0


    }

    td.col9 {

        width: 45%;

        padding-bottom: 20px;

        position: relative;

        left: 15px;

    }

    tr:before{

    position: relative;

    top: -20px;

    left: -215px;

    }

    td.col10.buttonsColumn {

        vertical-align: bottom;

        padding: 10px;

    }

    }

    After adding this CSS I checked the form from my mobile device (Samsung Galaxy S9 on Chrome browser) and this is the form as of now:

    1583270452Screenshot_20200303-130735_Sam

    Please test the CSS I have provided and let us know how you are seeing the form on your end. We can certainly continue to assist you with this. We look forward to your reply.

  • Profile Image
    deanburden
    Answered on March 05, 2020 at 04:39 PM

    I have been accessing the form via 'Safari' on iOS.

    This is how the form initially looks upon being opened/loaded....missing a border to the right as outlined in the below screenshot.

    1583444232IMG_2680.PNG

    Once you add a second entry it then expands the grey but misses the top right part as identified in the below screenshot.

    1583444202IMG_2679.PNG

     

    Additionally I'd like to add a space before and after each number (circled in a red circle) as they appear 'pushed together'.

     

    Thanks

  • Profile Image
    deanburden
    Answered on March 09, 2020 at 06:16 PM

    What are the chance of sorting the above? 

     

    I've had another idea and that's to have a black banner to separate each grey and white line. I've amended the code to how I think this should be and visually it works but doesn't work within the app or Safari as it distorts the fields...

    Form Builder and example of how I want it to visually look (minus above errors)

    1583792176Screenshot 2020-03-09 at 22.15

    Safari view:

     1583792350Safari.PNG

    I'd ideally like it better spaced out too...so the last fields on the Config Form has more of a space of the same colour before the black.

  • Profile Image
    BJoanna
    Answered on March 10, 2020 at 03:34 AM

    This thread is long and you already added a lot of custom CSS codes, and I'm not sure where to start. 

    Did you consider to make the configurable list responsive by following steps from this guide?

    How to Make the Configurable List Widget Mobile Responsive

    Here is a demo form with the CSS code from the guide - https://form.jotform.com/200691727415960

    I also added your CSS code to change the background color of the rows.