Bootstrap 4 Badges inside a table

Bootstrap 4 Badges inside a table

dt1 dt1 Posts: 52Questions: 5Answers: 0

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

Replies

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

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

    Allan

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

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

    Kevin

  • dt1 dt1 Posts: 52Questions: 5Answers: 0

    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',
                        },
                        ]
    
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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 dt1 Posts: 52Questions: 5Answers: 0

    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>' : '';
    },

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

This discussion has been closed.