search

orchidjs / tom-select

Tom Select is a lightweight (~16kb gzipped) hybrid of a textbox and select box. Forked from selectize.js to provide a framework agnostic autocomplete widget with native-feeling keyboard navigation. Useful for tagging, contact lists, etc.
https://tom-select.js.org
Apache License 2.0
1.66k stars 122 forks source link

[Bug]: bootstrap 5.3 styles bug #754

Open Datzu712 opened 2 months ago

Datzu712 commented 2 months ago

Bug description

I'm using bootstrap 5.3.3 with tom select 2.3.1 and when I try to create a select, there is a strange box around the select: image

Expected behavior

I think it should look something like this for example: image

Steps to reproduce

You can check what I mean here: https://codepen.io/Datzu712/pen/zYVdRvo?editors=1000 image

I realized what happens when you put the form-select class in it that weird border appears

Additional context

xJuvi commented 2 months ago

Hey it's not a bug. Your use the regular Theme. For bootstrap add bootstrap5 to the css link. You can find the alternative theme files (bootstrap) in the dist folder on jsdelivr.

After changing the css file to the correct one the select looks like expected.

Kind regards.

body-clock commented 2 months ago

Yeah, I think the Styling Examples page on the main site is a little confusing. I don't really understand what it's trying to communicate. Left column with no item styling and right column with item styling? I ran into this same behavior when I was attempting to style with Bootstrap 5. Just import the bootstrap theme CSS instead of the main CSS and you should be good.

xJuvi commented 2 months ago

The styling example only show the results from different bootstrap options. The key point which solce your problem is to change the main css against the bootstrap5 css - otherwise the bootstrap styling doesn't take effect.

body-clock commented 2 months ago

Yeah, I'm aware - you may be responding to OP and not me, but I do think it's worth mentioning that the styling page leads a new user to believe that they can add these classes to apply the Bootstrap theming. I think, since both me and the other user ran into this issue, there is an opportunity to improve the docs/language on that page to better communicate how to style Tom Select with Bootstrap.