Appointment Slots Widget: Split list into several columns using CSS

  • Profile Image
    Asked on February 20, 2018 at 07:43 AM


    I have been using the appointment slots widget and I have many separate appointments which makes the list very long.  I would like to have them in multiple columns so that each is not too long and in time order across then down the columns:

    14:30 - 14:35       14:35 - 14:40     14:40 - 14:45

    14:45 - 14:50       14:50 - 14:55     14:55 - 15:00

    Please can you help me with the code?



  • Profile Image
    Answered on February 20, 2018 at 09:54 AM

    To edit the you appointment slots into columns, first we need to increase the width of the widget.

    Go to your  Properties>GENERAL>Width:900

    After, we can now input the custom css in the widget.

    In your Widget Setting select CUSTOM CSS.

    then insert these custom css codes.

    #checklist li{


    height: 80px;

    border-right: 1px solid lightgray;

    width: 24.8% !important;


    Here is a sample screen cast.

    Please let us know if we can be of further assistance.

  • Profile Image
    Answered on February 20, 2018 at 10:29 AM

    Thanks Richie_P, that's fantastic!