Switch Composable Gets Clipped When Using Bootstrap CSS

[masah517]

YOUR BUG DESCRIPTION HERE

If relevant, specify:

• OS: M1 Mac
• Kobweb libs version: "0.20.0"
• Kobweb CLI version: 0.9.18

---

Steps to Reproduce

1. Import the Bootstrap 5 CSS in the module level build.gradle.kts.

<link 
    rel="stylesheet" 
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
/>

2. Use the Silk Switch Composable

Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        //Text("THIS PAGE INTENTIONALLY LEFT BLANK")
        Switch(
            checked = true,
            onCheckedChange = {},
            size = SwitchSize.LG,
        )
    }

3. Observe the size of the Switch.

Expected Behavior

The Switch should render correctly at its default size of 46px × 24px as shown when Bootstrap is not included.
(the SwitchSize.LG is used, and the default text size of my Chrome browser is 16.px)

Actual Behavior

The size of the Switch gets clipped down to 39.984px × 17.984px when Bootstrap CSS is included, as attached screenshot below.

Additional Context

I have prepared the basic project that can reproduce the above issue, so please kindly refer to it if required.
https://github.com/masah517/SwitchKobwebDemo

[masah517]

The Chrome browser version is : 131.0.6778.140

[DennisTsar]

Thanks for the detailed report!

Bootstrap's styling is fairly opinionated and unfortunately by default takes precedence over some of Silk's styles. However, you can give the Bootstrap styles lower precedence by importing it within a CSS layer, as described in this section of the README. With that change, Switch works as expected.

I'd recommend importing the Bootstrap styles in a layer regardless, but we could also fix this specific issue by removing Switch's questionable use of box-sizing: content-box, which is the property causing the styling to break.

[masah517]

@DennisTsar
Thank you for the prompt reply and for pointing me to the solution :)

I imported the Bootstrap styles within a CSS layer as suggested, and it resolved my issue perfectly.
Also good to know the clarification regarding the box-sizing: content-box property, which caused the conflict.

Thanks again for your quick and helpful response!

[masah517]

While using a CSS layer works well for me, I was wondering if there are any plans to remove the use of
box-sizing: content-box in the future?

I agree that using layers is a better solution overall, but I’m curious if this specific property might be revisited down the line.

[bitspittle]

You can definitely leave this bug open! We can close it after investigating the property. Either we should remove box-sizing if it's not necessary or at least we can explain why we need to keep it?

Thank you Dennis for the quick analysis btw.