How to implement multiselect options?

Bootstrap Studio Help
1

Hi all.

I need to implement a multiselect options component (something like this: Bootstrap Multiselect - free examples, templates & tutorial) but couldn’t find any in the Bootstrap Studio.

Is it something in the works?
If not, could somebody kindly share a workaround?

Thanks

2

Hiya Shrey and welcome to the BSS Forums!

You would need to recreate that manually within BSS. Forms aren’t something that are default to Bootstrap and MDBootstrap is another take off of Bootstrap so you won’t find those items within BSS by default.

All of the components needed should be in the Form section of the components list. You’ll need the functionality to make it work of course, but I think you may need that with MDBootstrap as well so you’ll basically be creating the frontend only, the backend functionality would be up to you how to do it.

3

You could try using choices JS which will give you something like this:

https://frosty-lake-1088.bss.design/

2 Likes
4

This is an awesome suggestion. Thanks!

1 Like
5

Hi @richards. I am running into an issue with the Choices library that i could use your feedback on.

The issue is, the original styling of the Select component, set by BSS, is getting completely overruled even though i haven’t set any styling options in Choices. Also, the Select input box actually shrinks down to a width of around 5px when no choice has been selected. Upon inspection in Chrome, i see that the input box doesn’t even have a min-width property anymore, even though the one in BSS did.

What do you think I might be overlooking or need to pay specific attention to?

Thanks

6

I’m not really sure what you are trying to achieve as it box comes out full width when I try (can you post your file on the bss server?) but the styles will created by the external link to choices.min.css

You could either overwrite the css in bootstrap, maybe look at the .choices__inner class.

You could remove the link to the external file, and instead create a css file within bss and add the contents of : https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.css

You can view more about choices here:

7

Hi @richards ,

I’ve published the site here:
https://choice-testing-1.bss.design/

Just tried implementing a very basic setup, with no custom CSS. Same erroneous result.

8

Do you need to use an input group, seems to work better using a select with an input and label as my example.

If you do need to use an input group, then you will have to try experimenting with the .choices class

9

Thanks for that input.
Indeed, it does seem that the Choices select doesn’t work well with being put into a container besides Fieldset or Form.

10

You could do something similar to an input group like this:

 
    <div class="d-flex"><span class="input-group-text">Choose your Pizza</span><select id="pizzas" class="form-select flex-grow-1 align-content-around" multiple>
            <option value="Meat Feast">Meat Feast</option>
            <option value="Margherita">Margherita</option>
            <option value="14">Pepperoni Classico</option>
            <option value="Prosciutto &amp; Funghi">Prosciutto &amp; Funghi</option>
        </select></div>

css:

.choices__list--multiple .choices__item {
  background-color: var(--bs-dark);
  border: 1px solid var(--bs-gray-800);
  border-radius: 0px;
  color: var(--bs-warning);
}

.choices__inner {
  display: inline-block;
  vertical-align: top;
  width: 100%;
  background-color: #ffffff;
  padding: 7.5px 7.5px 3.75px;
  border: 1px solid #ddd;
  border-radius: 2.5px;
  font-size: 14px;
  min-height: 44px;
  overflow: hidden;
}

.choices__input {
  background: none!important;
}

.choices {
  width: 100%;
}
1 Like