Custom CSS not correctly aligning links in table column

💬 App Building
, ,
1

I have a table with a custom column (HTML) which displays links as tags. Right now it is cutting off part of the tag. I tried verticle align but for some reason only the first link looks ok but the subsequent links do not.

My CSS skills are rusty at best. Any ideas?

chrome_mKPq2ZuBaW

Here is the CSS:

.category-badge {
    vertical-align: top;
    cursor: pointer;
    background-color: #007bff;
    color: white !important;
    padding: 2px 8px;
    border-radius: 15px;
    margin: 2px 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 500;
    text-decoration: none !important;
    line-height: 1;
    min-height: 16px;
    white-space: nowrap;
    transition: background-color 0.2s ease-in-out;
}

.category-badge:hover {
    background-color: #0056b3;
    color: #fde38a !important;
}

Here is the mapped value for the categories:


{{ item.map(cat => 
  `<a href="#${cat.id}" 
     class="category-badge"
     data-row-id="${item.id}" 
     data-cat-name="${cat.name}"
     onclick="console.log('Clicked:', '${item.id}', '${cat.name}'); window.setCategoryChoice('${item.id}', '${cat.name}');">
     ${cat.name}
   </a>`).join(' ')
}}
2

Hi @Shawn_Optipath,
I can try to help you with this. Can you send me your exported json file for this app?

Download it like this:

CleanShot 2025-03-24 at 14.01.01@2x
CleanShot 2025-03-24 at 14.01.01@2x890×754 45.8 KB

Thanks! :grinning:

3

Hi @lindakwoo,
Below is a json file of a sample app. Data as well. Thank you!

Link actions (1).json (31.5 KB)
category_selections.csv (369 Bytes)

4

Hi @Shawn_Optipath ,
I have found that there is global css that is affecting the first-child in your container, setting its top margin to 0.

CleanShot 2025-03-24 at 15.53.44@2x
CleanShot 2025-03-24 at 15.53.44@2x886×224 20.2 KB

I believe that is what you want for ALL of your tags, so if you go into your css and in your .catetegory-badge class, set the margin as follows:

margin: 0px 4px;

it should fix your alignment issue.

I hope this helps! :grinning:

1 Like
5

Thank you @lindakwoo. That did the trick. :grinning:

6

nice! glad to hear it.