css discrepancies with bootstrap input-group.

[dnozay]

see http://jsfiddle.net/dnozay/Rfv6t/5/

I am trying to get a multi-select in the navbar. but I cannot get it to look right; I am not a css expert and only spent half a day at it. My goal is to make a filter bar with a button input-group where the button gets resized if you have more filters.

button doesn't get resized and doesn't really look like an input-group.

i've looked at some other stuff (posted here for reference)
http://akrabat.com/software/styling-a-chosen-select-to-fit-bootstrap-3-better/
http://stackoverflow.com/questions/18355026/chosen-js-styling-not-conforming-to-bootstrap3-styles
https://gist.github.com/koenpunt/6424137 (tried with and without padding)

[mxmauro]

Hi, check if this is related to the fix I recently posted here: #32

[dnozay]

@mxmauro this doesn't work for me, I am not using large/small input-groups plus I am not using chosen-single.

[Soundvessel]

The following isn't fully tested or cross-browser tested but I believe it a good start for those looking to fix both single and multiple selects in cases of form and input group sizing.

For chosen-single it is as simple as applying the .input-sm(); and .input-lg(); mixins and adjusting the position of the <b> element, the arrow, to be centered. I had to shave some of the height off of the LG version because another piece of the sprite was coming through on hover.

For multi-selects I utilized input height variables from Bootstrap's variables.less but applied them to min-height so the container could grow as more tags are selected. You'll likely need to shave off some top/bottom margins off of the selections like I have done here for the SM display to keep them from growing the height before they wrap to the second row.

I also ran into the issue where the disabled text was getting truncated by JS applying a shorter width to the search field for multi-selects. I fixed this using first-child to target that field only when there are no choices and forced 100% width. I also fixed the height of this so the disabled text is centered but not out of the alignment in the LG version when a tag is selected.

// https://github.com/alxlit/bootstrap-chosen/issues/32
// + Coplex custom fixes

.input-group-lg,
.form-group-lg {

  .chosen-single {
    .input-lg();
    // arrow vertical alignment fix
    b {
      position: relative;
      top: 6px;

    }
  }

  .chosen-container-single .chosen-single b {
    // hide other pieces of sprite
    height: 50%;
  }

  .chosen-choices {
    // fix height
    min-height: @input-height-large;

    // larger multi-select search only intially for better post tag selection alignment
    li:first-child input[type="text"] {
      height: (@input-height-large - 2);
    }
  }
}

.input-group-sm,
.form-group-sm {

  .chosen-single {
    .input-sm();
    // arrow vertical alignment fix
    b {
      position: relative;
      top: -2px;
    }
  }

  .chosen-choices {
    // fix height
    min-height: @input-height-small;

    // smaller multi-select items
    .search-choice {
      margin: 4px 4px 3px;
      font-size: @font-size-small;
    }

    // smaller multi-select search
    .search-field input[type="text"] {
      font-size: @font-size-small;
      height: (@input-height-small - 2);
    }
  }
}

// Coplex custom fix so disabled text isn't cutoff

.chosen-container-multi .chosen-choices li:first-child input[type="text"] {
  width: 100% !important;
}

[philipstratford]

I don't know how to code in Less or Sass, but I had to add some lines to my compiled .css file, after incorporating @Soundvessel's code (good work, by the way!) to style the 'deselect' icon correctly for controls in form-group-lg and form-group-sm.

Specifically, selecting the abbr element type, I added top:18px for input-group-lg and top:10px for input-group-sm.