search

Choices-js / Choices

A vanilla JS customisable select box/text input plugin ⚡️
https://choices-js.github.io/Choices/
MIT License
6.06k stars 598 forks source link

when connecting via NPM, the select looks open #1076

Closed NikitinVladimirV closed 1 year ago

NikitinVladimirV commented 1 year ago

Describe the bug when connecting via NPM, the "select" looks open

To Reproduce Steps to reproduce the behavior:

  1. installed via NPM
  2. placed the "select" in HTML
  3. imported Choices in main.js
  4. wrote in main.js const element = document.querySelector('.js-choice'); const choices = new Choices(element);
  5. the "select" looks open

Expected behavior the select must be assembled into one line

Screenshots JS image HTML image RESULT image

Desktop (please complete the following information):

BrayanCaro commented 1 year ago

I think that the choices.css file is missing, you have several options to add it:

Load from a js file

You can add the choices.css in main.js

import Choices from "choices.js";
import "choices.js/public/assets/styles/choices.css";

const choices = new Choices('.select')

External CSS file

Let's say you have a CSS file called style.css, then you can add the styles:

@import "choices.js/public/assets/styles/choices.css";

/* more css ... */

And don't forget to load your stylesheet in your html:

<html>
  <head>
    <!-- more tags ... -->
    <link rel="stylesheet" href="/style.css">
  </head>
  <body>
    <select class="select">
        <option>1</option>
        <option>2</option>
    </select>
    <script type="module" src="/main.js"></script>
  </body>
</html>

Note you can also use choices.min.css instead of choices.css. And of course, you can use choices.scss for more customisation but that is another topic.

NikitinVladimirV commented 1 year ago

Thanks! I have already found a solution. Forgot to connect styles "Choices.js")