Vertical alignment multiple spans inside div with variable height (ui-select-multiple)

Question

I use Multiselect from AngularJS ui-select.

My multiselect looks like this http://plnkr.co/edit/zJRUW8STsGlrJ38iVwhI?p=preview

Spans can be arranged in multiple lines if there are many. I want to do nice vertical aligment for this.

I managed to do it for one line:

_{(source: cs630525.vk.me)}

But it fails on multiple lines:

_{(source: cs630525.vk.me)}

"nice vertical aligment" - paddings with same colors must be equal

_{(source: cs630525.vk.me)}

HTML

  <ui-select multiple class="ui-select-container ui-select-multiple ui-select-bootstrap form-control dropdown" 
             ng-model="multipleDemo.colors" ng-disabled="disabled">
      <ui-select-match class="ui-select-match" placeholder="Select colors...">{{$item}}</ui-select-match>
      <ui-select-choices repeat="color in availableColors | filter:$select.search">
        {{color}}
      </ui-select-choices>
  </ui-select>

CSS

.ui-select-multiple.ui-select-bootstrap {
  padding: 0 3px;
  min-height: 34px;
  height: auto;
  width: 300px;
}

.ui-select-match {
  display: inline;
  vertical-align: baseline;
}

.ui-select-multiple.ui-select-bootstrap input.ui-select-search {
  min-height: 32px;
  margin: 0;
}

.ui-select-multiple.ui-select-bootstrap > div {
  min-height: 32px;
}

.form-control {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
}

How can I do this?

.ui-select-multiple.ui-select-bootstrap .ui-select-match-item { display:block; } add this to your csss — Arun Kumar M, Jan 28 '16 at 13:09
So what is this supposed to look like? *"nice vertical aligment"*...is vague. — Paulie_D, Jan 28 '16 at 15:39
@Paulie_D , i updated my post with the answer to your question) — pmk, Jan 28 '16 at 16:26
You're demo doesn't show the issue...can update it to show the actual problem? — Paulie_D, Jan 28 '16 at 16:38

score 3 · Answer 1 · answered Jan 28 '16 at 13:15

3

Add below code to your css

.ui-select-multiple.ui-select-bootstrap .ui-select-match-item { 
   display:block; 
}

answered Jan 28 '16 at 13:15

Arun Kumar M

1,633
1
15
26

thanks but your solution works bad for me - [screen](http://cs630525.vk.me/v630525759/147c8/doXyqeY_6-o.jpg) – pmk Jan 28 '16 at 14:57

Vertical alignment multiple spans inside div with variable height (ui-select-multiple)

1 Answers1