vue-multiselect icon indicating copy to clipboard operation
vue-multiselect copied to clipboard

Option for changing component height

Open gr8den opened this issue 7 years ago • 5 comments

No possibility change component height. 40px is hardcoded value

gr8den avatar Dec 17 '18 11:12 gr8den

This could be done via #420.

eFrane avatar Jan 10 '19 17:01 eFrane

Is it currently possible somehow please ?

mihalikv avatar Oct 21 '19 15:10 mihalikv

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

mostafa-rio avatar Oct 06 '20 17:10 mostafa-rio

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

windows8prew avatar Oct 26 '20 21:10 windows8prew

@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

dulerong avatar Jul 26 '22 21:07 dulerong

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

FettahAud avatar Oct 28 '22 08:10 FettahAud

can i contribute here?

vidhan63-soe avatar Aug 10 '23 17:08 vidhan63-soe

@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.

mattelen avatar Aug 10 '23 20:08 mattelen

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

vidhan63-soe avatar Aug 11 '23 09:08 vidhan63-soe