Open dnozay opened 10 years ago
Hi, check if this is related to the fix I recently posted here: https://github.com/alxlit/bootstrap-chosen/issues/32
@mxmauro this doesn't work for me, I am not using large/small input-group
s plus I am not using chosen-single
.
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;
}
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.
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
)