Configurable List: How can I display the widget in multiple lines?

  • tshanks
    Asked on June 21, 2017 at 2:50 PM
  • Kevin Support Team Lead
    Replied on June 21, 2017 at 3:52 PM

    Please, allow me some time to work on the needed CSS code to split the widget, I will get back to you as soon as possible. 

  • Kevin Support Team Lead
    Replied on June 21, 2017 at 4:43 PM

    You will need to add some CSS code to the widget in order to display it in multiple lines, there is some part of the code that is static, it is the same for all the widgets and you could use the same code for all the Configurable List widgets. 

    th {

        display: none;

    }

    tr {

        display: block;

    }

    The next code will change based on the number of columns you have in your widget, if you notice the code it has each column number, it uses the column class to set the headers:

    .col1:before, .col2:before, .col3:before, .col4:before,.col5:before,.col6:before,.col7:before,.col8:before {

        font-weight: bold;

        display: block;

    }

    You will also need to set the column titles again, you will use the same class as above to set the title for each column, do note that it goes on the same order so for the first column you will use the class "col1" for the second one "col2" and so on, example: 

    td.col1:before {

        content:"Semester";

    }

    Just replace the value in "content" with the title your column should have. 

    Now, to handle the columns you will use the following code: 

    td.col5 {

        display: block;

        position: relative;

        top: 3px !important;

        margin-left: 0px;

    }

    The used class contains the column number so you could replace it with the column you want to affect with the code, you could also change the "top" and "margin-left" values. 

    Once you have finished with your code it needs to be injected to the widget, once you select the widget in the form builder you should click on the wizard icon, paste the code under the Custom CSS tab: 

    Configurable List: How can I display the widget in multiple lines? Image 1 Screenshot 20

    I can see on your form that it has still the default fields, you could configure the widget with the fields you want it to have and try customizing it with the CSS code, you may also let us know if you need help while doing it and we will be glad to assist you. 

    Here is a guide that will help you setting up the widget: How-to-Set-Up-the-Configurable-List-Widget

    Hope this helps.