Datagrid 2 badge widget unify size

Hello guys! What css can I use on ths badge widget to make all badges same size regardless of the text inside?   It currently looks like this:   I need it to look like this:  
2 answers

Hi Diego,


The following code will make the label width the same as the column that it is fitted in, like this:


So when you resize the column, the label width will also be resized, which makes it responsive.


Apply the following CSS and add the class to your badge widgets. Again, you're free to name the class the way you like it.


.badge {
    width: 100%;
    padding-left: 0;
    padding-right: 0; 


Good luck!


Hi Diego,


I'm going to give you a little hint. If you want all the labels to be the same size regardless of the text within the label, you have to work with some kind of a fixed width. Because currently, the width of your label is based on the padding that is set on the text. More text > bigger label. So you have to experience with a fixed width. There are multiple ways to approach this. Keep in mind that all possible text options need to fit within the given width, otherwise the text might get wrapped, that's obviously not something you want to happen.


Good luck.