Bootstrap 4 Badges inside a table

dt1

Hi,
Have someone tried to implement the classes "Badge Badge-Secondary" on a column in a table?
It would give unexpected results such as:
1. This will somehow afftets also the style of the Table header
2. On sorting we will loose the the original Badge styling
3. If there is an empty field in the column it will cause a shift/missalignmnet of Headers and raws

You can easily test this with any table code

Thanks
Elan

allan

There was a question on this exact topic yesterday - that thread is available here.

Allan

kthorngren

Maybe you can put together an example showing the issues. You can probably start with the examples provided in the other thread.

Kevin

dt1

Hi,
i still have this issue with Bootstrap4 badges.
As soon as you add the Badge classes to a column definition you can see that the Table Header also gets this class. Strange.
columns: [

                    {
                        data: "tblhomesinsurance.Premium",
                        className: ' badge badge-secondary',
                    },
                    ]

allan

This is expected. The columns.className is applied to the header as well as the body cells for the column.

If you don't want it to style the header, you'd need to add override styles to remove the styling for the cells in thead.

Allan

dt1

Thank you for the answer but I think that this is not the way it should be. It is not recommneded and not easy to overide the Bootstrap classes. So why apply it to the header at all?

In addition, if you use the Render function in a table to generate the field and the outcome is null the visual effect of the Badge Class will mis allign the emty Columns.

data: "files",
"className": 'dt-body-center',
render: function (d) {
return d.length ?
d.length + ' <i class="far fa-file-alt" aria-hidden="true"></i>' : '';
},

allan

Its often useful to have the same class on the header as the cells in a column for typography (e.g. alignment) or styling of a specific column type to be consistent (e.g. a blue background down the coloum). While it might not be useful in your case, it is a generalisation that I think it correct, and as I say, you can use CSS to remove any styling you don't want.

I don't recall anything in the Bootstrap docs saying you can't overide their styles to suit your needs, but I might have missed it.

If you give me a link to the page showing the issue I can show you the CSS that would be needed.

Allan