Tabulator: Footer not showing correctly

[Rodbjartson]

Describe the bug
When using a certain div button from the semantic ui framework, the tabulator fails to load a correct footer. Only a fraction of the footer is shown.
If I however, add an additional button, the footer is shown correctly.
So the footer shows correctly only when I add the second button

Tabulator Info

• 4.1.1 with jquery wrapper

 $("#Archived-table").tabulator({
                    height: 510, // set height of table, this enables the Virtual DOM And improves render speed dramatically (can be any valid css height value)
                    //minWidth: 20,
                    movableColumns: true, //enable user movable rows
                    layout: "fitColumns", //fit columns to width of table (optional) 
                    responsiveLayout: true,

                    columns: [ //Define Table Columns


                                { title: "Bestillingsnr", field: "NUMBER", width: 150, align: "center", headerFilter: "input",},
                                { title: "Leverandørnavn", field: "SUPP_NAME", align: "center", headerFilter: "input" },
                                { title: "Leverandørnr", field: "SUPP_CURRENTNO", align: "center", headerFilter: "input" },
                                { title: "Bestillingstype", field: "ID_ORDERTYPE", align: "center", headerFilter: "input" },
                                { title: "Ordredato", field: "DT_CREATED_SIMPLE", sorter: "date", align: "center", headerFilter: "input" },
                                { title: "Forventet levert", field: "DT_EXPECTED_DELIVERY", sorter: "date", align: "center", headerFilter: "input" },                               

                    ],


                //line of interest. Here I have two buttons, one is left floated and shows the number of rows, the scond is only a redo button. If I remove the redo button, it fails, as shown in the screenshots
                    footerElement: $('<div class="tabulator-footer"><div class="ui labeled left floated button" tabindex="0"><div class="ui blue button"><i class="copy icon"></i> Bestillinger</div><a class="ui basic blue left pointing label" id="rowcounterArchived"></a></div><button class="ui icon blue button" id="btnPOsetStandard"><i class="redo icon"></i></button></div>')[0] });

This will show the footer correctly. If I however remove the second button element, and use the footer like this:

footerElement: $('<div class="tabulator-footer"><div class="ui labeled left floated button" tabindex="0"><div class="ui blue button"><i class="copy icon"></i> Bestillinger</div><a class="ui basic blue left pointing label" id="rowcounterArchived"></a></div></div>')[0] });
It will fail, and the following screenshots will show the error
Screenshots

• OS: Windows 10
• Browser Chrome
• Version Latest

The button may look oddly implemented, but is taken from this website : semanticUI
I added "floated" to the class, since floated will make it float to the left

[olifolkerd]

Hey @Rodbjartson

If the element is floated then the parent element (ie the footer) cannot derive a height from it. that is why it works with the two buttons as the unfloated element causes the parent to have height.

That is not a bug so much as a fact of CSS styling, you can try it outside of the table and it would have the same effect on a standard div.

Cheers

Oli :)

[Rodbjartson]

Thank you!