Option for changing component height

[gr8den]

No possibility change component height. 40px is hardcoded value

[eFrane]

This could be done via #420.

[mihalikv]

Is it currently possible somehow please ?

[mostafa-rio]

Right now you can Just overwrite the CSS classes and change the height.

[windows8prew]

Right now you can Just overwrite the CSS classes and change the height.

Can u tell which classes i have to change to edit height? Already a Headache

[dulerong]

@windows8prew

For me it was the multiselect__tags, originally it was 40px (if you look at source code below)
https://github.com/shentao/vue-multiselect/blob/master/src/Multiselect.vue

::v-deep {
    .multiselect__tags {
        min-height: 100px !important;
    }
}

By changing this, the initial height of the input box becomes larger.

I'm using ::v-deep because I'm declaring this overrirde in a parent component, inside scoped style

[FettahAud]

For me the best way to do it was this
Note: play with changable lines that have * above to get best match

  .multiselect {
    width: 200px;
    min-height: unset;
    .multiselect__select /*arrow styles*// {
      // if select got too much height chage those 
      padding-top: 12px;
      padding-bottom: 12px;
      height: 100%;
    }
    .multiselect__tags /*input warpper*/ {
      background: transparent;
      width: 100%;
      min-width: unset;
      display: flex;
      align-items: center;
      // *
      height: 50px;
      min-height: unset;
      padding-top: 0;
      justify-content: flex-start;
      // *
      padding-left: 12px;
      .multiselect__single,
      .multiselect__placeholder,
      .multiselect__input /*inside input, placeholder and search input */{
        background: transparent;
        margin: 0;
        padding: 0;
      }
    }
  }

Summary for what i did:
removed all static padding placements and rewrite it with flex-box to get more flexibility while changing the height of the input.
I also wanted to write the arrow style but it works for me right now

[vidhan63-soe]

can i contribute here?

[mattelen]

@vidhan63-soe thanks for your offer however you can edit the height via overriding the default CSS classes as discussed previously. There are thoughts around how we should change how the styling of the component should be done, and I believe this is part of that wider discussion.

[vidhan63-soe]

#891 is closed,so is there anything i can do as a full-stack developer here that might help

[schwartzadev]

this worked for me:

/* overrides for the multiselect component */
div.multiselect__content-wrapper li.multiselect__element,
.multiselect__option {
    min-height: 22px !important;
    max-height: 22px !important;
}

span.multiselect__option {
    padding: 3px 6px;
}