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


i use multiselect angularjs ui-select.

my multiselect looks http://plnkr.co/edit/zjruw8stsglrj38ivwhi?p=preview

spans can arranged in multiple lines if there many. want nice vertical aligment this.

i managed 1 line:

http://cs630525.vk.me/v630525759/14770/wc2j1zbmx9e.jpg

but fails on multiple lines:

http://cs630525.vk.me/v630525759/14777/wudetojrvx0.jpg http://cs630525.vk.me/v630525759/1477e/27qtejdqlam.jpg

"nice vertical aligment" - paddings same colors must equal

http://cs630525.vk.me/v630525759/147d8/yzbfrsigxl8.jpg

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 this?

add below code css

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

Comments

Popular posts from this blog

Hatching array of circles in AutoCAD using c# -

ios - UITEXTFIELD InputView Uipicker not working in swift -

Python Pig Latin Translator -