Formatting fields in a list

[faisalahammad]

I didn’t find or miss any filter hooks that can help resolve the issue. However, as a workaround, you can try the following jQuery code.

1. First, add the “gf_change_list_fields” class to the Milestones → List → Appearance → Custom CSS Class.

2. Then, use the following jQuery code in the child theme’s JavaScript file or try the “Simple Custom CSS and JS” plugin.

Simple Custom CSS and JS

jQuery(document).ready(function($) {
    function updateFieldTypes() {
        var $secondInput = $('.gf_change_list_fields input:eq(1)');
        var $thirdInput = $('.gf_change_list_fields input:eq(2)');

        $secondInput.attr('type', 'date');
        $thirdInput.attr('type', 'number');
    }

    updateFieldTypes();

    $('.gf_change_list_fields .add_list_item').on('click', function() {
        updateFieldTypes();
    });
});

3. Try using the following CSS code in the style.css file of the child theme or in Appearance → Customize → Additional CSS to align the default calendar icon.

.gf_change_list_fields input[type="date"]::-webkit-calendar-picker-indicator { 
  margin-top: 10px;
}

So, the final output will look like the following screen recording.

And the entries will look like the screenshot below.

To modify the column/field width to 60%, 20% and 20%, try the following CSS code in the same location.

.gf_change_list_fields .gfield_list_group_item:first-child {
  flex: 3;
}

.gf_change_list_fields .gform-field-label:first-child {
  flex: 3;
}

Output:

Give it a try, and let me know how that goes!