Vue-select: v-select inside bootstrap coumn gives bad result

[goalie7]

Hello!

Whenever I put the v-select component inside a bootstrap col-- I get the following result:

Any ideas on how to solve it? Anyone experiences the same?

Regards

[goalie7]

Okai it seems that is something related with the select width. If I set the label tol col-md-4 and the v-select to col-md-8 is working as expected.

Anyways what if I dont want the v-select component to be so large?

[sagalbot]

Text input requires too much horizontal space

[stefan-angelov]

I had the same problem and solved like this :

.v-select {
        .dropdown {
          .dropdown-menu {
            min-width: initial;
          }
        }
        .dropdown-toggle {
          display: flex;
          flex-wrap: wrap;
          .selected-tag {
            position: relative;
            padding: 0px 15px 0px 5px;
            margin: 2px 1px 2px 3px;
            height: auto;
            button {
              position: absolute;
              right: 2px;
              top: 50%;
              transform: translateY(-50%);
              span {
                vertical-align: super;
              }
            }
          }

          input[style] {
            flex-basis: 20px;
            flex-grow: 1;
            height: 33px;
            padding: 0 20px 0 10px;
            width: 100% !important;
          }
        }
      }

[sagalbot]

@stefan-angelov would you like to do a PR with that fix?

[camilosw]

Any hope to see this solved?

[MohammadSabbagh]

@stefan-angelov solution is working as following

.v-select .dropdown-toggle {
display: flex !important;
flex-wrap: wrap;}

.v-select input[type=search], .v-select input[type=search]:focus {
flex-basis: 20px;
flex-grow: 1;
height: 33px;
padding: 0 20px 0 10px;
width: 100% !important;
}

[niti11]

Hi All
How can we add the css to this select box.
I want to remove the border for select box & also want to set postion as top for the option box.

I tried this way.
.v-select .dropdown-toggle
{
border: none !important;
}

But It doesn't work for me. Can you help me on this?

[stayacid]

worked for me:

.vs__selected {
  +input {
    position: absolute; // remove input from document flow if something selected
  }
}
.vs--single.vs--open {
  .vs__selected {
    position: relative; // keep height if dropdown is open
  }
}