It doesnt work with floating inputs

[hightowertech]

trafficstars

Describe the bug Bootstrap 5 has floating inputs, tomselect doesnt seem to recognize them.

To Reproduce Create an example on JSFiddle, CodePen or similar service and outline the steps for reproducing the bug.

1. use the tomselect bootstrap 5 css
2. make a form-floating select tag https://getbootstrap.com/docs/5.3/forms/floating-labels/#example

Expected behavior at least look like a floating label https://i.imgur.com/d2m67Ht.png ^look like the select on the right side [im working on this now but i may abandon it]

[hightowertech]

.ts-wrapper.form-control, .ts-wrapper.form-select {
	height:calc(3.5rem + calc(var(--bs-border-width) * 2));
    font-size: 12px;
    margin: 0 25px 0 0;
	line-height:1.25;
}

.ts-control{
padding: 1.5rem 0.25rem 0.625rem 0.25rem!important
}

this fixes it for me so far [windows10 > chrome].

i barely know how to use git and cant stop to put this in now but i will try later tonight. if its been 2 days and i didnt do it, i didnt make it and youll have to go without me lol

**this works when you're using tags, needs some tweaks for other cases

[github-actions[bot]]

This issue has not been active in 120 days and has been marked "stale". Remove stale label or comment or this will be closed in 15 days

[AgentSmith0]

@oyejorge It would be nice to get this implemented. bootstrap-select has this feature: https://github.com/snapappointments/bootstrap-select/pull/2784

[oyejorge]

It would be nice! Feel free to submit a pull request with an implementation.

[AgentSmith0]

@oyejorge Hi, I don't have a PR, but I tested the following CSS which can be added, it works very well:

.form-floating .ts-control {
	padding-top: 1.625rem;
	padding-bottom: .625rem;
}
.form-floating .ts-wrapper.form-control, .form-floating .ts-wrapper.form-select {
	height: 0 !important;
}

You can try this example: https://getbootstrap.com/docs/5.3/forms/floating-labels/#example You just need to initialize the select element and it will work with the CSS.

Would be nice if you add this.

[silent-e]

Anyone figured out how to get the label to actually shift position based on the :placeholder-shown status like Bootstrap does? My current workaround is to not care and leave the Label in the up position while using "Select a value or enter a new one" as the placeholder. Looks nice enough for me right now. YMMV based on if you accept new values.

[Nexotap]

I can confirm @AgentSmith0 solution. I'm absolutely bad in creating PR's else I would have made one. Would be happy seeing this implemented in near future.

[github-actions[bot]]

This issue has not been active in 120 days and has been marked "stale". Remove stale label or comment or this will be closed in 15 days