I am currently using AngularJS ui-select's Multiselect feature.
If you want to see how my multiselect looks, check it out here: http://plnkr.co/edit/zJRUW8STsGlrJ38iVwhI?p=preview
When arranging spans in multiple lines, achieving nice vertical alignment can be a bit tricky.
I was able to achieve it for one line like this:
https://i.stack.imgur.com/2TAjW.jpg
(source: cs630525.vk.me)
However, I encountered issues when trying to align multiple lines nicely:
https://i.stack.imgur.com/wOCXg.jpg
(source: cs630525.vk.me)
https://i.stack.imgur.com/jQfIk.jpg
(source: cs630525.vk.me)
The goal is to have equal paddings with the same colors for "nice vertical alignment."
https://i.stack.imgur.com/dkZko.jpg
(source: cs630525.vk.me)
Here is the HTML snippet:
<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>
Here is the CSS snippet:
.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 achieve consistent vertical alignment with equal paddings?