Configurable List Widget Column Titles

  • Profile Image
    umhlanga
    Asked on March 07, 2018 at 02:53 AM

    Hi,

    Is it possible to reduce the font size and adjust the alignment (to "centre") of the column titles in the configurable list widget?

     

  • Profile Image
    onurc
    Answered on March 07, 2018 at 06:05 AM

    Hi,

    Sure it is possible. In order to edit your form in that way, you need to select this configurable list area and click widget settings option.

     

    1520420473Screen Shot 2018-03-07 at 13.5

     

    After clicking this option, you are going to see an Configurable List Settings area on the ride side. In this settings window, you need to select CUSTOM CSS  tab and add following CSS code at the end of this section.

    table#list th {

        text-align: center;

        font-size: 12px;

    }


    1520420591Screen Shot 2018-03-07 at 13.5

    You can also change properties over this window. For example, If you want to keep font size smaller or bigger, just you need to do change the value of font-size: 12px


    After this changes, your widget must be listed as you wish.

    If you have any question or comment, please let us know.

    Kind regards!

  • Profile Image
    umhlanga
    Answered on March 07, 2018 at 08:35 AM

    Thanks I have made good progress!

    Please could you take a look at the mock up below and let me know if its possible to recreate this using HTML/CSS and if so please let me know how.

    1520429721Custom-Widget.jpg

    Thanks again!

  • Profile Image
    TREVON
    Answered on March 07, 2018 at 10:49 AM

    The closest we can manage from the above is demonstrated below:

    https://form.jotform.com/80654359942971

    This is where you will have the tittle of the field in a single line. This can be achieved by reducing the font-size of the text since the texts in the field is very long.

    Inject the following CSS to your form(not the widget)

    .form-label-top, .form-label-left, .form-label-right, .form-html, .form-checkbox-item label, .form-radio-item label {

        color: #555;

        font-size: 13px;

    }

    Kindly feel free to clone and use the form.