A CSS rule could be more targeted to not interfere with others

[francis-chiss]

I was using the Bootstrap dropdown inside a table, and after installing this library, its cosmetics changed (the arrow down dissapeared).

I quickly tracked it down to the following CSS rule in blazor.bootstrap.css :

Putting content: "" instead made it work, but that's obviously not the best fix.

I presume this rule is there so that other components using it (DatePicker? other?) are sized correctly, but as stated previously, it's also impacting non-related elements.

[gvreddy04]

@francis-chiss Thank you for using our components. Could you please share a sample code or GitHub repo to understand the scenario?

[francis-chiss]

Sure, just use the following in a Blazor page:

<table>
    <thead><td>Like Bootstrap suggests</td><td>With workaround</td></thead>
    <tbody>
    <td>
        <button class="btn btn-primary btn-sm pb-0 dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"></button>
    </td>
    <td>
        <button class="btn btn-primary btn-sm pb-0 dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
            <i class="bi-caret-down-fill" style="font-size: 0.6rem; vertical-align: middle"></i>
        </button>
    </td>
    </tbody>
</table>

And in Chrome, this gives me the following visual: