Search code examples
jquerycsstwitter-bootstrapbootstrap-multiselect

Bootstrap multiselect changes height

I am using bootstrap multiselect in my MVC ASP.NET application. I have 3 requirements

  • When nothing is selected then dropdownlist should be blank.
  • The Caret postion should be on right of the dropdownlist.
  • The control should use entire bootstrap grid's column width

I was able to do that. Here is the JSfiddle

However the issue is whenever I set caret float:right or have empty as nonSelectedText ( as shown in jsfiddle example) the height of the control changes.
What should I do so control doesn't change the height.

Solution

  • You can use absolute positioned caret instead of floated and set min-height for .multiselect element.

    .multiselect {
  position: relative;
  min-height: 34px;
}
.multiselect .caret {
  position: absolute;
  right: 5px;
  line-height: 34px;
  display: inline-block;
  top: 50%;
  margin-top: -3px;
}

    JSFIDDLE