Joomla subForm Field improvements

Joomla subform field in J5 still has the fundamental flaw that there is no native way of adjusting the column widths according to the needs of the different field type. Also hidden fields take up space. And trying to use a calendar field in a default subform breaks the layout as the calendar icon appears too large and on a second line. 

The default is that the columns all take an equal slice of the available space with 8% reserved for the buttons at the right hand end of the row. So if you have four columns they each get 20% (5 columns including the buttons)

Here's my workaround for this using CSS.

 This targets the particular subform table by name, but you could change it to apply to a class name that you would apply to any targeted subforms.

<style>
/* set colum,n widths for schedule table - override Joomla default share space equally*/
    #subfieldList_jform_schedulelist thead th:first-child { width:70px !important; color:grey; }
    #subfieldList_jform_schedulelist thead th:nth-child(2) {width:70px !important; color:grey; }
    #subfieldList_jform_schedulelist thead th:nth-child(3) {width:100px !important; color:green; }
    #subfieldList_jform_schedulelist thead th:nth-child(4) {width:100px !important; color:red; }
    #subfieldList_jform_schedulelist thead th:nth-child(5) {width:250px !important; color:green; }
    #subfieldList_jform_schedulelist thead th:nth-child(6) {width:250px !important; color:red; }
    #subfieldList_jform_schedulelist thead th:nth-child(7) {width:unset !important; }
    #subfieldList_jform_schedulelist thead th:nth-child(8) {width:125px !important; }
    #subfieldList_jform_schedulelist thead th:nth-child(9) {width:125px !important; }
    #subfieldList_jform_schedulelist thead td {width:unset !important;}
/* set style for calendar controls on subform */
    #subfieldList_jform_schedulelist .field-calendar .input-group {flex-wrap:nowrap;}
    #subfieldList_jform_schedulelist .field-calendar .input-group button  
    {background-color: #fff;
        color: #777;
        border: 1px solid;     
        border-color:  #B8C9E0 #B8C9E0 #B8C9E0 transparent;                                                              
        font-size: 1.2rem;
        padding: 0 15px;
    }
</style>

The above example a subform with two read-only numeric fields, then two time fields (one red and one green), then two date fields (again one red, one green), Then a text column which can be variable width to soak up any excess, then two columns with radio controls rendered as buttons and finally the form control buttons again with unspecified width.

The bottom two lines are modifications for rendering a calendar control inside a subform (see the two date columns as example). The styling for the calendar is adjusted to match the time fields which are using the default style. The calendar popup date selector works as normal.

 

The result looks like this:

subform screenshot

Of course this is not properly responsive layout as a lot of columns are fixed width but it is intended for use on admin pages where a mobile or small screen device is not appropriate anyway.

Tags:
Joomla:
j5