ember.js - How to disable multi-select-component in ember-widgets -
is there way disable multi-select-component addepar's ember-widgets?
this works single select-component
{{select-component contentbinding="selectcountries" prompt="select country" value=selectselected disabled=true }} the same not work multi-select-component
{{multi-select-component contentbinding="selectcountries" prompt="select country" selections=multiselectselected disabled=true }} here's not-working js bin example. looked through source code, there doesn't seem option this.
the fastest way think of doing it, short of editing source code (updated js bin):
i defined ember component takes array of strings (selections) parameter. used classes used multi-select-component didn't have redefine css:
<script type="text/x-handlebars" id="components/disabled-multi-select"> <div class="ember-view ember-select multi-select-disabled" tabindex="-1"> <div class="ember-select-container ember-select-multi dropdown-toggle js-dropdown-toggle"> <ul class="form-control ember-select-choices"> {{#each selection in selections}} <li class="ember-view ember-select-search-choice"> <div>{{selection}}</div> <div class="ember-select-search-choice-close">×</div> </li> {{/each}} </ul> </div> </div> </script> then added css make disabled select:
.ember-select.multi-select-disabled > .ember-select-container > .form-control { cursor: not-allowed; background-color: #eee; opacity: 1; } .ember-select.multi-select-disabled > .ember-select-container .ember-select-search-choice { background-color: #d8d8d8; cursor: not-allowed; } .ember-select.multi-select-disabled > .ember-select-container .ember-select-search-choice .ember-select-search-choice-close { cursor: not-allowed; } .ember-select.multi-select-disabled > .ember-select-container .ember-select-search-choice .ember-select-search-choice-close:hover { background-color: #d8d8d8; } it's used this:
{{#if isinputdisabled}} // stick multi-select-component in here {{else}} {{disabled-multi-select selections=multiselectselected}} {{/if}}
Comments
Post a Comment